Jak tworzyć wykresy czytelne dla daltonistów

Wykres może być technicznie poprawny i mimo to pozostawić czytelnika bez zrozumienia. Typowym winowajcą jest kolor, na który zrzucono całą pracę: czerwona linia znaczy jedno, zielona drugie, a legenda jest jedynym kluczem. Dla osób z zaburzeniem widzenia barw — oraz dla wielu osób oglądających wykres w odblasku, na słabym ekranie albo w odcieniach szarości — tworzy to zbędną barierę.

Rozwiązaniem nie jest rezygnacja z koloru. Kolor ma być jedną z kilku wskazówek. Ten przewodnik zamienia tę zasadę w praktyczne decyzje dotyczące wykresów, pulpitów, map i infografik.

Zasada podstawowa: kolor nie może być jedyną wskazówką

Kryterium sukcesu WCAG 1.4.1 wymaga, aby kolor nie był jedynym środkiem wizualnym służącym przekazaniu informacji, wskazaniu działania, wywołaniu reakcji lub odróżnieniu elementu wizualnego. W grafice danych oznacza to, że czytelnik powinien rozróżniać kategorie, serie, stany lub znaczenie bez rozpoznawania odcienia.

Dobre alternatywy to:

Bezpośrednie etykiety tekstowe i wartości
Różne kształty znaczników na liniach lub punktach
Style linii: ciągła, przerywana i kropkowana
Desenie, tekstury lub obrysy w słupkach i obszarach
Czytelne ikony i opisowy tekst legendy
Tabela danych lub podsumowanie tekstowe zawierające te same kluczowe informacje

Najlepsze połączenie zależy od typu wykresu i od tego, czy czytelnik potrzebuje szybkiego przeglądu, czy dokładnych wartości.

Buduj wykres wokół pytania

Zanim wybierzesz kolory, zapisz jednym zdaniem główny przekaz wykresu. Na przykład: „Sprzedaż wzrosła we wszystkich regionach, najsilniej na zachodzie”. Następnie sprawdź, czy czytelnik odpowiedziałby na to pytanie, oglądając wykres w odcieniach szarości.

Jeśli nie, dodaj wskazówkę niezwiązaną z kolorem. Ten prosty test wyłapuje najczęstszy błąd dostępności: paletę, która wygląda atrakcyjnie, ale koduje informacje wyłącznie odcieniem.

Bezpośrednie etykiety zamiast odległej legendy

Legenda zmusza czytelnika do dopasowywania małej próbki koloru do elementu wykresu, czasem wielokrotnie. Trudność rośnie, gdy barwy są podobne albo linie się przecinają. Jeśli pozwala na to miejsce, opisz serię przy końcu linii, umieść wartości obok słupków albo oznacz bezpośrednio ważny punkt.

Na przykład zamiast niebieskiej, pomarańczowej i zielonej linii z legendą na dole, dodaj nazwę kategorii obok ostatniego punktu każdej linii. Trzymaj etykietę na tyle blisko, by nie została pomylona z inną serią. Kolor nadal pomaga, ale to tekst identyfikuje.

Dopasuj wskazówki nadmiarowe do typu wykresu

Wykresy liniowe

Łącz styl linii, kształt znacznika i etykiety końcowe. Linia ciągła z kółkami, przerywana z kwadratami i kropkowana z trójkątami pozostają rozróżnialne nawet przy podobnych barwach.

Unikaj zbyt wielu serii na jednym wykresie. Gdy jest ich dużo, rozważ małe wielokrotności — osobne wykresy o spójnej skali — zamiast oczekiwać, że czytelnik rozplącze gęstą legendę.

Wykresy słupkowe

Używaj bezpośrednich etykiet kategorii i wartości. Jeśli słupki oznaczają kategorie wymagające rozróżnienia w tej samej grupie, dodaj obok koloru desenie lub wyraźny obrys. Technika G111 W3C opisuje właśnie łączenie koloru i deseniu w słupkach.

W słupkach skumulowanych opisuj segmenty bezpośrednio, gdy to możliwe, i dołącz tabelę wspierającą. Cienkie segmenty są trudne do odczytania dla każdego, nawet przy dobrej palecie.

Wykresy punktowe i bąbelkowe

Łącz kształty znaczników z kolorem oraz stosuj wielkość i kontrast wystarczające, by znaczniki nie znikały. Dodaj obramowanie punktów, gdy wypełnienie jest jasne albo tło zatłoczone. Gdy punkty się nakładają, zaproponuj filtrowanie, tabelę danych albo drugi widok rozdzielający grupy.

Mapy i mapy ciepła

Obok koloru wypełnienia używaj etykiet, granic, symboli lub deseni. Mapa komunikacji może na przykład łączyć kolor każdej linii z charakterystycznym oznaczeniem przystanku. Na kartogramie nie uzależniaj głównego przekazu wyłącznie od subtelnego gradientu od jasnego do ciemnego; dodaj widoczną skalę, wartości oraz tabelę lub wniosek w tekście.

Projektuj pod kontrast, nie tylko pod różne odcienie

Kolory mogą różnić się odcieniem, a być zbliżone jasnością — wtedy zlewają się w odcieniach szarości lub przy różnicy widzenia barw. Kontrast jest szczególnie istotny dla cienkich linii, małych znaczników, granic wykresu i tekstu.

Dla nietekstowych obiektów graficznych niezbędnych do zrozumienia wykresu wytyczne WCAG dotyczące kontrastu nietekstowego zwykle stosują próg 3:1 wobec sąsiadujących barw. Kontekst ma znaczenie, a etykieta lub równoważna tabela potrafi czasem przekazać informację bez wymogu rozróżniania samej grafiki. Traktuj sprawdzanie kontrastu jako element przeglądu projektu, a nie zamiennik etykiet i wskazówek nadmiarowych.

Skorzystaj z kontrolera kontrastu, by zbadać kontrast pierwszego planu i tła dla tekstu interfejsu i prostych elementów wizualnych. Następnie obejrzyj cały wykres: rzeczywiste układy wprowadzają sąsiedztwa, cienkie kreski, stany po najechaniu i nakładki, których pojedyncze sprawdzenie pary barw nie uchwyci.

Daj czytelnikom dane stojące za obrazem

Wykresy są podsumowaniem, a nie zamiennikiem dostępu do danych. Gdy wykres niesie ważną decyzję lub twierdzenie, dołącz jedno lub kilka z poniższych:

Tabelę obok, z kategoriami i wartościami
Zwięzłe podsumowanie głównego wniosku
Dostępny plik do pobrania, na przykład CSV
Dłuższy opis dla złożonych zależności wizualnych
Dymki dostępne z klawiatury albo widok danych możliwy do sfokusowania w wykresach interaktywnych

Poprawia to użyteczność zarówno dla osób korzystających z czytników ekranu, jak i dla tych, które nie rozróżniają każdego kodowania wizualnego. Pozwala też zweryfikować przekaz bez szacowania wysokości słupków czy wycinków koła.

Praktyczna lista kontrolna przeglądu wykresu

Skorzystaj z niej przed publikacją raportu, prezentacji, pulpitu produktowego lub artykułu:

Czy tytuł mówi, czego dotyczy wykres i jakiego okresu?
Czy każdą serię lub kategorię da się rozpoznać bez polegania wyłącznie na kolorze?
Czy kluczowe wartości są opisane, dostępne w tabeli albo omówione w pobliskim tekście?
Czy linie, znaczniki, słupki i elementy legendy mają wystarczający kontrast tam, gdzie się stykają lub nakładają?
Czy etykiety są czytelne przy zwykłym powiększeniu i na małym ekranie?
Czy wykres unika niejednoznacznych czerwono-zielonych oznaczeń stanu, takich jak „dobrze” i „źle”, bez tekstu lub ikony?
Czy osoba korzystająca z klawiatury dotrze do informacji na wykresie interaktywnym?
Czy przegląd w odcieniach szarości lub w symulacji widzenia barw ujawnia elementy niejednoznaczne?

Testuj na prawdziwej treści i z prawdziwymi ludźmi

Automatyczne kontrole i symulacje są przydatnym wczesnym ostrzeżeniem, ale nie dowodzą, że wykres działa dla każdego. Sprawdź gotowy wykres w prawdziwym rozmiarze, w produkcie lub dokumencie, w którym się pojawi. Poproś uczestnika, by bez podpowiedzi wskazał najważniejszą serię, najwyższą wartość i główny wniosek.

Nasz symulator widzenia barw może pomóc projektantom sprawdzić, jak obraz może wyglądać przy kilku typowych różnicach widzenia barw. Traktuj go jako dodatkowy krok przeglądu, a nie zamiennik badań z użytkownikami czy oceny WCAG.

Szersze wskazówki dotyczące interfejsu znajdziesz w tekście projektowanie dla daltonistów.

Przykład: ulepszanie wykresu statusu

Wyobraź sobie pulpit z pięcioma działami: zielone słupki oznaczają realizację celu, czerwone opóźnienie, a żółte ryzyko. Bardziej dostępna wersja mogłaby:

Dodać do każdego słupka słowo opisujące status: „Zgodnie z celem”, „Ryzyko” lub „Opóźnienie”.
Użyć ikony w etykiecie, np. znacznika wyboru, trójkąta ostrzegawczego lub strzałki, wraz z tekstem wyjaśniającym.
Zastosować desenie lub obrysy jako drugą wskazówkę wizualną.
Pokazać rzeczywisty procent i wartość docelową.
Umieścić pod wykresem tabelę z działem, wartością bieżącą, celem i statusem.

Dla wielu użytkowników kolor nadal przyspiesza odczytanie wzorca. Przestaje być jedynie jedyną drogą do zrozumienia.

Podsumowanie

Dostępne wykresy czynią przekaz odpornym. Bezpośrednie etykiety, desenie, style linii, kontrast i równoważne dane pomagają osobom z zaburzeniem widzenia barw zrozumieć tę samą informację co wszyscy — i sprawiają, że Twoja praca jest czytelniejsza dla całej publiczności.

Krótka odpowiedź