Co mówi norma
Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 4,5:1, poza następującymi wyjątkami:
Dlaczego to ma znaczenie
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.
Jak wygląda błąd
- 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 sprawdza to A11ySignal
Przy każdym skanowaniu względem tego kryterium uruchamia się 1 automatyczne sprawdzenie.
poważnycolor-contrastElementy muszą mieć wystarczający kontrast kolorów.
Także pod 1.4 Rozróżnialność
- 1.4.1 Użycie koloru
- 1.4.2 Kontrola odtwarzania dźwięku
- 1.4.4 Zmiana rozmiaru tekstu
- 1.4.5 Obrazy tekstu
- 1.4.6 Kontrast (wzmocniony)
- 1.4.7 Cichy lub całkowicie wyciszony dźwięk w tle
- 1.4.8 Prezentacja wizualna
- 1.4.9 Obrazy tekstu (bez wyjątków)
- 1.4.10 Dopasowanie do ekranu
- 1.4.11 Kontrast elementów nietekstowych
- 1.4.12 Odstępy w tekście
- 1.4.13 Treść spod kursora lub fokusu