Ślepota barw a projektowanie stron: co warto wiedzieć

Częstsza, niż zdaje sobie sprawę większość projektantów

Zaburzenie widzenia barw — powszechnie nazywane ślepotą barw — dotyka około 8% mężczyzn i 0,5% kobiet. To około 1 na 12 mężczyzn i 1 na 200 kobiet, co czyni je bardziej powszechnym niż większość innych niepełnosprawności, którymi zajmują się standardy dostępności cyfrowej.

A jednak jest rutynowo pomijane w projektowaniu. Zespoły testują z czytnikami ekranu i nawigacją klawiaturą, przeprowadzają automatyczne skanowanie WCAG i uznają pracę nad dostępnością za zakończoną — nigdy nie sprawdzając, czy ich paleta kolorów jest czytelna dla użytkowników z zaburzeniem widzenia barw.

Zrozumienie ślepoty barw i tego, co faktycznie robi ona z projektowanymi przez Ciebie interfejsami webowymi, to pierwszy krok do jej naprawienia.

Rodzaje i ich działanie

Zaburzenie widzenia barw występuje w kilku postaciach, które nie wszystkie dają takie samo doświadczenie.

Zaburzenia czerwono-zielone (najczęstsze)

Protanopia — całkowity brak fotoreceptorów czopków czerwonych. Czerwień wydaje się ciemna lub czarna. Rozróżnienia czerwono-zielone są utracone.

Protanomalia — zmniejszona wrażliwość na czerwień. Czerwień, pomarańcz i żółć przesuwają się w stronę zieleni, a całe doświadczenie jest przygaszone, jak gdyby kanał czerwony został przyciszony.

Deuteranopia — całkowity brak receptorów czopków zielonych. Najczęstsza postać ślepoty barw. Zieleń i czerwień są mylone; świat wygląda, jakby był filtrowany przez żółto-brązową soczewkę.

Deuteranomalia — zmniejszona wrażliwość na zieleń. Podobna do deuteranopii, ale łagodniejsza. Najbardziej rozpowszechniony typ ogółem, dotykający około 5% mężczyzn.

Zaburzenia niebiesko-żółte (rzadsze)

Tritanopia — brak receptorów czopków niebieskich. Niebieski wydaje się zielony, a żółty blady lub niewidoczny. Rzadkie.

Tritanomalia — zmniejszona wrażliwość na niebieski. Niebiesko-zielone i czerwono-fioletowe są mylone.

Monochromatyzm (bardzo rzadki)

Achromatopsia — brak wszystkich receptorów czopków barwnych. Postrzegana jest tylko jasność; świat jawi się w odcieniach szarości. Często towarzyszy jej nadwrażliwość na światło i obniżona ostrość wzroku.

Jak ślepota barw psuje popularne wzorce webowe

Znajomość rodzajów w oderwaniu jest mniej użyteczna niż wiedza o tym, które konkretne decyzje projektowe powodują problemy. Oto te najczęstsze.

Stany błędu oznaczane wyłącznie czerwienią

Zmiana obramowania pola formularza na czerwone, aby pokazać błąd walidacji, to jeden z najbardziej rozpowszechnionych wzorców w projektowaniu stron. Dla użytkowników z zaburzeniem czerwono-zielonym czerwień na białym lub czerwień na szarym może być niemal niewidoczna albo nieodróżnialna od normalnego stanu bez fokusu.

Jest to bezpośrednio objęte przez WCAG 2.2 1.4.1 Wykorzystanie koloru (poziom A): kolor nie może być jedynym środkiem przekazywania informacji, wskazywania akcji, wywoływania reakcji ani rozróżniania elementu wizualnego.

Rozwiązanie jest proste: połącz kolor z drugim wskaźnikiem wizualnym — ikoną, etykietą tekstową, zmianą grubości obramowania lub jakimkolwiek innym sygnałem niezależnym od koloru.

<!-- Poleganie wyłącznie na kolorze: nie spełnia 1.4.1 -->
<input type="email" class="field--error">

<!-- Kolor plus ikona plus tekst: spełnia -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Podaj prawidłowy adres e-mail.
  </p>
</div>

Niewystarczający kontrast

Niski kontrast to problem odrębny od ślepoty barw, ale się one przecinają. Wiele palet kolorów, które wydają się czytelne dla typowego widzenia barw, staje się jeszcze trudniejszych do odczytania przy zaburzeniu widzenia barw, ponieważ postrzegana różnica między pierwszym planem a tłem kurczy się jeszcze bardziej.

WCAG 1.4.3 wymaga minimalnego współczynnika kontrastu 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Testowanie kontrastu narzędziem takim jak próbnik kolorów w DevTools przeglądarki lub dedykowany sprawdzacz jest bezdyskusyjne — nie polegaj na oględzinach.

Wizualizacja danych kodowana wyłącznie kolorem

Wykres kołowy z sześcioma segmentami rozróżnianymi wyłącznie kolorem. Mapa z gradientem od czerwieni do zieleni. Wykres liniowy, na którym cztery zestawy danych są rozróżniane samą barwą.

Dla użytkowników z deuteranopią czerwień i zieleń stają się nieodróżnialne. Znaczenie wykresu całkowicie się załamuje. Więcej na ten temat znajdziesz w naszym przewodniku o dostępnej wizualizacji danych.

Linki, które wyróżniają się z tekstu głównego wyłącznie kolorem

Domyślnie przeglądarki podkreślają linki. Wielu projektantów usuwa to podkreślenie i polega wyłącznie na kolorze, aby odróżnić linki od otaczającego tekstu. Użytkownicy z zaburzeniem widzenia barw — a zwłaszcza ci korzystający z motywów o niskim kontraście — mogą w ogóle nie rozpoznać linków.

WCAG 1.4.1 ma tu również zastosowanie. Jeśli kolor linku jest jedynym wskaźnikiem wizualnym (brak podkreślenia, brak pogrubienia, brak innego wyróżnika), link nie jest dostępny dla użytkowników z zaburzeniem widzenia barw.

Najprostsze rozwiązanie: przywróć podkreślenie. Alternatywnie zadbaj, aby kolor linku miał wystarczający kontrast zarówno wobec koloru tekstu głównego, jak i tła.

Projektowanie z myślą o ślepocie barw

Stosuj kodowanie nadmiarowe

Dodaj drugi kanał wizualny obok koloru. Na wykresach: dodaj wzory, tekstury lub etykiety danych. We wskaźnikach stanu: dodaj ikony. W stanach formularza: dodaj tekst. Celem jest to, aby ktoś, kto całkowicie pozbawi projekt koloru, wciąż mógł zrozumieć wszystko.

Testuj z narzędziami symulacyjnymi

Chrome DevTools ma wbudowaną symulację ślepoty barw. Otwórz DevTools > panel Rendering > „Emulate vision deficiencies”. Możesz symulować protanopię, deuteranopię, tritanopię i achromatopsję.

Figma i inne narzędzia projektowe mają podobne wtyczki. Uruchomienie symulacji zajmuje sekundy i często ujawnia problemy, które nie były widoczne w standardowym podglądzie.

Sprawdzaj całą paletę

Nie testuj tylko pojedynczych par elementów. Spójrz na pełną paletę razem: kolory podstawowe, drugorzędne, błędu, sukcesu, ostrzeżenia i informacyjne. Przy symulacji deuteranopii czy czerwień błędu i zieleń sukcesu wyglądają podobnie? Jeśli tak, masz problem niezależnie od tego, czy Twoje współczynniki kontrastu formalnie się mieszczą.

Unikaj problematycznych zestawień

Szczególnie zawodne przy zaburzeniu widzenia barw:

• Czerwień i zieleń
• Zieleń i brąz
• Niebieski i fioletowy
• Zieleń i szarość
• Zieleń i czerń

Gdy te pary muszą pojawić się w tym samym kontekście, różnicuj je poprzez jasność lub wzór, a nie barwę.

Co WCAG obejmuje, a czego nie

WCAG obejmuje kontrast kolorów (1.4.3, 1.4.11) oraz zakaz używania koloru jako jedynego środka przekazywania informacji (1.4.1). Nie określa, których kolorów można lub nie można używać, ani nie wymaga, by cała paleta była postrzegalna przy każdym typie zaburzenia widzenia barw.

Wymaga natomiast, aby żadne znaczenie nie było utracone, gdy kolor zostanie usunięty. To praktyczny test. Usuń kolor ze swojego projektu. Czy każda informacja pozostaje dostępna innymi środkami?

Jeśli odpowiedź brzmi tak, spełniłeś wymóg. Jeśli stany błędu znikają, jeśli dane wykresu stają się niejednoznaczne, jeśli linki stają się niewidoczne — masz coś do zrobienia.

Nasze audyty dostępności obejmują dostępność kolorów jako standardowy element przeglądu. Jeśli chcesz wiedzieć, jak wygląda Twój obecny projekt, uruchom darmowe automatyczne skanowanie, aby na początek wychwycić problemy, które da się wykryć automatycznie.