Projektowanie dla daltonistów: kompletny przewodnik

Około 300 milionów osób na świecie ma jakąś postać zaburzenia widzenia barw. Jeśli Twoja strona, aplikacja lub wizualizacja danych przekazuje informacje wyłącznie kolorem, znaczna część odbiorców będzie miała trudność z korzystaniem z niej.

Dobra wiadomość: projektowanie z myślą o daltonizmie służy wszystkim. Dostępne wybory barwne poprawiają czytelność, przejrzystość i użyteczność dla każdego użytkownika — niezależnie od tego, czy ma zaburzenie widzenia barw.

Dlaczego to ważne

Zaburzenie widzenia barw dotyczy około 8% mężczyzn i 0,5% kobiet. W praktyce oznacza to, że:

W zespole 20 mężczyzn około 1–2 osoby będą je miały
Wśród miliona odbiorców około 80 000 mężczyzn będzie miało jakąś postać zaburzenia czerwono-zielonego
Mylenie czerwieni i zieleni jest najczęstsze i odpowiada za ~98% przypadków

Projektowanie z myślą o daltonizmie coraz częściej jest też wymogiem prawnym. Wytyczne dotyczące dostępności treści internetowych (WCAG) 2.1 wprost wymagają, aby informacja przekazywana kolorem była dostępna również innymi środkami.

Złota zasada: nigdy nie polegaj wyłącznie na kolorze

Najważniejsza zasada projektowania przyjaznego daltonistom jest prosta:

Nigdy nie używaj koloru jako jedynego sposobu przekazywania informacji.

Zawsze łącz kolor z co najmniej jedną inną wskazówką wizualną:

Etykiety tekstowe — wprost nazywaj kategorię lub stan
Ikony lub symbole — używaj kształtów niezależnych od koloru
Desenie lub tekstury — szczególnie użyteczne na wykresach i mapach
Położenie — używaj układu przestrzennego do pokazania hierarchii
Kształt — używaj różnych kształtów dla różnych kategorii danych

Unikaj problematycznych zestawień barw

Niektóre pary kolorów są szczególnie trudne dla użytkowników z zaburzeniem czerwono-zielonym:

Zestawienia wysokiego ryzyka, których należy unikać

Unikaj	Dlaczego	Zamiast tego
Czerwony na zielonym	Całkowicie niewidoczny przy deuteranopii	Niebieski na pomarańczowym
Zielony na czerwonym	Ten sam problem	Żółty na niebieskim
Czerwone i zielone przyciski	Nie da się odróżnić powodzenia od błędu	Dodaj ikony (✓/✗) i tekst
Czerwony i czarny tekst	Czerwony może wyglądać jak ciemna szarość	Do wyróżnienia użyj pogrubienia lub podkreślenia
Róż i szarość	Identyczne przy protanopii	Użyj niebieskiego i szarego

Bezpieczniejsze zestawienia

Dla użytkowników z zaburzeniem czerwono-zielonym niebieski i pomarańczowy to najbardziej niezawodna dostępna para — te odcienie pozostają rozróżnialne w praktycznie wszystkich rodzajach zaburzeń.

Inne bezpieczne pary:

Niebieski + żółty (świetny zarówno dla zaburzeń czerwono-zielonych, jak i niebiesko-żółtych)
Niebieski + biały
Czarny + żółty (maksymalny kontrast)
Fioletowy + żółty

Wykresy przyjazne daltonistom

Wizualizacja danych to obszar, w którym daltonizm ma największe znaczenie. Częste błędy:

Używanie czerwieni i zieleni dla wartości dodatnich i ujemnych
Mapy ciepła z gradientem czerwony–żółty–zielony
Rozróżnianie wielu serii danych wyłącznie kolorem

Rozwiązania dla wykresów

1. Używaj wypełnień deseniem obok koloru Dodaj kreskowanie, kropki lub siatkę do obszarów wykresu, aby pozostały rozróżnialne nawet przy podobnych barwach.

2. Etykietuj dane bezpośrednio Zamiast polegać na legendzie barwnej, opisuj serie bezpośrednio na wykresie. Pomaga to wszystkim, nie tylko daltonistom.

3. Używaj palety przyjaznej zaburzeniom widzenia barw Zalecane dostępne palety:

Paleta Okabe-Ito: zaprojektowana specjalnie pod kątem dostępności rycin naukowych
Palety ColorBrewer: oparte na badaniach palety do map i wykresów
Skorzystaj z naszego symulatora daltonizmu, aby sprawdzić, czy wykresy pozostają czytelne w symulacji

4. Udostępnij alternatywne formaty danych Obok każdego wykresu udostępnij widok tabelaryczny lub pobranie danych, aby osoby mające trudność z reprezentacją wizualną dotarły do informacji źródłowej.

Formularze i stany interfejsu

Formularze to obszar wysokiego ryzyka, bo wskaźniki stanu zwykle opierają się na kolorze:

Częste problemy

Czerwona ramka przy polach błędnych, zielona przy poprawnych
„Status: aktywny” pokazany wyłącznie zielonym tekstem
Komunikaty o błędach wyświetlane wyłącznie na czerwono

Dostępne rozwiązania

Stany walidacji:

❌ Nie rób: czerwona ramka = błąd, zielona ramka = sukces
✅ Rób:     ikona błędu (⚠) + czerwona ramka + opisowy komunikat błędu
            ikona sukcesu (✓) + zielona ramka + tekst „Wygląda dobrze!”

Wskaźniki stanu:

❌ Nie rób: • (zielona kropka) = Online, • (czerwona kropka) = Offline
✅ Rób:     ✓ Online, ✗ Offline (albo różne kształty: ●/○)

Przyciski i wezwania do działania:

❌ Nie rób: zielony „Potwierdź” / czerwony „Anuluj” — przy protanopii wyglądają identycznie
✅ Rób:     wyraźnie opisz przyciski + zapewnij wystarczający kontrast + dodaj ikony

Wymagania dotyczące kontrastu (WCAG)

Poza doborem barw dla czytelności kluczowy jest wystarczający współczynnik kontrastu. Do sprawdzenia zestawień użyj naszego kontrolera kontrastu.

Wymóg	Minimalny współczynnik	Kontekst
WCAG AA	4,5:1	Tekst zwykły (poniżej 18pt)
WCAG AA	3,0:1	Tekst duży (18pt+ lub 14pt pogrubiony)
WCAG AAA	7,0:1	Poziom podwyższony — tekst zwykły
WCAG AAA	4,5:1	Poziom podwyższony — tekst duży

Ważne: współczynniki te mierzy się między luminancją tekstu a tłem i muszą być spełnione dla wszystkich grup użytkowników — również w symulacji zaburzenia widzenia barw.

Testowanie projektów

Zawsze sprawdzaj projekty kilkoma metodami:

1. Użyj symulatora

Wgraj zrzuty ekranu do symulatora ColorVision, aby zobaczyć, jak projekty wyglądają przy każdym rodzaju zaburzenia. Przetestuj wszystkie cztery: protanopię, deuteranopię, tritanopię i achromatopsję.

2. Użyj narzędzi deweloperskich przeglądarki

Chrome i Firefox mają wbudowaną symulację:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Sprawdź współczynniki kontrastu

Przepuść każde zestawienie tekst/tło przez kontroler kontrastu, który pokazuje też symulację.

4. Zbierz prawdziwe opinie

Jeśli to możliwe, testuj z realnymi użytkownikami z daltonizmem. Często znajdują problemy, których symulacje nie ujawniają.

Wskazówki dla poszczególnych platform

Projektowanie stron

Za pomocą CSS dodawaj atrybuty aria-label i title do elementów kodowanych kolorem
Nie stylizuj stanu :focus wyłącznie kolorem
Zadbaj, by stany błędów w formularzach zawierały ikonę i tekst, a nie tylko zmianę koloru

Nauka o danych i badania

Ustaw paletę Okabe-Ito jako domyślną w R, Pythonie (matplotlib) lub dowolnej bibliotece wykresów
Zawsze dołączaj legendę z etykietami tekstowymi, nawet jeśli barwy wydają się oczywiste

Aplikacje mobilne

iOS i Android obsługują symulację w ustawieniach dostępności
Testuj aplikację z włączonymi tymi ustawieniami przed każdym większym wydaniem

Projektowanie dla druku

Nie opieraj oznaczeń stanu na metaforze czerwono-zielonej sygnalizacji
Zadbaj, by infografiki pozostały zrozumiałe po skopiowaniu w czerni i bieli

Polecane narzędzia

Narzędzie	Zastosowanie
Symulator ColorVision	Symuluje wygląd dowolnego obrazu przy zaburzeniu widzenia barw
Kontroler kontrastu	Sprawdza zgodność z WCAG z podglądem symulacji
Colour Oracle (aplikacja desktopowa)	Warstwa symulacji dla całego systemu
Who Can Use	Symuluje współczynniki kontrastu dla różnych niepełnosprawności
Wtyczka dostępności do Figmy	Sprawdzanie w czasie rzeczywistym w Figmie

Najczęstsze pytania

Czy projektowanie przyjazne daltonistom wymaga usunięcia wszystkich kolorów? Nie. Kolor nadal może być używany szeroko — po prostu nie może być jedynym sposobem przekazywania informacji. Obok koloru dodaj wskazówki wtórne (tekst, ikony, desenie).

Czy muszę projektować tylko pod kątem zaburzeń czerwono-zielonych? Zaburzenia czerwono-zielone obejmują ~98% przypadków, ale projektowanie z myślą o nich zwykle pomaga też osobom z innymi rodzajami. Najbardziej włączające podejście to przetestowanie wszystkich rodzajów w symulatorze.

Czy osoby z daltonizmem korzystają z czytników ekranu? Niekoniecznie. Zaburzenie widzenia barw to nie to samo co ślepota. Takie osoby mają zwykle pełną ostrość wzroku i nie używają czytników ekranu; potrzebują wskazówek wizualnych niezależnych od koloru, a nie tekstu alternatywnego.

Jakie jest najlepsze bezpłatne narzędzie do sprawdzania dostępności barwnej? Symulator i kontroler kontrastu na tej stronie są całkowicie bezpłatne. Dla Figmy bezpłatna wtyczka „Able” zapewnia sprawdzanie kontrastu w czasie rzeczywistym.

Krótka odpowiedź