Jeśli masz dobry wzrok, możesz założyć, że wszyscy postrzegają kolory lub czytelność tekstu w taki sam sposób jak Ty. To nieprawda. Jak można sobie wyobrazić, niektóre kombinacje kolorów, które jedne osoby będą zrozumiałe, są trudne lub niemożliwe dla innych. Zwykle jest to spowodowane kontrastem kolorów, czyli zależnością między luminancją kolorów pierwszego planu i tła. Gdy kolory są podobne, współczynnik kontrastu jest niski. Gdy kolory są bardziej różne, współczynnik jest wyższy.
Zgodnie z wytycznymi WebAIM współczynnik kontrastu AA (minimalny) dla całego tekstu wynosi 4,5:1. Istnieją wyjątki dla bardzo dużego tekstu (większego o 120–150% niż domyślny tekst główny), w przypadku których współczynnik może spaść do 3:1. Zwróć uwagę na przedstawione tu współczynniki kontrastu:
Współczynnik kontrastu 4,5:1 dla poziomu AA został wybrany, ponieważ kompensuje on utratę czułości kontrastu, która jest zwykle zauważalna u użytkowników z wadą wzroku, która odpowiada w przybliżeniu 20/40. Wartość 20/40 jest często podawana jako typowa ostrość wzrokowa u osób w wieku około 80 lat. W przypadku użytkowników z wadą wzroku lub osób z wadą kolorów możesz zwiększyć kontrast tekstu głównego do 7:1.
Kontrast kolorów możesz sprawdzić za pomocą audytu ułatwień dostępu w Lighthouse. Aby wygenerować raport:
- Otwórz Narzędzia deweloperskie.
- Kliknij Kontrole.
- Kliknij Ułatwienia dostępu.
Chrome zawiera też eksperymentalną funkcję, która pomaga wykryć na stronie cały tekst o niskim kontraście. Możesz też skorzystać z dostępnych sugestii dotyczących kolorów, aby poprawić tekst o niskim kontraście.
Aby uzyskać pełniejszy raport, zainstaluj rozszerzenie na temat ułatwień dostępu. Raporty Fastpass zawierają szczegółowe informacje o elementach, które nie przejdą kontroli kontrastu kolorów.
Zaawansowany algorytm kontrastu percepcyjnego (APCA)
Zaawansowany algorytm kontrastu perceptualnego (APCA) to nowy sposób obliczania kontrastu na podstawie nowoczesnych badań nad postrzeganiem kolorów.
W porównaniu z wytycznymi AA i AAA zasady APCA w większym stopniu zależą od kontekstu.
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.
Nie przekazuj informacji tylko za pomocą koloru
Na świecie jest około 320 milionów osób cierpiących na zaburzenia rozpoznawania barw. Około 1 na 12 mężczyzn i 1 na 200 kobiet ma dawkę barw, co oznacza, że około 5% użytkowników nie będzie korzystać z Twojej witryny w oczekiwany sposób. poleganie na kolorach w przekazywaniu informacji sprowadza tę liczbę do nieakceptowalnych poziomów.
Na przykład w formularzu wejściowym numer telefonu może być podkreślony na czerwono, aby wskazać, że jest nieprawidłowy. Użytkownicy, którzy używają czytnika ekranu lub mają słabe kolory, mogą źle przekazać te informacje lub w ogóle nie. Dlatego warto zawsze udostępniać użytkownikom różne sposoby na dostęp do ważnych informacji.
Zgodnie z sekcją 1.4.1 listy kontrolnej WebAIM „kolor nie powinien być używany jako wyłączna metoda przekazywania treści lub rozróżniania elementów wizualnych”. Zauważa również, że „nie należy używać samego koloru do odróżniania linków od otaczającego tekstu”, chyba że spełniają one określone wymagania dotyczące kontrastu. Zamiast tego zalecamy dodanie do listy kontrolnej dodatkowego wskaźnika, takiego jak podkreślenie (za pomocą właściwości CSS text-decoration), aby wskazać, kiedy link jest aktywny.
Podstawowym sposobem na poprawienie poprzedniego przykładu jest dodanie do pola dodatkowego komunikatu z informacją, że jest on nieprawidłowy, i wyjaśnieniem jego przyczyny.
Tworząc aplikację, pamiętaj o tym i uważaj na obszary, w których kolor może przekazywać ważne informacje zbyt często.
Jeśli chcesz się dowiedzieć, jak Twoja witryna wygląda na tle innych osób lub w dużym stopniu polega na używaniu kolorów w interfejsie, możesz użyć Narzędzi deweloperskich w celu symulowania różnych form wad wzroku. Chrome zawiera funkcję emulacji niedowidzeń. Aby go uzyskać, otwórz Narzędzia deweloperskie, a potem w panelu otwórz kartę Renderowanie. Następnie możesz emulować następujące niedobory kolorów:
- Protanopia: niewidzenie czerwonego światła.
- Deuteranopia: niezdolność dostrzegania zielonego światła.
- Tritanopia: niezdolność do postrzegania niebieskiego światła.
- Achromatopsja: niezdolność dostrzegania dowolnego koloru z wyjątkiem odcieni szarości (skrajnie rzadkie).
Tryb wysokiego kontrastu
Tryb wysokiego kontrastu umożliwia odwrócenie kolorów pierwszego planu i tła, co często pomaga lepiej wyróżnić tekst. Dla osób niedowidzących tryb wysokiego kontrastu może znacznie ułatwić poruszanie się po treści strony. Istnieje kilka sposobów na skonfigurowanie wysokiego kontrastu na komputerze:
Systemy operacyjne takie jak Mac OS X i Windows oferują tryby wysokiego kontrastu, które można włączyć do wszystkiego na poziomie systemu.
Warto włączyć ustawienia wysokiego kontrastu i sprawdzić, czy cały interfejs aplikacji jest nadal widoczny i można z niego korzystać.
Na przykład pasek nawigacyjny może mieć subtelny kolor tła, aby wskazać, którą stronę wybrano. Jeśli wyświetlisz ją w rozszerzeniu o wysokim kontraście, ten subtelny charakter całkowicie zniknie, a czytelnik będzie wiedzieć, która strona jest aktywna.
I podobnie, w przykładzie z poprzedniego przykładu podkreślenie na czerwono nieprawidłowego pola numeru telefonu może być trudne do rozróżniania w kolorze niebiesko-zielonym.
Jeśli spełniasz wymagania dotyczące współczynników kontrastu omówionych wcześniej, nie powinno być problemów z obsługą trybu wysokiego kontrastu. Dla większego bezpieczeństwa możesz zainstalować rozszerzenie do Chrome o wysokim kontraście i sprawdzić, czy wszystko działa i wygląda zgodnie z oczekiwaniami.