Nástroj používa oficiálny vzorec WCAG pre relatívnu svietivosť, takže jeho výsledky sa zhodujú s kontrolórom WebAIM a väčšinou prístupnostných auditov. Všetko prebieha priamo v prehliadači - farby sa nikam nenahrávajú a počet použití nie je obmedzený.
Kontrola kontrastu farieb
Beží celý vo vašom prehliadači - bez nahrávania, bez registrácie.
Pomer kontrastu
Vyhovujepotrebuje 4.5:1
Vyhovujepotrebuje 3:1
Nevyhovujepotrebuje 7:1
Vyhovujepotrebuje 4.5:1
Veľký text = 18 bodov (24 px), alebo 14 bodov (18,66 px) tučne.
Čo je kontrola kontrastu farieb?
Kontrola kontrastu farieb meria pomer kontrastu medzi farbou textu a jeho pozadím a určí, či spĺňa štandardy prístupnosti WCAG. Vráti pomer od 1:1 do 21:1 a zobrazí, či text vyhovuje úrovni AA alebo AAA - pre normálnu aj veľkú veľkosť písma.
Ako na to
- 1Zadajte farby. Napíšte hex kód, hodnotu rgb() alebo názov farby v CSS pre text aj pozadie, alebo vyberte farby pomocou vzorkovníka.
- 2Prečítajte pomer. Pomer kontrastu sa aktualizuje naživo spolu s náhľadom textu na jeho pozadí.
- 3Skontrolujte výsledky. Každý odznak zobrazuje, či text vyhovuje alebo nevyhovuje úrovni WCAG AA a AAA pre normálnu aj veľkú veľkosť písma.
Pre koho je nástroj určený
- Dizajnéri, ktorí testujú farby značky ešte pred odovzdaním do vývoja.
- Front-end vývojári, ktorí kontrolujú farby tlačidiel, odkazov a popiskov voči WCAG AA.
- Auditoři prístupnosti, ktorí dokumentujú zlyhania kontrastu s presnými pomermi.
- Obsahové a e-mailové tímy, ktoré overujú čitateľnosť textu na farebnom pozadí.
Časté otázky
Je kontrola kontrastu farieb zadarmo?
Áno - je 100 % zadarmo, bez registrácie a bez limitov. Beží celá vo vašom prehliadači.
Aký pomer kontrastu potrebujem pre WCAG AA?
WCAG 2.1 úroveň AA vyžaduje pomer kontrastu aspoň 4,5:1 pre normálny text a 3:1 pre veľký text. Úroveň AAA zvyšuje požiadavku na 7:1 pre normálny text a 4,5:1 pre veľký text.
Čo sa považuje za veľký text?
Veľký text je aspoň 18 bodov (približne 24 px) pri bežnej hrúbke, alebo 14 bodov (približne 18,66 px) pri tučnom reze. Veľký text môže mať nižší pomer kontrastu, pretože väčšie znaky sú ľahšie čitateľné.
Ako sa vypočíta pomer kontrastu?
Vzorec je (L1 + 0,05) / (L2 + 0,05), kde L1 a L2 sú relatívne svietivosti svetlejšej a tmavšej farby. Svietivosť sa počíta z kanálov červenej, zelenej a modrej v sRGB podľa definície WCAG 2.x.
Podporuje hex, RGB a názvy farieb?
Áno. Môžete zadať 3-, 4-, 6- alebo 8-miestny hex, hodnoty rgb() a rgba() alebo akýkoľvek názov farby v CSS, napríklad teal. Farby môžete aj vybrať pomocou vzorkovníka farieb.
Prečo rovnaký pomer niekedy vyhovuje a inokedy nie?
Požadovaný pomer závisí od veľkosti textu a cieľovej úrovne. Pomer 3,5:1 nevyhovuje AA pre normálny text, ale vyhovuje AA pre veľký text - vždy kontrolujte voči veľkosti a úrovni, ktorú skutočne používate.