Kontrola barevného kontrastu
Ověřte kontrast mezi barvou textu a barvou pozadí podle WCAG 2 a APCA. Kontrola vypočítá kontrastní poměr WCAG 2 z relativní luminance, uvede, zda běžný a velký text splňuje úrovně AA a AAA a zda vyhovují také UI grafiky, a doplní hodnotu kontrastu světlosti APCA s doporučením, k čemu je tato hodnota užitečná. Určeno návrhářům a vývojářům, kteří vytvářejí přístupná rozhraní.
Často kladené otázky
Co znamenají úrovně WCAG?
Úroveň AA vyžaduje 4.5:1 pro běžný text a 3:1 pro velký text (kritérium úspěšnosti 1.4.3); úroveň AAA vyžaduje 7:1 a 4.5:1 (1.4.6). Komponenty uživatelského rozhraní a smysluplná grafika potřebují kontrast 3:1 vůči sousedním barvám (1.4.11). Kontrola u každého z těchto pěti prahů uvádí, zda je splněn.
Co se považuje za velký text?
WCAG definuje velký text jako písmo o velikosti alespoň 18 bodů v běžné řezu, tedy přibližně 24 CSS pixelů, nebo alespoň 14 bodů tučně, tedy přibližně 18,66 CSS pixelů. Menší text se považuje za běžný a vyžaduje vyšší poměr.
Proč poměr 4.499:1 nesplňuje AA?
Prahové hodnoty WCAG jsou přesné, takže poměr, který by se zaokrouhlil na 4,5, ale je nižší, požadavky nesplňuje. Kontrola porovnává nezaokrouhlený poměr a zobrazuje jej zkrácený na dvě desetinná místa, takže uvedené číslo nikdy nevypadá lépe než skutečná hodnota.
Co je APCA?
Algoritmus přístupného vnímaného kontrastu (Accessible Perceptual Contrast Algorithm) je metoda výpočtu kontrastu vyvinutá pro návrhy WCAG 3. Modeluje vnímaný kontrast světlosti, rozlišuje mezi textem a pozadím a vrací hodnotu kontrastu světlosti Lc přibližně od -108 do 106. Zatím není součástí žádného vydaného standardu WCAG, proto pro ověření shody použijte výsledky WCAG 2 a APCA jako doplňkovou kontrolu.
Proč je hodnota APCA někdy záporná?
APCA zohledňuje polaritu: kladné hodnoty znamenají tmavý text na světlém pozadí, záporné hodnoty světlý text na tmavém pozadí. Doporučení vycházejí z absolutní hodnoty, takže Lc -75 i Lc 75 spadají do stejné kategorie.
Jak se určují úrovně doporučení APCA?
Vycházejí z jednoduchého režimu APCA bronze: pro hlavní text se doporučuje Lc 90, minimum pro hlavní text je Lc 75, pro ostatní textový obsah Lc 60, pro nadpisy a velký text Lc 45, pro text čitelný jen při krátkém pohledu, například zástupný text, Lc 30 a pro netextové prvky Lc 15. Velikost a tloušťka písma jsou stále důležité, proto tyto úrovně považujte za výchozí vodítka, nikoli za konečný verdikt.
Která verze APCA je implementována?
Konstanty APCA-W3 verze 0.0.98 G, revize 4g, s jednoduchou mocninou 2.4 pro kanály sRGB, měkkým limitem černé a oříznutím nízkého kontrastu. Černý text na bílém pozadí má hodnotu přibližně Lc 106.0 a bílý text na černém Lc -107.9, což odpovídá referenční implementaci.
Jaké barevné formáty mohu zadat?
Hexadecimální kódy s # i bez něj, CSS názvy barev, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() barevné prostory, například display-p3, a cmyk(). Barvy mimo sRGB se nejprve převedou do sRGB, protože oba vzorce jsou definovány pro barvy obrazovky sRGB.
Jak se zpracovávají průhledné barvy?
Částečně průhledná barva textu se před měřením smíchá s pozadím tak, jak ji vykresluje prohlížeč. Částečně průhledné pozadí se nejprve smíchá s bílou. Výsledek uvádí neprůhledné barvy textu a pozadí, které byly skutečně porovnány.
Záleží na pořadí těchto dvou barev?
U WCAG 2 na pořadí nezáleží, protože poměr světlejší a tmavší luminance je v obou případech stejný. U APCA na něm záleží, protože text a pozadí mají rozdílnou váhu. Barvu textu proto zadejte do prvního pole a barvu pozadí do druhého.