Overte farby, ktoré sú na stránke spolu
Zadajte farbu textu a pozadia vo formáte HEX. Nástroj prepočíta ich kanály sRGB na relatívnu svietivosť a určí kontrast svetlejšej a tmavšej farby. Pomer siaha od 1:1 pri rovnakých farbách po 21:1 pri čiernej na bielej. Číslo je spoľahlivejšie než odhad podľa názvu odtieňov, pretože rozdielne farby môžu mať podobnú svietivosť. Náhľad ukáže vybraný text na skutočnom farebnom pozadí. Skontrolujte dvojicu, ktorá sa na stránke naozaj stretne: prechod, polopriehľadná vrstva alebo prekrytie môžu zmeniť farbu priamo za písmenami. Pri priehľadnosti najprv zistite výslednú zloženú farbu a testujte ju. Otočenie textu a pozadia číselný pomer nezmení.
Rozumejte hraniciam AA a AAA
Pravidlá WCAG 2.2 požadujú pri bežnom texte na úrovni AA kontrast aspoň 4,5:1. Pri dostatočne veľkom texte môže byť podľa podmienok hranica 3:1. Prísnejšia úroveň AAA požaduje 7:1 a pri veľkom texte 4,5:1. Kalkulačka zobrazí štyri samostatné výsledky, aby ste jeden nemuseli odvodzovať z druhého. Farebná dvojica môže vyhovovať veľkému nadpisu, ale zlyhať pri obyčajnom odseku. Riaďte sa skutočne zobrazenou veľkosťou a hrúbkou písma, nie pomenovaním štýlu. Tmavomodrá #1A365D na bielej #FFFFFF dáva približne 12,14:1 a prejde všetkými štyrmi testami. Svetlejším odtieňom môžete skúsiť, kedy sa hranica prekročí.
Využite výsledok pri kontrole dizajnu
Začnite bežným textom, ktorý spravidla potrebuje prísnejšiu hranicu pre štandardnú veľkosť. Potom skontrolujte nadpisy, odkazy, navigáciu, názvy polí a text na tlačidlách aj v ich rôznych stavoch. Zapíšte si presnú dvojicu farieb, aby ste ju po zmene vzhľadu mohli znovu otestovať. Náhľad pomáha porovnať farebné varianty, číslo zase zabraňuje čisto subjektívnemu rozhodnutiu. Netextové ovládacie prvky spadajú pod iné kritérium WCAG. Úspech v tomto teste nepotvrdzuje vhodnosť ikon, obrysov, označenia fokusu ani celej stránky. Uplatnenie výnimky pre veľký text závisí od jeho konečnej veľkosti a hrúbky. Kompletná kontrola preverí aj klávesnicu a zväčšovanie.
Vyhnite sa chybám merania
Neporovnávajte text s bielou iba preto, že celá stránka má biely podklad, ak veta leží na farebnej karte. Merajte farbu bezprostredne za textom. Pomer pred porovnaním s hranicou nezaokrúhľujte nahor: nástroj počíta z presnej hodnoty a skracuje až zobrazenie. Číslo 4,50:1 tesne pri hranici si zaslúži kontrolu konkrétnych kódov a konečného zobrazenia. Vzorec WCAG používa určené hodnoty sRGB, aj keď monitor alebo snímka pôsobia odlišne. Na skutočnom webe si prezrite prekrytia a zmeny stavu. Ak dvojica nevyhovuje, zmeňte farbu popredia, pozadia alebo obidve a prepočítajte ju. Samotné zväčšenie písma ešte neoprávňuje použiť hranicu pre veľký text.