Nástroj používá oficiální vzorec WCAG pro relativní jas, takže výsledky odpovídají checkeru WebAIM a většině auditů přístupnosti. Vše běží v prohlížeči - barvy se nikam neodesílají a počet kontrol není omezen.
Kontrola kontrastu barev
Běží celé ve vašem prohlížeči - nic se nenahrává, žádná registrace.
Poměr kontrastu
Splněnopotřebuje 4.5:1
Splněnopotřebuje 3:1
Nesplněnopotřebuje 7:1
Splněnopotřebuje 4.5:1
Velký = 18 pt (24 px) nebo 14 pt (18,66 px) tučně.
Co je kontrola kontrastu barev?
Kontrola kontrastu barev změří poměr kontrastu mezi barvou textu a jeho pozadím a ukáže, zda splňuje standardy přístupnosti WCAG. Vrátí hodnotu od 1:1 do 21:1 a zobrazí výsledek AA i AAA pro normální i velký text.
Jak na to
- 1Zadejte barvy. Napište hex kód, hodnotu rgb() nebo název CSS barvy pro text a pozadí, nebo vyberte barvy přes výběr barev.
- 2Přečtěte si poměr. Poměr kontrastu se aktualizuje průběžně s náhledem textu na zvoleném pozadí.
- 3Zkontrolujte odznaky. Každý odznak ukazuje výsledek WCAG AA a AAA pro normální i velký text.
Pro koho je nástroj
- Designéři, kteří testují firemní barvy ještě před předáním do vývoje.
- Front-end vývojáři, kteří kontrolují barvy tlačítek, odkazů a popisků vůči WCAG AA.
- Auditoři přístupnosti, kteří dokumentují nevyhovující kontrast s přesnými hodnotami.
- Redakce a e-mailové týmy, které potřebují ověřit čitelnost textu na barevném pozadí.
Časté dotazy
Je kontrola kontrastu barev zdarma?
Ano - je 100% zdarma, bez registrace a bez limitů. Běží přímo ve vašem prohlížeči.
Jaký poměr kontrastu potřebuji pro WCAG AA?
WCAG 2.1 úroveň AA vyžaduje poměr kontrastu alespoň 4,5:1 pro normální text a 3:1 pro velký text. Úroveň AAA zvyšuje požadavek na 7:1 pro normální text a 4,5:1 pro velký text.
Co se považuje za velký text?
Velký text je alespoň 18 pt (přibližně 24 px) v normálním řezu nebo 14 pt (přibližně 18,66 px) tučně. Velký text může mít nižší poměr kontrastu, protože větší písmo se čte snáze.
Jak se vypočítá poměr kontrastu?
Vzorec je (L1 + 0,05) / (L2 + 0,05), kde L1 a L2 jsou relativní jas světlejší a tmavší barvy. Jas se vypočítá z kanálů sRGB červené, zelené a modré podle definice WCAG 2.x.
Podporuje hex, RGB a názvy barev?
Ano. Lze zadat 3-, 4-, 6- nebo 8-místný hex, hodnoty rgb() a rgba() nebo libovolný název CSS barvy, například 'teal'. Barvy lze také vybrat přes nativní výběr barev.
Proč stejný poměr někdy projde a jindy ne?
Požadovaný poměr závisí na velikosti textu a cílové úrovni. Poměr 3,5:1 neprojde AA pro normální text, ale projde AA pro velký text - vždy kontrolujte konkrétní velikost a úroveň, kterou skutečně používáte.