Jak projektować palety przyjazne osobom z daltonizmem

Po raz pierwszy naprawdę zrozumiałem daltonizm nie z dokumentacji — lecz z przeglądu kodu. Zbudowałem dashboard statusów, gdzie zielone kropki oznaczały „sprawny”, a czerwone „niedostępny”, i pewien inżynier backendu z zespołu wspomniał, niemal przepraszająco, że nie potrafi rozpoznać, które serwery płoną. Należy do mniej więcej jednego na dwunastu mężczyzn z czerwono-zielonym zaburzeniem widzenia barw. Mój piękny system świateł drogowych był dla niego siatką identycznych brązowoszarych kółek. W kodzie nic nie było zepsute. W projekcie zepsute było wszystko.

Na tym właśnie polega projektowanie palety przyjaznej daltonistom: awarie są niewidoczne dla osoby, która je wypuściła. Nie poczujesz tego błędu. Trzeba więc wyrobić w sobie nawyk projektowania tak, jakby kolor był informacją, którą w każdej chwili możesz utracić — bo dla istotnej części twoich użytkowników już ją utraciłeś.

Jak częste to jest i co właściwie idzie nie tak

Zaburzenie widzenia barw (CVD) dotyka około 8% mężczyzn i 0,5% kobiet pochodzenia północnoeuropejskiego — mniej więcej 1 na 12 mężczyzn i 1 na 200 kobiet. W produkcie z jakąkolwiek realną publicznością to nie przypadek brzegowy. To kolumna w twojej analityce.

Zaburzenie to nie „widzenie w czerni i bieli” — prawdziwa monochromacja jest niezwykle rzadka. Dzieje się tak, że jeden typ czopka w oku jest przesunięty lub go brak, co zlewa pewne kolory ku sobie. Główne typy, według częstości występowania:

• Deuteranomalia i deuteranopia — osłabiona lub nieobecna reakcja czopka zielonego. To ten najważniejszy: sama deuteranomalia dotyka około 5% mężczyzn, co czyni ją najczęstszą formą. Czerwienie, zielenie, brązy i pomarańcze zlewają się razem.
• Protanomalia i protanopia — osłabiona lub nieobecna reakcja czopka czerwonego, około 1% mężczyzn dla pełnej formy. Podobne mylenie czerwono-zielone, ale czerwienie wyglądają też ciemniej i mogą zanikać na czarnym tle.
• Tritanopia i tritanomalia — zaburzenie niebiesko-żółte. Naprawdę rzadkie (rzędu 0,01% i niesprzężone z płcią, więc dotyka mężczyzn i kobiety mniej więcej tak samo), ale warte spojrzenia, bo łamie rozróżnienia niebiesko-zielone i żółto-różowe, których pozostałe typy nie naruszają.

Praktyczna konkluzja: około 99% CVD to przypadki czerwono-zielone. Jeśli twoja paleta przetrwa symulację czerwono-zieloną, masz pokrytą przytłaczającą większość dotkniętych użytkowników. To tam najpierw warto skupić uwagę.

To inny problem niż kontrast

Oto rozróżnienie, które myli nawet staranne zespoły. Kontrast luminancji (ten z WCAG) dotyczy jasnego kontra ciemnego — czy da się przeczytać tekst. Zaburzenie widzenia barw dotyczy mylenia odcieni — czy potrafisz odróżnić dwa kolory, gdy akurat mają podobną jasność. To problemy niezależne i możesz oblać jeden, celująco zdając drugi.

Klasyczny przykład: czysta czerwień #FF0000 na czystej zieleni #008000 ma kontrast luminancji rzędu 1.3:1, co poważnie oblewa WCAG — ale nawet gdybyś „naprawił” kontrast, deuteranop nadal miałby trudność, bo same te dwa odcienie zlewają się razem. I odwrotnie: dwa kolory mogą mieć cudowny kontrast i wciąż być pułapką dla CVD, jeśli ich odcieniem, i tylko odcieniem, niesiesz znaczenie.

Tak więc paleta przyjazna daltonistom i paleta zgodna z WCAG to nakładające się okręgi, a nie ten sam okrąg. Potrzebujesz obu. Jeśli jeszcze tego nie zrobiłeś, warto przy okazji przeczytać Współczynniki kontrastu WCAG wyjaśnione — kontrast luminancji jest fundamentem, a projektowanie bezpieczne dla CVD warstwą na wierzchu.

Jedna reguła, która naprawia większość: nigdy nie polegaj tylko na kolorze

Jeśli z tego artykułu masz wziąć jedną zasadę, weź tę: nie polegaj wyłącznie na kolorze, by przekazać informację. W3C czyni to wprost wymaganiem — Kryterium sukcesu WCAG 1.4.1, Użycie koloru — i to najwyżej dźwigniowy nawyk, jaki możesz zbudować.

Lekarstwem niemal zawsze jest redundancja. Ilekroć kolor niesie znaczenie, zestaw go z drugim, niekolorowym sygnałem:

• Tekst lub etykiety. Mój dashboard serwerów stał się lepszy w chwili, gdy każda kropka mówiła też „Up” lub „Down”. Nudne, niezawodne.
• Ikony i kształty. Ptaszek, X, trójkąt ostrzegawczy. Stany błędu dostają inną ikonę, nie tylko inny kolor. Dlatego dobry formularz pokazuje czerwoną ramkę i ikonę błędu i komunikat.
• Wzory i tekstury. Na wykresach wypełniaj słupki lub obszary kreskowaniem, kropkami lub przerywaniami, by kategorie różniły się nawet w skali szarości.
• Pozycja i kolejność. Legenda, która zachowuje tę samą kolejność od góry do dołu co opisywane przez nią obszary skumulowane, pozwala ludziom dopasowywać po pozycji, a nie po odcieniu.

Szybki test, który przeprowadzam na każdym ekranie: wyobraź sobie, że wydrukowano go na czarno-białej drukarce laserowej. Jeśli wciąż rozumiesz, co widzisz, nie polegasz wyłącznie na kolorze. Jeśli dwa stany stają się identyczne, znalazłeś swój błąd.

Dobór odcieni, które przetrwają CVD

Redundancja zajmuje się znaczeniem. Ale wciąż chcesz, by same kolory pozostały rozróżnialne wszędzie tam, gdzie to możliwe — zwłaszcza w wizualizacji danych, gdzie nie nałożysz etykiety tekstowej na każdy z 200 punktów.

Kilka praktycznych zasad z okopów:

• Unikaj czerwono-zielonego jako jedynego kontrastu. Para „dobre/złe”, „przed/po”, „drużyna A/drużyna B”, która domyślnie ląduje na czerwieni i zieleni, to najczęstsza awaria CVD. Jeśli potrzebujesz dwóch przeciwstawnych kolorów, niebieski i pomarańczowy to najbezpieczniejsza para na świecie — pozostaje wyraźna we wszystkich typach CVD. Niebieski i czerwony to solidny drugi wybór.
• Opieraj się na różnicach jasności, nie tylko odcienia. Jeśli dwie kategorie różnią się też luminancją, widzowie z CVD mogą je rozróżnić nawet wtedy, gdy odcienie się zlewają. Jasny błękit na ciemnym błękicie czyta się jako dwie rzeczy dla każdego.
• Uważaj na odcienie pośrednie. Turkus, oliwka, brąz i mętne pomarańcze leżą dokładnie w strefie zagrożenia dla zaburzeń czerwono-zielonych. Czyste, rozdzielone odcienie radzą sobie lepiej niż mętne.

Zamiast wymyślać to na nowo, stań na ramionach ludzi, którzy rozwiązali to rygorystycznie. Paleta Okabe-Ito (zwana też paletą Wonga, od artykułu Banga Wonga z 2011 roku w Nature Methods) to ośmiokolorowy zestaw zaprojektowany tak, by pozostawał rozróżnialny we wszystkich powszechnych typach CVD. Kody hex warto sobie zapisać: pomarańczowy #E69F00, błękitny #56B4E9, niebieskozielony #009E73, żółty #F0E442, niebieski #0072B2, cynobrowy #D55E00, czerwonofioletowy #CC79A7 i czarny #000000. Używałem jej jako palety kategorialnej w większej liczbie dashboardów, niż umiem zliczyć, i nigdy nie oblała symulacji.

Gdy budujesz paletę marki lub UI, a nie wykres, zwykle nie potrzebujesz ośmiu kolorów rozróżnialnych w CVD — potrzebujesz paru akcentów, które się nie zlewają. I tu generator palety kolorów zarabia na swoje miejsce: zbuduj swoją harmonię (schemat rozszczepiony dopełniający lub triadyczny), odczytaj wartości HSL, a następnie celowo rozsuń dwa najważniejsze znaczeniowo kolory także pod względem jasności, nie tylko odcienia. Odczyt HSL to ułatwia — obniż jasność jednego, podnieś drugiego, i kupiłeś sobie separację, która przetrwa CVD. Jeśli chcesz zrozumieć, dlaczego pewne relacje na kole gryzą się bardziej niż inne, Palety rozszczepione dopełniające vs triadyczne wchodzą w geometrię.

Testuj — nie ufaj własnym oczom

Nie zmierzysz tego na oko, bo (statystycznie) zapewne masz prawidłowe widzenie barw, a cała rzecz polega na tym, że awaria jest dla ciebie niewidoczna. Symulujesz.

• Coblis (Color Blindness Simulator na Colblindor) pozwala wgrać zrzut ekranu i obejrzeć go przez osiem różnych typów zaburzeń. Wszystko działa lokalnie w przeglądarce, więc możesz mu rzucać eksporty w pełnej rozdzielczości. To moje pierwsze narzędzie do sprawdzania gotowego ekranu.
• Narzędzia deweloperskie przeglądarki. Panel Rendering w Chrome ma rozwijaną listę „Emulate vision deficiencies” — protanopia, deuteranopia, tritanopia i rozmyte widzenie — nakładaną na żywo na prawdziwą stronę. Świetne do wyłapywania problemów, gdy jesteś jeszcze w kodzie.
• Wtyczki do Figmy i Sketcha, takie jak Stark, lub wbudowane symulatory widzenia pozwalają sprawdzić projekty, zanim w ogóle powstaną.

Mój faktyczny proces: projektuję normalnie, a potem przepuszczam kluczowe ekrany — dashboardy, wykresy, błędy formularzy, wszystko, gdzie kolor coś znaczy — najpierw przez deuteranopię (najczęstsza), potem protanopię, potem szybki przebieg tritanopii. Dziewięćdziesiąt procent problemów, które znajduję, jest w tym pierwszym widoku deuteranopii. Napraw je, a pomogłeś największej liczbie osób najmniejszym wysiłkiem.

Błędy, które wciąż widuję

• Stany walidacji czerwony/zielony bez ikony. Najczęstszy. Czerwona ramka i zielona ramka to ta sama ramka dla milionów użytkowników. Dodaj ikonę i komunikat, zawsze.
• Mapy ciepła i wykresy, które różnicują tylko odcień. Mapa ciepła od zieleni do czerwieni to pole minowe CVD. Użyj skali sekwencyjnej, która zmienia też jasność (powiedzmy od jasnożółtego do ciemnoniebieskiego), albo dodaj etykiety wartości.
• Legendy zakodowane kolorem, dopasowywane tylko po kolorze. Jeśli jedyny sposób, by przyporządkować linię jej etykiecie, to „znajdź tę zieloną”, użytkownicy z CVD utknęli. Uporządkuj legendę tak, by pasowała do danych, albo opisuj bezpośrednio na linii.
• Zakładanie, że „przeszło WCAG” znaczy „jest dostępne”. Kontrast i CVD to różne osie. Paleta może wszędzie spełniać 4.5:1 i wciąż zlewać się w papkę w deuteranopii. Testuj oba.
• Projektowanie wyłącznie na własnym idealnym monitorze. Ta sama martwa strefa, która ukrywa problemy z kontrastem, ukrywa problemy z CVD. Symuluj za każdym razem.

Nic z tego nie każe ci projektować brzydkich interfejsów ani rezygnować z koloru. Kolor jest wspaniały i powinieneś używać go swobodnie. Dyscyplina sprowadza się tylko do tego: niech kolor będzie warstwą zachwycającą, nigdy warstwą jedyną. Zestawiaj każdy znaczący odcień z etykietą, ikoną lub kształtem; dobieraj pary, które przetrwają zlanie czerwono-zielone; opieraj się na jasności tak samo jak na odcieniu; i uruchom symulator, zanim uznasz pracę za skończoną. Zrób tak, a następny inżynier, który nie widzi twoich zielonych kropek, wciąż dokładnie będzie wiedział, które serwery płoną.