Współczynnik kontrastu
Zob. też: kontrast kolorów
Stosunek luminancji tekstu na pierwszym planie do jego tła, w skali od 1:1 do 21:1. WCAG 2.x wymaga 4,5:1 dla tekstu normalnego i 3:1 dla tekstu dużego (≥18pt lub 14pt pogrubionego) na poziomie AA.
Współczynnik kontrastu mierzy percepcyjną różnicę luminancji między dwoma kolorami — zazwyczaj tekstem i jego tłem. Skala przebiega od 1:1 (brak kontrastu — biały na białym) do 21:1 (czysty czarny na czystym białym). WCAG definiuje minimalne wartości kontrastu niezbędne do czytelności tekstu.
Progi WCAG
Kryteria sukcesu WCAG 2.x 1.4.3 (Minimalny kontrast, poziom AA) i 1.4.6 (Zwiększony kontrast, poziom AAA) wyznaczają następujące wartości minimalne:
| Typ tekstu | AA | AAA |
|---|---|---|
| Tekst normalny (< 18pt lub < 14pt pogrubionego) | 4,5:1 | 7:1 |
| Tekst duży (≥ 18pt lub ≥ 14pt pogrubionego) | 3:1 | 4,5:1 |
| Elementy graficzne i komponenty UI (1.4.11) | 3:1 | — |
WCAG 2.x mierzy kontrast za pomocą formuły opartej na luminancji. WCAG 3 bada perspektywicznie zastąpienie jej percepcyjnie jednorodnym algorytmem „APCA” (Accessible Perceptual Contrast Algorithm), który inaczej zachowuje się przy bardzo ciemnych lub bardzo jasnych tłach; APCA nie jest jeszcze normatywna.
Co umyka uwadze
Kontrast to jedna z nielicznych reguł WCAG, które narzędzia mogą wykryć z wysoką pewnością, więc automaty wyłapują większość naruszeń w tekście na tle. Co jednak nadal umyka:
- Tekst zastępczy w polach formularzy. Często #999 lub jaśniejszy na białym — nie spełnia AA. Projektanci chętnie stosują niskokontrastowe placeholdery, by odróżnić je od wpisanej wartości, lecz właściwą praktyką jest użycie osobnego
<label>nad polem i zastosowanie wystarczającego kontrastu w placeholderze (lub rezygnacja z niego). - Stany najechania i fokus. Przycisk z odpowiednim domyślnym kontrastem może nie spełnić wymogu po najechaniu (np. jasnoszary hover na białym). Sprawdzaj elementy interaktywne we wszystkich stanach wizualnych.
- Elementy wyłączone. Kontrolki wyłączone są formalnie zwolnione z wymogu kontrastu AA, lecz wyszarzenie wyłącznie niskim kontrastem nie daje użytkownikom z wadami widzenia barw sygnału, że kontrolka jest nieaktywna. Łącz kolor z inną wskazówką — ikoną, zmianą etykiety lub
aria-disabled, by czytniki ekranu mogły to ogłosić. - Tekst na obrazach i gradientach. Nakładki na zdjęciach w sekcjach hero, gdzie tekst przechodzi nad jasnym i ciemnym obszarem obrazu, często nie spełniają wymogu w jaśniejszym fragmencie.
- Ikony jako jedyna etykieta. Ikona 24 px bez tekstu wymaga kontrastu 3:1 w stosunku do tła (1.4.11); pomiarowi podlegają „znaczące piksele” — kontury kształtu.
Testowanie operacyjne
Trzy sposoby wczesnego wykrywania błędów kontrastu:
- Lintowanie na etapie projektu. Stark, Able i sprawdzanie dostępności w Adobe XD oceniają kontrast bezpośrednio w narzędziu projektowym. Napraw błędy zanim powstanie kod.
- Tokenizowane palety. Każdą parę tekst/tło zdefiniuj jako token, którego kontrast jest sprawdzany raz. Zabroń stosowania doraźnych wartości kolorów na komponentach z tekstem.
- Automatyczne sprawdzanie w CI. axe-core, Pa11y lub Lighthouse przerywają kompilacje przy naruszeniach kontrastu. Tanie w dodaniu, kosztowne w pominięciu.
Powyżej minimum
4,5:1 to minimum, a nie cel estetyczny. Użytkownicy z łagodnymi wadami widzenia barw, postępującą utratą wzroku związaną z wiekiem lub ekranami niskiej jakości preferują 7:1 lub więcej dla tekstu podstawowego. Witryna, która „ledwo” spełnia AA na każdym elemencie, sprawia wrażenie niskokontrastowej nawet dla użytkowników bez formalnych dysfunkcji wzroku.