Możesz założyć, że każdy postrzega kolory i czytelność tekstu tak samo jak Ty. Sposób postrzegania kolorów może zależeć od otoczenia (słabe lub jasne światło) oraz naszych możliwości widzenia. Ty i Twoi użytkownicy jesteście wśród milionów osób mających daltonizm lub niedowidzący.
Aby pomóc osobom z niepełnosprawnością wzrokową, grupa WAI stworzyła formułę kontrastu kolorów, aby zapewnić odpowiedni kontrast między tekstem a tłem. Po zastosowaniu tych współczynników kontrastu kolorów osoby niedowidzące mogą czytać tekst w tle bez korzystania z technologii wspomagającej osoby z niepełnosprawnością.
Zwróć uwagę na różnice we współczynnikach kontrastu pokazane na Rysunku 1.
Współczynnik kontrastu 4,5:1 to wymagane minimum, zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines) 2.0. Został on wybrany, ponieważ rekompensuje stratę wrażliwości na kontrast, do której dochodzi często u użytkowników z wadą wzroku, co odpowiada w przybliżeniu 20:40.
Współczynnik 4, 5:1 to zaledwie minimum. Dla użytkowników niedowidzących i niedowidzących należy spełniać wymagania AAA i tworzyć treści z kontrastem 7:1.
Kontrast kolorów możesz sprawdzić za pomocą kontroli ułatwień dostępu Lighthouse w Narzędziach deweloperskich.
Zaawansowany algorytm kontrastu percepcyjnego
Zaawansowany algorytm kontrastu perceptualnego (APCA) to sposób obliczania kontrastu na podstawie współczesnych badań nad postrzeganiem kolorów.
Poziom APCA w większym stopniu zależy od kontekstu niż poziomy AA i AAA w WCAG.
W tym modelu kontrast jest obliczany na podstawie następujących cech:
- właściwości przestrzennych (grubość czcionki i rozmiar tekstu),
- Kolor tekstu (zauważona różnica w jasności tekstu i tła)
- Kontekst (jasność otoczenia, otoczenie i przeznaczenie tekstu)
Chrome zawiera eksperymentalną funkcję, która zastępuje wytyczne dotyczące współczynnika kontrastu AA/AAA wytycznymi APCA.
Przekazuj ważne informacje nie tylko za pomocą koloru
Gdy przekazujesz użytkownikom ważne informacje, korzystaj z tekstu lub tekstu alternatywnego jako wskazówek wizualnych przy udostępnianiu ważnych informacji. Są to m.in. kolory, wzory, obrazy, style czcionek i język kierunkowy.
Możesz na przykład używać formularza kontaktowego, który wskazuje nieprawidłowe dane wejściowe przez podkreślenie ich na czerwono. Nie informuje jednak czytnika ekranu ani użytkowników z wadami wzroku, że coś nie działa. Użytkownik może z tego powodu zastanawiać się, dlaczego przesłanie formularza nie działa.
Pamiętaj, aby poinformować użytkownika o konkretnym błędzie na kilka sposobów. Możesz np. dodać komunikat o błędzie z informacją, że dane wejściowe są nieprawidłowe i dlaczego. Możesz też dodać tekst pomocy informujący o tym, jak powinno wyglądać prawidłowe dane wejściowe.
Nadal możesz podkreślać nieprawidłowe dane na czerwono, o ile istnieją dodatkowe, niewizualne wskazówki.
Jeśli używasz kolorów w interfejsie, możesz wykryć problemy z kontrastem w Narzędziach deweloperskich w Chrome.
Zwiększ kontrast i odwróć kolory
Dla osób niedowidzących tryby wysokiego kontrastu mogą ułatwić poruszanie się po treści strony. Wysoki kontrast można skonfigurować na kilka sposobów.
Zarówno macOS, jak i Windows oferują sposoby na zwiększenie kontrastu w różnych systemach operacyjnych.
Użytkownicy mogą też odwrócić kolory pierwszego planu i tła (na przykład w macOS), co jest szczególnie przydatne w witrynach i aplikacjach, które nie obsługują trybów ciemnych.
Deweloperzy mogą sprawdzić, czy interfejs jest nadal widoczny i czy można z niego korzystać. Aby to zrobić, włącz te ustawienia i ręcznie sprawdź łatwość obsługi.
Na przykład pasek nawigacyjny może mieć subtelny kolor tła, aby wskazać, którą stronę wybrano. Jeśli wyświetlisz ją w trybie wysokiego kontrastu, ten subtelność całkowicie zniknie, a czytelnik będzie wiedzieć, która strona jest aktywna.
Jeśli kontrastujesz na poziomie AA lub wyższym, Twoje treści powinny nadal działać zgodnie z oczekiwaniami, gdy kolory są odwrócone lub mają wysoki kontrast. Mimo to warto przeprowadzić testy, aby mieć pewność, że wszystko działa zgodnie z oczekiwaniami.