WCAG 1.4.3 Kontrast (minimum) (AA) · aktualizacja
Niski kontrast tekstu: jak sprawdzić i poprawić (WCAG 1.4.3)
Tekst ma za niski kontrast, gdy jego kolor za mało różni się od tła. WCAG 2.2 na poziomie AA wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego (od 24 px albo od 18,66 px pogrubionego). Naprawa polega na przyciemnieniu tekstu albo rozjaśnieniu tła, aż pomiar przekroczy próg.
Jak często się zdarza
To najczęstszy błąd w sieci. Według raportu WebAIM Million 2026 niski kontrast tekstu miało 83,9% z miliona najpopularniejszych stron głównych, średnio 34 miejsca na stronę.
Komu to przeszkadza
Osoby słabowidzące i starsze, ale też każdy, kto czyta telefon w słońcu. Jasnoszary tekst na białym tle wygląda elegancko na dobrym monitorze w biurze projektanta. Na tanim ekranie laptopa po prostu znika.
Skąd się bierze
- Jasnoszary tekst pomocniczy: ceny przekreślone, daty, podpisy pod zdjęciami, stopka.
- Biały napis na żółtym, jasnozielonym albo pomarańczowym przycisku „Dodaj do koszyka".
- Placeholder w polu formularza użyty zamiast etykiety. Domyślny szary placeholder prawie zawsze ma za mały kontrast.
- Tekst na zdjęciu albo gradiencie. Tu kontrast zmienia się w każdym miejscu napisu.
Poprawka w kodzie
Przed
<p class="cena-stara" style="color:#b0b0b0">129,00 zł</p>
<!-- #b0b0b0 na białym tle: 2,1:1 -->Po
<p class="cena-stara" style="color:#6b6b6b">129,00 zł</p>
<!-- #6b6b6b na białym tle: 5,3:1 -->Szary nadal jest szary i nadal wygląda na informację drugiego planu. Różnica jest taka, że da się go przeczytać.
Jak sprawdzić to samodzielnie
- Otwórz stronę na telefonie i ustaw jasność ekranu na mniej więcej połowę.
- Przeczytaj ceny, stopkę i napisy na przyciskach. Każde miejsce, przy którym mrużysz oczy, zmierz.
- Zmierz kolor tekstu i tła w kalkulatorze kontrastu. Poniżej 4,5:1 dla zwykłego tekstu to błąd.
- Sprawdź też stany: najechanie myszą, zaznaczenie, nieaktywny przycisk z komunikatem.
Co wykryje skaner, a czego nie
Skaner wykryje
Skaner zmierzy kontrast każdego tekstu na jednolitym tle i poda dokładny wynik, na przykład 2,1:1 przy wymaganych 4,5:1.
Wymaga sprawdzenia przez człowieka
Tekstu na zdjęciu, gradiencie albo wideo automat nie rozstrzygnie, bo tło zmienia się pod każdą literą. Takie miejsca Dostepli oznacza w raporcie jako „do ręcznej weryfikacji".
Najczęstsze pytania
Jaki kontrast jest wymagany przez WCAG 2.2 na poziomie AA?
Co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, czyli od 24 px albo od 18,66 px przy pogrubieniu. Ikony i obramowania pól formularza potrzebują co najmniej 3:1 według kryterium 1.4.11.
Czy logo firmy też musi mieć kontrast 4,5:1?
Nie. WCAG wyłącza z wymagań kontrastu logotypy i tekst będący częścią nazwy marki. Nie dotyczy to jednak sloganu ani menu obok logo.
Czy tekst w nieaktywnym przycisku musi mieć kontrast?
Nie, elementy nieaktywne są wyłączone z kryterium 1.4.3. Jeśli jednak obok jest komunikat, dlaczego przycisk jest nieaktywny, ten komunikat musi być czytelny.
Źródła
- [1] Understanding Success Criterion 1.4.3W3C Web Accessibility Initiative (WAI)
- [2] Kontrast kolorówgov.pl, serwis Dostępność cyfrowa
- [3] The WebAIM Million: raport 2026 o dostępności miliona stron głównychWebAIM, Institute for Disability Research, Policy, and Practice, Utah State University