Daltonizm w sieci: co to oznacza i jak projektować z myślą o nim

Czym jest daltonizm?

Widzimy kolory dzięki trzem rodzajom czopków w siatkówce. Każdy rodzaj reaguje na inny zakres światła: czerwony, zielony lub niebieski. Jeśli jeden rodzaj czopków działa słabiej lub wcale, ludzie postrzegają niektóre kolory inaczej.

Ściśle rzecz biorąc, istnieją dwie formy:

• Niedobór widzenia barwnego: Ludzie widzą wszystkie kolory, ale niektóre postrzegają słabiej. Na przykład czerwony i zielony wyglądają bardzo podobnie.

• Daltonizm: Ludzie nie są w stanie postrzegać jednego ani więcej kolorów. W przypadku całkowitej ślepoty barw, zwanej achromatopsją, ludzie widzą tylko odcienie szarości.

W języku potocznym termin „ślepota barw” często oznacza oba te zjawiska. Większość osób dotkniętych tą przypadłością ma zaburzenia widzenia barw, a nie całkowitą ślepotę barw.

Najczęstsze typy

• Niedobór czerwieni i zieleni: Zdecydowanie najczęstsza forma. Czerwone i zielone są trudne do odróżnienia. W zależności od tego, który czopek jest dotknięty chorobą, nazywa się to protanomalią lub protanopią (czerwone) i deuteranomią lub deuteranopią (zielone).

• Niedobór niebiesko-żółty (tritanomalia lub tritanopia): rzadkie. Niebieski i zielony, a także żółty i różowy – trudno je od siebie odróżnić.

• Całkowita ślepota barw (achromatopsja): Bardzo rzadko. Osoby dotknięte tą chorobą widzą tylko światło i ciemność, a często są bardzo wrażliwe na oślepiające światło.

_{Rysunek 1: Symulacja różnych rodzajów ślepoty barw. Oryginalna (lewy górny róg), ślepota na kolor czerwony (prawy górny róg), ślepota na kolor zielony (lewy dolny róg) i ślepota na kolor niebieski (prawy dolny róg).}

Ile osób jest dotkniętych?

Według portalu Federalnego Ministerstwa Zdrowia Niemiec gesund.bund.de Około 8% mężczyzn i 0,4% kobiet cierpi na niedobór widzenia barw. W zespole 25 mężczyzn statystycznie dwóch jest dotkniętych tą przypadłością. Całkowita daltonizm jest natomiast bardzo rzadki: w Niemczech żyje z nim zaledwie około 2700 osób.

Mężczyźni chorują znacznie częściej, ponieważ geny czerwonych i zielonych czopków znajdują się na chromosomie X. Mężczyźni mają tylko jeden chromosom X, więc zmiana w tym genie ma bezpośredni wpływ. Kobiety mają dwa chromosomy i zazwyczaj są nosicielkami bezobjawowo.

Widzenie kolorów może również zmieniać się w ciągu życia, na przykład z powodu chorób oczu. Ponadto wiele osób widzi kolory mniej wyraźnie w pewnych sytuacjach, na przykład podczas korzystania z telefonu w jasnym świetle słonecznym.

Które elementy stron internetowych powodują problemy?

Daltonizm staje się barierą, gdy kolor jest jedynym sposobem przekazywania informacji. Typowe przykłady:

• Linki w tekście bieżącym: Jeśli linki będą oznaczone tylko kolorem, bez podkreślenia, wiele osób ich nie zauważy.

• Komunikaty o błędach i sukcesach: Sama czerwona ramka wokół pola formularza lub zielony znacznik wyboru nie wystarczą.

• Wykresy i mapy: Linie, paski i obszary różniące się jedynie kolorem nie mogą zostać od siebie odróżnione.

• Wyświetlanie statusu: Czerwone, pomarańczowe i zielone wskaźniki, na przykład dotyczące dostępności lub statusu dostawy, stają się niejasne.

• Przyciski i opcje: Jeśli stan aktywny jest pokazywany tylko poprzez zmianę koloru, użytkownicy nie wiedzą, co zostało wybrane.

• Niski kontrast: Jasnoszary tekst na białym tle lub tekst na obrazkach jest trudny do odczytania – nie tylko dla osób z zaburzeniami widzenia kolorów.

• Symbole zastępcze w formularzach: Jasnoszary tekst zastępczy często trudno odróżnić od tekstu, który został już wprowadzony.

Problem jest powszechny. Według WebAIM Milion 2026 , 83,9% stron głównych miliona najpopularniejszych witryn internetowych zawierało tekst o zbyt małym kontraście.

Rysunek 2 pokazuje, jak wykres może wyglądać dla osoby ze ślepotą na zieleń:

^{Rysunek 2: Po lewej stronie niezmieniony diagram, po prawej symulowana ślepota na zieleń.}

Czego wymaga WCAG

Wytyczne dotyczące dostępności treści internetowych (WCAG) zawierają trzy kryteria sukcesu, które są szczególnie ważne w przypadku kolorów:

• 1.4.1 Użycie koloru (poziom A): Kolor nie powinien być jedynym środkiem wizualnym przekazywania informacji, wskazywania czynności lub wyróżniania elementu.

• 1.4.3 Kontrast (minimalny) (poziom AA): Tekst powinien mieć współczynnik kontrastu z tłem wynoszący co najmniej 4,5:1, a duży tekst co najmniej 3:1.

• 1.4.11 Kontrast poza tekstem (poziom AA): Przyciski, obramowania pól formularzy, wskaźniki ostrości i ważne elementy graficzne wymagają współczynnika kontrastu wynoszącego co najmniej 3:1.

Kryteria te stanowią część europejskiej normy EN 301 549, na której opiera się Europejski akt w sprawie dostępności jest oparta.

Wskazówki dotyczące projektowania stron internetowych z uwzględnieniem dostępności kolorów

1. Nigdy nie używaj samego koloru: Połącz kolor z tekstem, ikonami, wzorami lub podkreśleniem. Komunikat o błędzie powinien być czytelny, a nie tylko oznaczony czerwoną ramką.

2. Podkreśl linki: Linki w tekście powinny być podkreślone lub w inny sposób widocznie oznaczone.

3. Sprawdź kontrast: Użyj narzędzia do sprawdzania kontrastu, aby upewnić się, że tekst i ważne elementy spełniają wartości WCAG.

4. Etykietuj wykresy bezpośrednio: Zamiast ograniczać się do legendy kolorów, pisz etykiety obok linii i słupków. Wzory i różne style linii również mogą się przydać.

5. Unikaj krytycznych połączeń kolorów: Dla wielu osób rozróżnienie kolorów czerwonego i zielonego, zielonego i brązowego oraz niebieskiego i fioletowego jest trudne.

6. Test za pomocą symulacji: Wiele narzędzi projektowych i narzędzi dla programistów przeglądarek symuluje różne zaburzenia widzenia barw. Pozwala to szybko wykryć miejsca, w których informacje ulegają utracie.

7. Pomyśl o czymś więcej niż tylko o ślepocie barw: Dobry kontrast i wyraźny sygnał przydają się również osobom starszym, osobom słabowidzącym i wszystkim korzystającym z telefonu na zewnątrz.

Nasz przewodnik po dostępny projekt z WCAG i nasz artykuł na temat dostępne formularze online zawierają więcej praktycznych wskazówek.

Jak Eye-Able pomaga

Dostępny projekt to podstawa. Ponadto, Eye-Able Pomoc Umożliwia użytkownikom dostosowanie strony internetowej do własnych potrzeb. Specjalny tryb dostosowuje kolory do potrzeb osób z daltonizmem lub wadami widzenia barw, a tryb kontrastu ułatwia czytanie tekstu.

^{Rysunek 3: Ilustracja korekcji kolorów z wykorzystaniem obrazów testowych Ishihary (Źródło: kolekcja Wellcome CC BY 4.0)}

Rysunek 3 pokazuje, jak tryb kolorów może ponownie uwidocznić różnice w obrazach testowych Ishihary. Zwiększenie kontrastu lub nasycenia kolorów również może pomóc. Sygnalizacja świetlna na rysunku 4 to kolejny przykład:

^{Rysunek 4: Sygnalizacja świetlna w normalnych kolorach (po lewej), sygnalizacja świetlna dla osób z niedoborem czerwonego światła (w środku), sygnalizacja świetlna dla osób z niedoborem czerwonego światła po korekcie Eye-Able (po prawej)}

Assist nie zastępuje jednak dostępnego projektu. To, czy strona internetowa spełnia wymagania kontrastu WCAG, zależy od jej projektu i wdrożenia. Eye-Able Audyt i raport Możesz sprawdzić swoją witrynę pod kątem błędów kontrastu i innych przeszkód i naprawić je u źródła.

Wniosek

Około jeden na dwunastu mężczyzn ma zaburzenia widzenia barw. W ich przypadku informacje przekazywane wyłącznie za pomocą koloru są tracone. Rozwiązanie jest proste: nigdy nie używaj wyłącznie koloru, zadbaj o odpowiedni kontrast i przetestuj swój projekt za pomocą symulacji. Dzięki temu strony internetowe będą łatwiejsze w obsłudze dla wszystkich.

Ciekawi Cię, jak dostępna jest Twoja strona internetowa? Nasza bezpłatna kontrola dostępności daje Ci pierwszy przegląd w mniej niż 2 minuty.

FAQ: daltonizm w sieci

Jak powszechne jest zaburzenie rozróżniania barw?

Około 8% mężczyzn i 0,4% kobiet ma niedobór widzenia barw. Najczęstszą postacią jest niedobór czerwieni i zieleni. Całkowita daltonizm, czyli ślepota barw, w której ludzie widzą tylko odcienie szarości, jest bardzo rzadka.

Jaka jest różnica między daltonizmem a niedoborem widzenia barw?

Osoby z zaburzeniami widzenia barw widzą wszystkie kolory, ale niektóre z nich słabiej. Osoby z daltonizmem nie potrafią w ogóle rozróżniać jednego lub kilku kolorów. W języku potocznym termin „daltonizm” często oznacza oba.

Jakich kolorów powinnam unikać, jeśli jestem daltonistką?

Unikaj połączeń czerwieni z zielenią, zieleni z brązem oraz niebieskiego z fioletem, jeśli mają one wyrażać różnicę. Co najważniejsze, nigdy nie używaj koloru jako jedynego sygnału – zawsze dodawaj tekst, ikony lub wzory.

Co WCAG mówi o kolorze?

Kryterium sukcesu WCAG 1.4.1 stanowi, że kolor nie może być jedynym środkiem przekazu informacji. Ponadto tekst powinien mieć współczynnik kontrastu co najmniej 4,5:1 (1.4.3), a przyciski, pola formularzy i ważne elementy graficzne – co najmniej 3:1 (1.4.11).

Jak mogę sprawdzić, czy moja strona internetowa jest rozpoznawana przez osoby niewidome?

Użyj symulacji zaburzeń widzenia barw w swoim narzędziu do projektowania lub narzędziach programistycznych w przeglądarce, aby zobaczyć swoją stronę internetową oczami osób z różnymi typami daltonizmu. Narzędzie do sprawdzania kontrastu lub automatyczna kontrola dostępności wykryje błędy kontrastu.