Niewystarczający kontrast między tekstem a tłem to jedno z zagadnień, które najczęściej pojawia się w skanach dostępności, a jednocześnie jeden z błędów najłatwiej do uniknięcia. Problem pojawia się, gdy jasny szary tekst znajduje się na białym tle, gdy przyciski są widoczne tylko dzięki subtelnej zmianie koloru, lub gdy tekst zastępczy w polu formularza pełni funkcję jedynego wskazówki, co należy wypełnić. Dla osób z dysfunkcją wzroku, ale także dla każdego, kto korzysta z ekranu w jasnym świetle słonecznym, tekst staje się dosłownie nieczytelny.
WCAG 2.1, norma, do której odwołuje się EN 301 549, prescribe dla poziomu AA minimalny kontrast między tekstem a tłem, na którym się znajduje: zwykle 4,5 do 1 dla zwykłego tekstu i 3 do 1 dla dużego tekstu oraz dla elementów interaktywnych, takich jak przyciski i obramowania pól formularza. Brzmi to technicznie, ale podstawowa idea jest prosta: kontrast nie jest wyborem estetycznym, jest warunkiem do przekazania informacji.
Gdzie w praktyce pojawia się problem
Problemy kontrastowe rzadko powstają celowo. Wkradają się poprzez wybory dotyczące stylu, które wyglądają świetnie na dużym, ostrym ekranie w studiu projektowania, ale na przeciętnym ekranie przy przeciętnym użytkowniku ledwo spadają poniżej normy. Jasny szary tekst przycisku na pastelowym tle to klasyczny przykład. To samo dotyczy linków rozpoznawalnych tylko po różnicy w kolorze, bez podkreślenia czy innego sygnału wizualnego, przez co osoby z niedowidzeniem barw po prostu nie dostrzegają ich jako klikalne.
Innym powtarzającym się wzorem jest status hover: przycisk, który w stanie spoczynkowym całkowicie spełnia wymogi, ale po najechaniu muszą zmienia się na kombinację kolorów, która nie była testowana. Komunikaty o błędach w formularzach to także częsty błąd: czerwony tekst na jasnoczerwonym tle wygląda spójnie ze stylem, ale często nie osiąga wymaganego współczynnika. Jeśli chcesz zobaczyć, jak tego rodzaju zagadnienia wyglądają w twoim środowisku, możesz to w kilka pytań zobaczyć, gdzie stoi Twoja witryna bez konieczności zakładania konta.
Dlaczego skan automatyczny to częściowo, ale nie w pełni rozwiązuje
Współczynniki kontrastu można dobrze mierzyć automatycznie: skaner odczytuje wartości kolorów tekstu i tła oraz oblicza współczynnik. Dzięki temu jest to jedno z niewielu kryteriów WCAG, które narzędzie może niezawodnie testować. Czego skan nie widzi, to kontrast, który pojawia się dopiero po interakcji, na przykład menu rozwijane, etykietka narzędzia, która pojawia się podczas fokusa, lub status widoczny dopiero po akcji użytkownika. To dokładnie dlatego każdy raport wskazuje, jaka część została przetestowana automatycznie, a jaka wymaga oceny ręcznej; kontrast jest mocną stroną testowania automatycznego, ale nie całą historią.
Jak to strukturalnie uniknąć
Najczęstszym sposobem na strukturalne uniknięcie tego problemu jest ustalenie kontrastu na poziomie systemu projektowania zamiast na poziomie poszczególnych stron. Gdy podstawowe kolory stylu są już testowane pod kątem normy podczas ustalania, redaktor lub deweloper nie musi każdorazowo tego sprawdzać. Zapobiega to również temu, że nowa strona, tymczasowy baner promocyjny lub zewnętrznie pobierany widget niepostrzeżenie nie osiąga wymaganego współczynnika kontrastu.
Zaleca się ponadto, aby kontrast został wyraźnie uwzględniony przy każdej zmianie wizualnej witryny, a nie tylko przy pierwszym oddaniu. Odnowienie tożsamości wizualnej, nowy motyw sezonowy lub zmieniony styl przycisku może wprowadzić problem, który nie istniał w poprzedniej wersji. Dostępność nie jest w tym sensie zaznaczeniem, które ustawia się jednorazowo, ale kwestią wymagającą uwagi podczas bieżącej konserwacji. Więcej o tym, jak taka ciągła kontrola działa w praktyce, przeczytasz tutaj wyjaśnienie pochodzenia oceny.
Na koniec warto zwrócić uwagę nie tylko na minimalny standard, ale na jego zamysł: czy wszyscy, również w mniej idealne warunki oświetlenia lub na starszym ekranie, mogą faktycznie rozróżnić tekst i przyciski. Częste wątpliwości, takie jak czy logo lub obraz dekoracyjny również muszą spełniać wymóg kontrastu, zostały szczegółowo wyjaśnione na stronie odpowiedzi na pytania pojawiające się częściej.
Czy chcesz wiedzieć, czy kontrast i inne powtarzające się problemy dotyczą również Twojego środowiska? Bezpłatne szybkie skanowanie daje na to pierwszy wskaźnik, a baza wiedzy z tematami dopasowanymi do Twojej sytuacji pokazuje, jak ta kwestia wiąże się z resztą wymogów wynikających z Europejskiej dyrektywy dostępności.