Kryterium 1.4.11 – Kontrast elementów nietekstowych to nowe wymaganie wprowadzone w WCAG 2.1 (Poziom AA). Jego celem jest zapewnienie, że ważne elementy graficzne, które przekazują informacje lub są interaktywne (np. przyciski, pola formularzy, ikony), mają wystarczający kontrast względem tła, by były widoczne także dla osób z osłabionym wzrokiem lub zaburzeniami percepcji barw.
W tym artykule pokażemy, jak sprawdzić, czy strona spełnia to kryterium – bez potrzeby znajomości kodu.
Co oznacza „kontrast elementów nietekstowych”?
Chodzi o takie elementy, które nie zawierają tekstu, ale:
-
pełnią funkcję interaktywną (np. przyciski, suwaki, pola wyboru),
-
przekazują informacje wizualne (np. ikony, znaczniki statusu, linie wykresów).
Te elementy powinny być dobrze widoczne i odróżnialne od tła.
WCAG 2.1 zaleca, aby współczynnik kontrastu między kolorem elementu a tłem wynosił co najmniej 3:1 – tak samo jak dla dużego tekstu.
Jak sprawdzić zgodność z kryterium 1.4.11 bez wiedzy technicznej?
1. Sprawdź widoczność przycisków, pól i ikon
Co zrobić?
Wejdź na stronę i skup się na wszystkich interaktywnych oraz informacyjnych elementach nietekstowych – np. przyciskach, polach formularzy, ikonach akcji, suwakach, przełącznikach.
Na co zwrócić uwagę?
-
Czy przycisk ma czytelną obwódkę lub tło, które dobrze go odróżnia od reszty strony?
-
Czy pole formularza jest dobrze zaznaczone i nie zlewa się z tłem?
-
Czy ikona (np. kosz, lupa, serduszko) jest widoczna bez trudu?
-
Czy linie wykresów, zaznaczenia na mapie, wskaźniki i paski postępu mają wyraźny kolor?
Przykład błędu:
Przycisk „Wyślij” ma jasnoszary kolor i znajduje się na białym tle – użytkownik z osłabionym wzrokiem może go nie zauważyć.
2. Użyj trybu wysokiego kontrastu lub symulatora
Co zrobić?
Możesz uruchomić tryb wysokiego kontrastu w systemie operacyjnym lub skorzystać z darmowych symulatorów niskiego kontrastu i daltonizmu dostępnych jako rozszerzenia do przeglądarek.
Na co zwrócić uwagę?
-
Czy elementy, które wcześniej były czytelne, nadal są widoczne?
-
Czy można łatwo zlokalizować aktywne elementy (przyciski, pola wyboru)?
-
Czy zmiany koloru (np. statusy, alerty) nadal mają sens?
Przykład błędu:
Ikona ostrzeżenia (np. żółty trójkąt) na jasnym tle przestaje być widoczna przy symulacji daltonizmu – brak wystarczającego kontrastu.
Czego to kryterium nie dotyczy?
-
Tekstu – tekst objęty jest osobnym kryterium (1.4.3 – Kontrast minimum).
-
Zdjęć, grafik dekoracyjnych – jeśli nie pełnią funkcji informacyjnej ani interaktywnej.
-
Logotypów – WCAG nie narzuca kontrastu dla logotypów.
Podsumowanie
Kryterium 1.4.11 – Kontrast elementów nietekstowych zwiększa dostępność strony dla osób z osłabionym wzrokiem, daltonizmem i problemami percepcyjnymi. Zapewnia, że wszystkie ważne graficzne i interaktywne elementy są dobrze widoczne – nawet przy niskim kontraście lub w niesprzyjających warunkach.
Dobre praktyki:
-
Używaj kolorów o wysokim kontraście dla ikon, przycisków, ramek.
-
Unikaj jasnych odcieni szarości na jasnym tle (lub ciemnych na ciemnym).
-
Testuj stronę w symulatorach dostępności lub narzędziach do pomiaru kontrastu.
-
Zadbaj o widoczne stany aktywne, najechania kursorem i zaznaczenia.
Dzięki temu Twoja strona będzie nie tylko bardziej dostępna, ale także czytelniejsza i bardziej intuicyjna dla wszystkich użytkowników.