Kontrola farebného kontrastu

Úroveň AA vyžaduje 4.5:1 pre bežný text a 3:1 pre veľký text (kritérium úspešnosti 1.4.3); úroveň AAA vyžaduje 7:1 a 4.5:1 (1.4.6). Komponenty používateľského rozhrania a zmysluplná grafika potrebujú 3:1 voči susedným farbám (1.4.11). Nástroj pri každom z týchto piatich prahov oznámi, či je splnený.

WCAG definuje veľký text ako text s veľkosťou aspoň 18 bodov v bežnom reze, približne 24 CSS pixelov, alebo aspoň 14 bodov v tučnom reze, približne 18,66 CSS pixelov. Menší text sa považuje za bežný a vyžaduje vyšší pomer.

Prahové hodnoty WCAG sú presné, takže pomer, ktorý by sa po zaokrúhlení zobrazil ako 4,5, ale je nižší, podmienku nespĺňa. Nástroj porovnáva nezaokrúhlený pomer a zobrazuje ho skrátený na dve desatinné miesta, takže zobrazené číslo nikdy nevyzerá lepšie než skutočná hodnota.

Accessible Perceptual Contrast Algorithm je metóda merania kontrastu vyvinutá pre návrhy WCAG 3. Modeluje vnímaný kontrast svetlosti, rozlišuje medzi textom a pozadím a vracia hodnotu kontrastu svetlosti Lc v rozsahu približne od -108 do 106. Zatiaľ nie je súčasťou žiadneho publikovaného štandardu WCAG, preto na overenie súladu používajte výsledky WCAG 2 a APCA ako doplnkovú kontrolu.

APCA zohľadňuje polaritu: kladné hodnoty znamenajú tmavý text na svetlom pozadí, záporné hodnoty svetlý text na tmavom pozadí. Odporúčania používajú absolútnu hodnotu, takže Lc -75 a Lc 75 patria do rovnakej úrovne.

Vychádzajú z jednoduchého režimu APCA bronze: pre hlavný text sa odporúča Lc 90, minimom je Lc 75, pre ostatný obsahový text platí Lc 60, pre nadpisy a veľký text Lc 45, pre text čitateľný len zbežne, napríklad zástupný text, Lc 30 a pre netextové prvky Lc 15. Záleží aj na veľkosti a hrúbke písma, preto tieto úrovne považujte za východiskové body, nie za konečný verdikt.

Konštanty APCA-W3 verzie 0.0.98 G, revízia 4g, s jednoduchým exponentom 2.4 pre kanály sRGB, mäkkým orezaním čiernej a orezaním nízkeho kontrastu. Čierny text na bielom pozadí dáva približne Lc 106.0 a biely text na čiernom približne Lc -107.9, čo zodpovedá referenčnej implementácii.

Hexadecimálne kódy s # alebo bez neho, CSS názvy farieb, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() priestory ako display-p3 a cmyk(). Farby mimo sRGB sa najprv prevedú do sRGB, pretože oba vzorce sú určené pre farby na obrazovkách sRGB.

Polopriehľadná farba textu sa pred meraním zmieša s pozadím tak, ako ju vykresľuje prehliadač. Polopriehľadné pozadie sa najprv zmieša s bielou. Výsledok uvádza nepriehľadné farby textu a pozadia, ktoré sa skutočne porovnávali.

Pri WCAG 2 nie, pretože pomer svetlejšej a tmavšej luminancie je v oboch poradiach rovnaký. Pri APCA áno, pretože text a pozadie majú rozdielne váhy, preto zadajte farbu textu do prvého poľa a farbu pozadia do druhého.