Provera kontrasta boja

Proveri svoje boje

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

1.00:1

Kontrast

Ne prolazi

Veoma 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 rešenja

Naslov pregleda

Brza smeđa lisica skače preko lenjog psa

Primer malog teksta (12px)

Tekst

#ffffff

Pozadina

#156082

WCAG standardi

Nivo AA

Minimalni odnos kontrasta od 4.5:1 za običan tekst i 3:1 za veliki tekst. Potrebno za većinu sajtova.

Nivo AAA

Poboljšani odnos kontrasta od 7:1 za običan 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 odnos kontrasta između boje teksta i pozadine.

Izaberi boju koristeći biranje boje za tekst i pozadinu ili unesi boju u RGB heksadecimalnom formatu (npr. #259 ili #2596BE). Možeš podesiti klizač za odabir boje. Smernice za pristupačnost Web sadržaja (WCAG) imaju specifične smernice za procenu čitljivosti teksta za korisnike sa vidom. Ovaj kriterijum koristi određeni algoritam za mapiranje kombinacija boja u uporedive odnose. Prema ovoj formuli, WCAG navodi da je 4.5:1 odnos kontrasta boje sa tekstom i pozadinom adekvatan za običan tekst, a veliki tekst (18+ pt obični, ili 14+ pt bold) treba da ima najmanje odnos kontrasta 3:1.

Ključne karakteristike

Izračunavanje kontrastnog odnosa u realnom vremenu
Provera usklađenosti sa WCAG AA i AAA
HSL klizači za fino podešavanje
Višestruki formati pregleda

Napredni alati

Automatsko ispravljanje boja
Uzorci teksta i pozadine
Detekcija naziva boje
Izvoz rezultata

Često postavljana pitanja

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

WCAG AAA zahteva veće odnose kontrasta: 7:1 za običan tekst i 4,5:1 za veliki tekst, u poređenju sa 4,5:1 i 3:1 za AA.

Koristi našu funkciju automatske ispravke da prilagodiš boje teksta ili pozadine, a da pritom zadržiš dizajnersku nameru, ili ručno podesi boje pomoću HSL klizača sa vizuelnim oznakama koje pokazuju optimalne zone za AA/AAA usklađenost.

Zelene zone i AA/AAA oznake pokazuju optimalne opsege za postizanje WCAG usklađenosti. Smerne oznake (Svetlije/Tamnije) te vode ka boljem kontrastu na osnovu tvoje trenutne kombinacije boja.

Da, možeš uneti bilo koji heks kod boje ili koristiti birač boja za izbor sopstvenih boja. URL se automatski ažurira pa možeš podeliti određene kombinacije boja.