ImageColorPicker.com

Provjera kontrasta boja

Testiraj omjer kontrasta između boje prednjeg plana i pozadine kako bi osigurao pristupačnost.

Provjeri svoje boje

Testiraj kombinacije boja kako bi osigurao da ispunjavaju WCAG standarde pristupačnosti za čitljivost teksta.

17.07 prema 1
Kontrast
AAA
Rezultat teksta
Super

Upoređeno: #000000 na #ACF7DA

Tekst

16px, Regular (400)

Računa se kao običan tekst.

  • AA (WCAG 1.4.3): najmanje 4.5:1

    Položeno

  • AAA (WCAG 1.4.6): najmanje 7:1

    Položeno

Komponente korisničkog sučelja i grafika

Ikone, obrubi input polja, indikator fokusa i drugi dijelovi koje moraš vidjeti da bi koristio sučelje.

  • AA (WCAG 1.4.11): najmanje 3:1

    Položeno
17.07 prema 1. Tekst: zadovoljava AA, zadovoljava AAA. UI komponente: zadovoljava.
Kako se ovo provjerava
Boje koje se upoređuju (nakon miješanja)
Tekst #000000 na pozadini #ACF7DA
Relativna luminancija
Tekst 0.0000, pozadina 0.8035
Formula
(L1 + 0.05) / (L2 + 0.05) gdje je L1 luminancija svjetlije boje, a L2 tamnije.
Tačan odnos
17.0708 prema 1, prikazano kao 17.07 prema 1. Prikazana vrijednost je odrezana, nije zaokružena, pa nikad ne izgleda bolje nego što jeste. Tačna vrijednost je ona koja se upoređuje sa zahtjevom.

Veličina teksta: 16px, Regular (400)

Računa se kao običan tekst. Veliki tekst je najmanje 24px (18pt), ili najmanje 18.67px (14pt) kada je bold (debljina 700 ili više). Veličine se prikazuju odrezane, ne zaokružene.

Računa se kao običan tekst. Veliki tekst je najmanje 24px (18pt), ili najmanje 18.67px (14pt) kada je bold (debljina 700 ili više). Veličine se prikazuju odrezane, ne zaokružene.

Aa
Naslov pregleda

Brza smeđa lisica skače preko lijenog psa

Primjer malog teksta (12px)

Tekst
#000000
Pozadina
#acf7da

WCAG standardi

Nivo AA

Minimalni omjer kontrasta od 4.5:1 za normalan tekst i 3:1 za veliki tekst. Potrebno za većinu web stranica.

Nivo AAA

Poboljšani omjer kontrasta od 7:1 za normalan tekst i 4.5:1 za veliki tekst. Preporučeno za optimalnu pristupačnost.

Provjera kontrasta boja

Izračunaj omjer kontrasta između boje teksta i pozadine.

Izaberi boju pomoću selektora boja za tekst i pozadinsku boju ili unesi boju u RGB heksadecimalnom formatu (npr., #259 ili #2596BE). Možeš prilagoditi klizač za odabir boje. Smjernice za dostupnost web sadržaja (WCAG) imaju specifične smjernice koje pomažu utvrditi je li tekst čitljiv za korisnike s dobrim vidom. Ovi kriteriji koriste određeni algoritam za mapiranje kombinacija boja u usporedive omjere. Prema ovoj formuli, WCAG navodi da je 4.5:1 omjer kontrasta boja između teksta i njegove pozadine adekvatan za uobičajen (tijelo) tekst, a veliki tekst (18+ pt regular, ili 14+ pt podebljan) treba imati barem omjer kontrasta boja od 3:1.

Ključne karakteristike

  • Izračunavanje kontrastnog omjera u stvarnom vremenu
  • Provjera usklađenosti s WCAG AA i AAA
  • HSL klizači za fino podešavanje
  • Višestruki formati pregleda

Napredni alati

  • Automatsko popravljanje boja
  • Uzorke teksta i pozadine
  • Detekcija naziva boje
  • Izvoz rezultata

Najčešće postavljena pitanja

Za WCAG AA usklađenost običan tekst zahtijeva minimalni omjer kontrasta 4,5:1, dok veliki tekst (18pt ili 14pt podebljano) zahtijeva 3:1.

WCAG AAA zahtijeva veće omjere kontrasta: 7:1 za običan tekst i 4,5:1 za veliki tekst, u odnosu na 4,5:1 i 3:1 za AA.

Koristi našu funkciju automatskog popravljanja za podešavanje teksta ili pozadine uz zadržavanje dizajnerske namjere, ili ručno podesi boje HSL klizačima s vizualnim oznakama koje pokazuju optimalne zone za AA/AAA usklađenost.

Zelene zone i oznake AA/AAA pokazuju optimalne raspone za postizanje WCAG usklađenosti. Smjerni savjeti (Svjetlije/Tamnije) vode te prema boljem kontrastu na osnovu tvoje trenutne kombinacije boja.

Da, možeš unijeti bilo koji HEX kod boje ili koristiti birač boja za odabir vlastitih boja. URL se automatski ažurira pa možeš podijeliti određene kombinacije boja.