Provjera kontrasta boja

Provjeri svoje boje

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

1.00:1

Kontrast

Nije prošlo

Vrlo loše

Normalan tekst

AA (4.5:1)

AAA (7:1)

Veliki tekst

AA (3:1)

AAA (4.5:1)

Boja teksta

Boja pozadine

Brza rješenja

Naslov pregleda

Brza smeđa lisica skače preko lijenog psa

Primjer malog teksta (12px)

Tekst

#2596be

Pozadina

#ffffff

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.

Nedovoljan kontrast za sve veličine teksta - ne ispunjava WCAG standarde.

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.