Kryterium, które za tym stoi
1.4.3 Kontrast (minimum)
Tekst potrzebuje kontrastu co najmniej 4,5:1 wobec tła — 3:1, jeśli jest duży.
Poziom AA · EN 301 549 § 9.1.4.3
Po co jest to sprawdzenie
To zdecydowanie najczęstszy błąd w sieci, na ponad czterech z pięciu stron głównych. Dotyka każdego z obniżoną wrażliwością na kontrast, a to z czasem większość osób po sześćdziesiątce.
Co zwykle je wywołuje
- błądSzary tekst podpowiedzi albo pomocniczy na bieli — klasyczne #999 na #fff to 2,8:1.
- błądBiały tekst na kolorze marki dobranym do logo, nie do tekstu ciągłego.
- błądTekst na zdjęciu bez przyciemnienia.
- błądStan wyłączony rozjaśniony tak bardzo, że nikt nie odczyta, co jest wyłączone.
Jak to naprawić
- róbZmierz, zanim wdrożysz. Duży tekst to 18,66 px pogrubione albo 24 px zwykłe — cała reszta potrzebuje 4,5:1.
- róbRaczej przyciemnij tekst, niż rozjaśniaj tło; to zwykle lepiej zachowuje projekt.
- róbNa zdjęciach dodaj kryjące przyciemnienie albo cień tekstu, który sam spełnia wymóg.
- róbPrzy wyłączonych kontrolkach zachowaj czytelny tekst i pokaż stan słowami.
Jak to jest raportowane
A11ySignal zgłasza to z wagą poważny. Każdy błędny element ma swój selektor CSS i kod, który zawiódł, więc trafisz prosto do właściwej linii, zamiast jej szukać. Deque publikuje szczegóły na poziomie silnika:
https://dequeuniversity.com/rules/axe/4.13/color-contrast ↗
Sprawdzenie zaimplementowane w axe-core 4.13.0, © Deque Systems, MPL-2.0.