Contrast Checker vypočíta kontrastný pomer podľa WCAG 2.1 medzi dvoma farbami a vyhodnotí ho voči hraniciam AA/AAA pre bežný aj veľký text. Živý náhľad zobrazuje text vykreslený vo zvolených farbách a tlačidlo „pick page background“ odoberie vzorku z aktuálnej stránky.
Prístupnosť sa stáva čoraz viac povinnosťou — súlad s WCAG je v mnohých krajinách zákonná požiadavka, a aj tam, kde nie je, slabý kontrast odháňa používateľov. Contrast Checker vám okamžite povie, či akékoľvek dve farby spĺňajú štandardy WCAG. Vyberte popredie a pozadie pomocou výberu farby alebo vložte hexadecimálne hodnoty; nástroj vypočíta kontrastný pomer podľa oficiálneho vzorca jasu WCAG a vyhodnotí ho voči štyrom hraniciam: AA normal (≥4,5:1), AA large (≥3:1), AAA normal (≥7:1) a AAA large (≥4,5:1). Každá hranica zobrazuje jasný odznak Pass/Fail. Živý náhľad vykresľuje veľký aj bežný text vo zvolených farbách, takže vidíte skutočný vizuálny dopad. Praktické tlačidlo odoberie vzorku farby pozadia body aktuálnej stránky — užitočné pri kontrole, či kombinácia farieb na reálnej stránke vyhovuje. Všetko beží lokálne vo vašom prehliadači, žiadne nahrávanie na server.
Používa oficiálny vzorec jasu WCAG na výpočet kontrastného pomeru. Výsledok je presný a zhoduje sa s každým certifikovaným nástrojom na kontrolu prístupnosti.
Pass/fail pre AA normal (≥4,5:1), AA large (≥3:1), AAA normal (≥7:1), AAA large (≥4,5:1) — všetko zobrazené v mriežke.
Vykresľuje skutočný veľký aj bežný text vo vašich zvolených farbách, takže popri číselnom pomere vidíte aj vizuálny dopad.
Jedným kliknutím odoberie vypočítanú farbu pozadia body aktuálnej stránky — užitočné pri testovaní reálnych kombinácií.
Zadajte hexadecimálnu hodnotu alebo použite natívny výber farby. Hodnoty sa obojsmerne synchronizujú pri úprave ktoréhokoľvek z nich.
Jedným kliknutím prehodíte popredie a pozadie — užitočné pri kontrole invertovaných tém alebo stavov hover.
Pred finalizáciou farebnej palety skontrolujte každú farbu textu voči jej pozadiu, aby ste zaistili súlad s WCAG AA — vyhnete sa neskoršej prerábke.
Použite „pick page background“ na živej stránke a vložte skutočnú farbu textu — nájdite porušenia prístupnosti za pár minút bez otvárania Lighthouse.
Keď značka zvolí farbu, ktorá môže zlyhať v prístupnosti, použite checker na nájdenie najbližšej vyhovujúcej varianty (tmavší/svetlejší odtieň).
Overte, že farby stavov hover/active/disabled stále spĺňajú požiadavky na kontrast, nielen predvolený stav.
Tmavé témy často zlyhávajú v kontraste pri sivom texte na sivom pozadí. Skontrolujte vaše najtmavšie odtiene sivej voči najtmavším pozadiam, aby ste tieto prípady odhalili.
Kliknite na ikonu Contrast v dokovacom paneli DevSuite Pro. Otvorí sa panel s poľami pre farbu popredia a pozadia.
Použite výber farby alebo vložte hexadecimálnu hodnotu pre každú z nich. Živý náhľad sa aktualizuje pri zmene farieb.
Veľké číslo (napr. 4,8:1) je kontrastný pomer. Vyššie je lepšie. 3 je absolútne minimum; 4,5 je cieľová hodnota pre bežný text.
Odznaky Pass/fail pre AA a AAA, pre bežnú aj veľkú veľkosť textu, na prvý pohľad ukazujú, na čo vaša kombinácia dosahuje.
Ak kombinácia zlyháva, upravte farby. Stmavte popredie alebo zosvetlite pozadie (alebo naopak), kým sa pri cieľovej úrovni nezobrazí Pass.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 64 vývojárskych nástools pre váš prehliadač.
