Jak wyglądają moje kolory dla osób z daltonizmem?
Symulator daltonizmu - zobacz, jak Twoje kolory / projekty wyglądają dla osób z różnymi rodzajami ślepoty barw.
Cztery typy: protanopia (brak czerwonych receptorów, ~1% mężczyzn), deuteranopia (brak zielonych, ~1.2% mężczyzn), tritanopia (brak niebieskich, rzadka), achromatopsia (pełna ślepota barw, bardzo rzadka).
Sprawdź pojedynczy kolor lub całe zdjęcie/screenshot. Algorytm na bazie macierzy Brettel/Vienot/Mollon - tych samych, które używają Chrome DevTools.
Jak korzystać
- Wybierz tryb: "Kolor" (pojedynczy hex) lub "Obraz" (zdjęcie / screenshot strony).
- Tryb Kolor: wpisz hex / wybierz kolor / pipeta z ekranu / klik jeden z 8 sample-colors. Po prawej widzisz 5 wersji: oryginał + 4 typy daltonizmu z nazwą i procentem populacji.
- Tryb Obraz: wgraj plik (PNG, JPG, WebP, AVIF, HEIC), zobacz cztery symulacje obok oryginału.
- Uwaga: macierze symulują "severe" formy. Większość daltonistów ma anomalie ("protanomalia") - widzą część kolorów, ale słabiej. Symulator pokazuje "worst case".
- Designerzy: przed wysłaniem mockupu - zawsze sprawdź deuteranopia (najczęstsza) i protanopia. Jeśli accent-color jest niewidoczny dla deuteranopów, dodaj sekundarny indicator (ikona, kontrast).
Do czego się przydaje
Gdzie symulator daltonizmu się przydaje - typowe sytuacje:
- Web design / a11y - zanim wypuścisz design, sprawdź, czy red/green linki, error/success states, charts kolorystyczne są rozróżnialne dla deuteranopów (~1.2% userów, na męskiej populacji 8%).
- Charts - czerwony i zielony słupek wyglądają identycznie dla deuteranopa. Dodaj wzory (paski, kropki) lub etykiety.
- Game UI - red/green health/damage indicators - prawie nieczytelne dla 5% mężczyzn-graczy.
- Accessibility audyty - WCAG 1.4.1 wymaga: "color is not the only visual means of conveying information". Symulator pokazuje, czemu to ważne. Połącz to ze sprawdzaniem kontrastu, żeby przy okazji przejść też WCAG 1.4.3 (kontrast tekstu).
- Edukacja - zobacz, czemu zielone strzałki w GitHub-ie i czerwone błędy działają (różny shape), a poradnia "kliknij zielony przycisk" zawodzi (sam kolor). Bezpieczniejszy akcent znajdziesz, przerabiając paletę w konwerterze kolorów.
Pytania i odpowiedzi
W przybliżeniu - tak. Używamy macierzy Brettel et al. 1997 / Machado 2009 - tych samych co Chrome DevTools, Photoshop, Sim Daltonism (popular macOS app). "Severe form" symulacji. Daltoniści z anomalią (nie pełną ślepotą) widzą bardziej, niż pokazuje symulator. Dla "worst case design check" - to standardowy approach.