Kryterium 1.4.3 – Kontrast (minimum) to jedno z podstawowych wymagań WCAG 2.1 na poziomie AA, które ma kluczowe znaczenie dla czytelności treści. Kryterium to określa minimalny poziom kontrastu kolorów między tekstem a tłem, dzięki czemu osoby słabowidzące, starsze lub mające trudności ze wzrokiem mogą bez problemu odczytywać informacje.
W tym artykule pokażemy, jak łatwo sprawdzić poziom kontrastu na stronie internetowej, nie posiadając wiedzy technicznej ani nie zaglądając do kodu.
Co oznacza „kontrast (minimum)”?
Chodzi o to, by tekst był wystarczająco widoczny na tle, na którym się znajduje. Gdy kontrast jest zbyt niski – np. szary tekst na jasnoszarym tle – wiele osób może mieć trudność z jego przeczytaniem.
Minimalny wymagany kontrast zgodnie z WCAG 2.1:
-
4.5:1 – dla zwykłego tekstu (np. akapity, etykiety),
-
3:1 – dla dużego tekstu (powyżej 18 punktów lub 14 punktów pogrubionych),
-
Nie dotyczy: tekstów czysto dekoracyjnych, nieaktywnych (np. zablokowane przyciski) i logo.
Jak sprawdzić zgodność z kryterium 1.4.3 bez wiedzy technicznej?
1. Ocena „na oko” – pierwszy krok
Co zrobić?
Spójrz na teksty na stronie – zarówno nagłówki, jak i akapity, przyciski, etykiety formularzy.
Na co zwrócić uwagę?
-
Czy teksty są łatwe do odczytania bez wysiłku?
-
Czy nie zlewają się z tłem?
-
Czy teksty np. na przyciskach nie są „blade”, zwłaszcza w mobilnej wersji strony?
Przykład błędu:
Jasnoszary tekst na białym tle – wygląda estetycznie, ale jest niemal niewidoczny dla wielu użytkowników.
2. Użycie bezpłatnych narzędzi online do sprawdzania kontrastu
Co zrobić?
Zrób zrzut ekranu strony lub skopiuj kod koloru tekstu i tła (jeśli masz dostęp), a następnie skorzystaj z darmowych narzędzi, np.:
-
Rozszerzenia przeglądarki typu „WCAG Contrast Checker” (dla Chrome lub Firefox).
Na co zwrócić uwagę?
-
Czy wynik kontrastu jest co najmniej 4.5:1 dla normalnego tekstu?
-
Czy przycisk lub tekst przechodzi test kontrastu na poziomie AA?
Przykład błędu:
Niebieski tekst (#3399FF) na białym tle ma kontrast tylko 2.6:1 – zbyt niski według standardu WCAG AA.
3. Sprawdzenie kontrastu przy różnych warunkach oświetlenia
Co zrobić?
Przetestuj stronę na urządzeniach mobilnych i komputerze w jasnym świetle dziennym oraz w ciemnym pomieszczeniu.
Na co zwrócić uwagę?
-
Czy tekst wciąż jest dobrze widoczny?
-
Czy trzeba wytężać wzrok, by coś przeczytać?
-
Czy wszystkie informacje (np. linki, przyciski) są zauważalne?
Przykład błędu:
W ciemnym otoczeniu biały tekst na jasnym pastelowym tle może być trudny do przeczytania, mimo że w pełnym świetle wygląda dobrze.
Podsumowanie
Kryterium 1.4.3 – Kontrast (minimum) jest niezwykle ważne, bo wpływa na dostępność treści dla milionów użytkowników – w tym osób słabowidzących, starszych, a także tych korzystających z ekranów w różnych warunkach.
Dobre praktyki:
-
Utrzymuj kontrast tekstu względem tła na poziomie co najmniej 4.5:1.
-
Sprawdzaj kontrast kluczowych elementów: tekstów, przycisków, formularzy.
-
Unikaj tekstów w bardzo jasnych lub pastelowych kolorach bez odpowiedniego tła.
Pamiętaj: dobry kontrast to nie tylko kwestia estetyki, ale przede wszystkim dostępności. Wdrożenie tego kryterium nie wymaga znajomości kodu – wystarczy trochę uwagi i dostęp do prostych narzędzi online.