Sprawdzanie kontrastu WCAG przebiega przez kilka prostych kroków. Żadne dane nie opuszczają Twojej przeglądarki.
- Wprowadzasz kolor pierwszego planu i tła. Narzędzie parsuje hex, rgb(), hsl() lub nazwane kolory CSS na wartości kanałów czerwonego, zielonego i niebieskiego.
- Każdy kanał RGB jest linearyzowany za pomocą funkcji przenoszenia sRGB. Konwertuje to zakodowane gamma wartości wyświetlania na liniowe natężenia światła.
- Wartości liniowe są ważone czułością ludzkiego oka na każdy kanał — 0,2126 dla czerwonego, 0,7152 dla zielonego, 0,0722 dla niebieskiego. Suma to względna luminancja koloru.
- Współczynnik kontrastu to (L1 + 0,05) ÷ (L2 + 0,05), gdzie L1 to luminancja jaśniejszego koloru, a L2 ciemniejszego. Dodatkowe 0,05 utrzymuje wzór ważny dla czystej czerni.
- Współczynnik jest porównywany z progami WCAG: AA normalny tekst potrzebuje co najmniej 4,5:1, AA duży tekst 3:1, AAA normalny tekst 7:1, a AAA duży tekst 4,5:1. Duży tekst oznacza co najmniej 18pt lub 14pt pogrubiony.
FAQ
Częste pytania dotyczące sprawdzania kontrastu WCAG.
Jaka jest różnica między AA a AAA?
AA to minimalny poziom zgodności dla większości treści internetowych. Wymaga współczynnika kontrastu co najmniej 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu. AAA to wyższy standard, wymagający 7:1 dla normalnego tekstu i 4,5:1 dla dużego tekstu. Możesz celować w AAA dla kluczowych treści, takich jak tekst główny na stronie informacyjnej, używając AA dla reszty projektu. Spełnienie AAA wszędzie może być trudne z kolorami marki, więc wiele zespołów dąży do AA wszędzie i podnosi kluczowy tekst do AAA tam, gdzie to możliwe.
Co WCAG uznaje za "duży tekst"?
WCAG 2.x definiuje duży tekst jako co najmniej 18 punktów (24px) dla zwykłej wagi, lub 14 punktów (około 19px) dla wagi pogrubionej. Symbole i ikony będące częścią fontu podlegają tym samym progów. Jeśli nie masz pewności, który próg ma zastosowanie do Twojego interfejsu, sprawdź oba — AA duży ma niższy próg (3:1), więc większość par kolorów, które nie przechodzą AA normalnego, faktycznie przechodzi AA duży, gdy tekst jest wystarczająco duży.
Dlaczego moja para przechodzi AA duży, ale nie przechodzi AA normalnego?
Ponieważ AA duży wymaga tylko współczynnika 3:1, podczas gdy AA normalny wymaga 4,5:1. WCAG ustawia niższy próg dla dużego tekstu, ponieważ większe znaki są łatwiejsze do odczytania nawet przy mniejszym kontraście. Para kolorów o współczynniku, powiedzmy, 4,0:1 przechodzi AA duży (próg 3:1), ale nie przechodzi AA normalnego (próg 4,5:1). Jest to bardzo częste w przypadku jaśniejszych kolorów marki używanych jako pierwszy plan na białych tłach.
Czy mogę polegać wyłącznie na tym narzędziu do audytu dostępności?
To narzędzie sprawdza jedną rzecz — współczynnik kontrastu WCAG 2.x między dwoma jednolitymi kolorami. Prawdziwa dostępność obejmuje więcej: wskaźniki fokusu, rozmiar i wagę czcionki, kolor jako jedyny sposób przekazywania informacji oraz kompatybilność z czytnikami ekranu i narzędziami powiększającymi. Używaj tego sprawdzenia kontrastu wraz z innymi metodami audytu, aby uzyskać pełny obraz dostępności Twojej aplikacji.
Jakie formaty kolorów akceptuje wejście?
Możesz wkleić 3-, 4-, 6- lub 8-cyfrowe kody hex (z # lub bez), wartości rgb() i rgba() w starszej składni z przecinkami lub nowoczesnej składni z odstępami, hsl() i hsla() z dowolną standardową jednostką odcienia (deg, rad, grad, turn), hsv(), hwb() oraz dowolny z 150 nazwanych kolorów CSS z specyfikacji CSS Color Module Level 4. Kolor jest parsowany w całości na Twoim urządzeniu.