Redakcja SAT 
Spis treści
Właściciele stron internetowych powinni zwracać uwagę na popularny błąd powstały na etapie projektowania strony. Jest on częstą przyczyną wykluczenia cyfrowego. Chodzi o kontrast pomiędzy tekstem a tłem. Zbyt niski może sprawić, że treści stają się nieczytelne, zwłaszcza dla osób starszych i z niepełnosprawnością wzrokową. Jak sprawdzić kontrast na stronie internetowej i dostosować go do wytycznych WCAG?
Kontrast – WCAG reguluje jego poziom
Zgodnie z najnowszymi wytycznymi WCAG 2.2, kontrast powinien być uzależniony od rozmiaru czcionki. Dla zwykłego tekstu minimalny współczynnik kontrastu wynosi 4,5:1, natomiast dla większego tekstu (np. 14 punktów w wersji pogrubionej lub 18 punktów w standardowym stylu) wystarczy 3:1. Kontrast na poziomie 3:1 dotyczy też wszelkiego rodzaju treści graficznych, takich jak infografiki, obrazy, bannery czy przyciski.
Obowiązek zachowania wspomnianych wytycznych nie dotyczy logotypu i innych elementów identyfikacji wizualnej. Podobnie jest z tekstami i grafikami, które pełnią funkcję dekoracyjną, nie należą do aktywnego interfejsu strony lub są częścią innego elementu graficznego.
Jeśli z powodu identyfikacji wizualnej strona internetowa nie spełnia powyższych wytycznych WCAG, powinna zapewniać możliwość zmiany barw. Opcje mogą obejmować wersje o wysokim kontraście.
Wersja strony o wysokim kontraście – jakie barwy?
Najbardziej popularną i skuteczną wersją wysokiego kontrastu na stronie internetowej jest połączenie czarnego tła z żółtym tekstem. To zestawienie pozwala na maksymalną widoczność i minimalizuje ryzyka zmęczenia oczu.
Dostosowanie kolorów w wersji wysokiego kontrastu powinno uwzględniać potrzeby związane z różnymi wadami wzroku. Dlatego warto rozważyć dodanie innych opcji kolorystycznych, takich jak białe tło z czarnym tekstem (najwyższy możliwy poziom kontrastu – 21:1). Może być ono bardziej komfortowe dla niektórych użytkowników.
Dlaczego kontrast jest tak ważny?
Odpowiedni kontrast umożliwia wyraźne odczytanie tekstu i łatwiejsze poruszanie się po stronie. Osoby z zaburzeniami widzenia kolorów mają trudności z rozróżnieniem elementów witryny, jeśli kontrast jest zbyt niski. Wysoki kontrast na stronie internetowej poprawia czytelność i zmniejsza obciążenie wzroku, co ma znaczenie również w przypadku osób starszych.
Jak sprawdzić kontrast na stronie internetowej?
Warto korzystać z narzędzi online, które pozwalają ocenić poziom kontrastu na stronie internetowej. Jednym z nich jest nasza platforma SAT, która analizuje wszystkie elementy strony i wskazuje potencjalne problemy. W kontekście kontrastu WCAG przewiduje precyzyjne wytyczne – program ma do nich dostęp i sam jest w stanie zweryfikować, czy domena je spełnia. Sprawdza rozmiar czcionki i tło, a w razie wykrycia nieprawidłowości pomaga dostosować poziom kontrastu.
Jak zmienić kontrast na stronie?
Aby możliwa była zmiana kontrastu strony internetowej, jej właściciel powinien udostępnić taką opcję. Funkcjonalność ma być łatwo dostępna – zazwyczaj w postaci kafelków lub przycisków widocznych w górnej części strony. Kliknięcie takiego kafelka pozwoli użytkownikowi wybrać preferowaną wersję kolorystyczną. Strona automatycznie powinna wtedy zmienić odcienie.
Kafelki umożliwiające zmianę kontrastu
Gdzie jeszcze warto zwrócić uwagę na poziom kontrastu?
Warto zadbać nie tylko o kontrast na stronach internetowych. Zgodnie z Ustawą o dostępności cyfrowej z dnia 4 kwietnia 2019 r., właściwy kontrast powinny mieć też treści udostępniane w mediach społecznościowych i aplikacjach mobilnych oraz dokumenty publikowane na stronach.
Stosując właściwy kontrast pomiędzy tekstem a tłem na stronie, nie wyklucza się osób starszych oraz użytkowników z niepełnosprawnością wzrokową. Należy więc przeanalizować swoją stronę pod tym kątem i w razie potrzeby dodać kilka wersji kontrastowych do wyboru.
