Symulator ślepoty barw: zobacz swoje kolory oczami osób ze ślepotą barw
Dzięki bezpłatnemu symulatorowi ślepoty barw zobaczysz swoją paletę kolorów i własne obrazy tak, jak postrzegają je osoby z protanopią (ślepotą na czerwień), deuteranopią (ślepotą na zieleń), deuteranomalią (osłabionym widzeniem zieleni), tritanopią (ślepotą na niebieski) lub achromatopsją — wszystkie pięć wariantów obok siebie. Bez logowania: kolory i obrazy są przetwarzane tylko w twojej przeglądarce i nigdy nie są przesyłane na serwer.
Autor: Justin Schuessler
Projekt sprawdzony pod kątem dostępności? Możesz uruchomić stronę dzięki szybkiemu i niezawodnemu hostingowi WWW.
Edytuj kolor
Wynik jest natychmiast obliczany dla wszystkich symulowanych wariantów poniżej. Wybierz poniżej kolor ze swojej palety, aby go tutaj edytować.
Twoja paleta kolorów
Kliknij kolor, aby edytować go u góry w selektorze. Przyciskiem plusa możesz dodać kolejne kolory i zobaczyć całą paletę jednocześnie w każdym symulowanym wariancie.
Podgląd symulacji
Chcesz również sprawdzić, czy paleta ma wystarczający kontrast? Sprawdź również kontrast właśnie zasymulowanej palety
Kontynuuj z wybranym kolorem: Otwórz w selektorze kolorów · Utwórz schemat kolorów
Działa wyłącznie w twojej przeglądarce — nic nie jest wysyłane na serwer, zapisywane ani rejestrowane w logach.
Funkcje
Symuluj ślepotę barw online: sprawdź kolory i obrazy
Oprócz własnych obrazów możesz tu sprawdzić całą paletę kolorów za pomocą wartości Hex lub RGB — przydatne przy projektowaniu stron, doborze kolorów marki i tworzeniu wykresów.
Pięć rodzajów ślepoty barw obok siebie
Obok oryginału symulator pokazuje jednocześnie każdy kolor przy protanopii, deuteranopii, tritanopii, achromatopsji i deuteranomalii. Dzięki temu od razu zobaczysz, gdzie dwa kolory zlewają się ze sobą.
Sprawdź całą paletę kolorów naraz
Przyciskiem plus dodasz dowolną liczbę kolorów, na przykład całą paletę swojej marki. Pod każdym kolorem znajduje się jego wartość Hex, a każdy symulowany wariant pokazuje całą paletę.
Próbnik kolorów, Hex lub RGB
Wybierz kolor z próbnika za pomocą suwaka odcienia, wpisz wartość Hex lub RGB albo wygeneruj nowy kolor przyciskiem „Losowy kolor”.
Symuluj własne obrazy
Opcjonalnie wczytaj plik PNG lub JPG do 15 MB, na przykład zrzut ekranu, logo lub wykres. Duże obrazy są zmniejszane na potrzeby podglądu do 1.600 px na dłuższym boku. Każdy podgląd możesz powiększyć kliknięciem.
Naukowy model symulacji
Symulacja opiera się na modelu Machado, Oliveira & Fernandes (2009) i wykonuje obliczenia w liniowej przestrzeni barw RGB. Próbki kolorów i piksele obrazu są przetwarzane w ten sam sposób.
Wszystko pozostaje w twojej przeglądarce
Kolory i obrazy są przetwarzane bezpośrednio w twojej przeglądarce. Nic nie jest wysyłane na serwer, zapisywane ani rejestrowane i nie potrzebujesz konta.
Rodzaje ślepoty barw
Jak osoby ze ślepotą barw widzą kolory? Pięć symulowanych rodzajów
Większość osób ze ślepotą barw widzi kolory, ale myli niektóre odcienie. To, które odcienie są mylone, zależy od rodzaju zaburzenia widzenia barw.
| Forma | Jak wyglądają kolory | Symulacja w narzędziu |
|---|---|---|
| Protanopia (ślepota na czerwień) | Czerwień i zieleń są trudne do odróżnienia, a odcienie czerwieni wydają się ciemniejsze i przesuwają się w stronę oliwki, brązu i żółci. | Pełne nasilenie (poziom 1,0) |
| Deuteranopia (ślepota na zieleń) | Czerwień i zieleń są mylone i wyglądają jak podobne odcienie żółci, brązu i oliwki. | Pełne nasilenie (poziom 1,0) |
| Tritanopia (ślepota na niebieski) | Trudno odróżnić niebieski od zielonego oraz żółty od fioletowego, a żółty wydaje się bladoróżowy lub jasnoszary. Czerwony i zielony pozostają natomiast łatwe do rozpoznania. | Pełne nasilenie (poziom 1,0) |
| Achromatopsja (całkowita ślepota barw) | Kolory są praktycznie niewidoczne — dostrzegalne są jedynie różnice jasności, podobnie jak na obrazie w skali szarości. | Względna luminancja (skala szarości) |
| Deuteranomalia (osłabione widzenie zieleni) | Łagodniejsza postać deuteranopii i najczęstsza wada widzenia barw: odcienie czerwieni i zieleni stają się do siebie bardziej podobne. | Łagodniejsza postać (stopień nasilenia 0,6) |
Wypróbuj samodzielnie: wpisz w symulatorze #FF0000, dodaj drugi kolor przyciskiem plus i ustaw go na #00FF00. Na kartach protanopii i deuteranopii od razu zobaczysz, że oba kolory zmieniają się w odcienie żółci i oliwki, różniące się niemal wyłącznie jasnością.
Jak to działa
Symuluj ślepotę barw w 6 krokach
Od wyboru pierwszego koloru po porównanie wszystkich pięciu wariantów — z twoją paletą i opcjonalnie własnym obrazem.
Krok 1
Wybierz kolor
W sekcji „Edytuj kolor” wybierz kolor z próbnika za pomocą suwaka odcienia, wpisz wartość Hex lub RGB albo kliknij „Losowy kolor”.
Krok 2
Utwórz paletę kolorów
Dodaj kolejne kolory przyciskiem plus pod sekcją „Twoja paleta kolorów”. Kliknij kolor, aby otworzyć go do edycji w próbniku, lub usuń go ikoną kosza.
Krok 3
Opcjonalnie wczytaj obraz
Przeciągnij plik PNG lub JPG o rozmiarze do 15 MB do pola „Prześlij własny obraz” albo kliknij je, aby wybrać plik. Obraz pozostanie w Twojej przeglądarce.
Krok 4
Porównaj warianty
W sekcji „Symulowany podgląd” porównaj oryginał z protanopią, deuteranopią, tritanopią, achromatopsją i deuteranomalią. Zwróć uwagę, które kolory stają się zbyt podobne.
Krok 5
Powiększ obraz
Kliknij podgląd obrazu, aby go powiększyć i przyjrzeć się szczegółom.
Krok 6
Pracuj dalej z kolorem
Otwórz wybrany kolor za pomocą linków pod podglądem w Color Picker lub generatorze schematów kolorów albo sprawdź jego kontrast w Contrast Checker.
Kolory dostępne dla osób z zaburzeniami widzenia barw
Dlaczego w projektowaniu warto uwzględniać zaburzenia widzenia barw?
Zaburzenia widzenia czerwieni i zieleni dotyczą około 8 % mężczyzn i 0,5 % kobiet (zwłaszcza pochodzenia europejskiego), co w skali świata daje szacunkowo około 300 milionów osób. Jeśli ważną informację przekazujesz wyłącznie kolorem, na przykład czerwienią oznaczasz „błąd”, a zielenią „sukces” bez dodatkowego symbolu lub tekstu, nieświadomie wykluczasz znaczną część swoich użytkowników.
Dlatego wytyczne WCAG wymagają, by kolor nigdy nie był jedynym sposobem rozróżniania informacji (kryterium sukcesu 1.4.1). Łącz kolory z ikonami, wzorami lub etykietami i sprawdź w symulatorze, które kolory z twojej palety stają się zbyt podobne przy zaburzeniach widzenia barw. Następnie sprawdź w Contrast Checker, czy tekst i tło mają wystarczający kontrast. Przejdź do Contrast Checker
Odkryj więcej
Więcej narzędzi do kolorów
Sprawdź kontrast, dostosuj kolory, wygeneruj schemat kolorów lub odczytaj kolory z obrazu — również bezpłatnie w przeglądarce.
Kontrola kontrastu
Obliczaj na bieżąco współczynnik kontrastu WCAG między dwoma kolorami i sprawdzaj zgodność z AA/AAA oraz wymaganiami dla komponentów UI — bezpośrednio w przeglądarce.
Autor: Justin Schuessler
Wybór koloru
Przeliczaj kolory na bieżąco między HEX, RGB, HSL, HSV i CMYK, znajdź najbliższy nazwany kolor CSS i sprawdź kontrast WCAG względem czerni i bieli — wszystko w przeglądarce.
Autor: Justin Schuessler
Generator schematów kolorów
Twórz na żywo dopełniające, analogiczne, triadyczne i inne schematy kolorów na podstawie koloru bazowego — nic nie jest zapisywane ani przesyłane.
Autor: Justin Schuessler
Próbnik kolorów z obrazu
Odczytaj kod koloru z obrazu: próbnik z lupą, HEX, RGB i HSL, paleta kolorów obrazu oraz wskazówka dotycząca kontrastu. Obraz pozostaje w przeglądarce.
Autor: Dimitri Heissler
FAQ
Częste pytania o symulator ślepoty barw
Krótkie odpowiedzi na pytania o zaburzenia widzenia barw, dostępne kolory i to narzędzie.
Większość osób ze ślepotą barw widzi kolory, ale myli niektóre odcienie. Przy protanopii i deuteranopii czerwień i zieleń przybierają podobne odcienie żółci, brązu i oliwki, a przy tritanopii trudno odróżnić niebieski od zielonego oraz żółty od fioletowego. Tylko przy achromatopsji kolory nie są widoczne wcale — pozostają różnice jasności, jak na obrazie w skali szarości. W symulatorze zobaczysz to bezpośrednio na własnych kolorach.
Pięć rodzajów obok oryginału: protanopia (ślepota na czerwień), deuteranopia (ślepota na zieleń), deuteranomalia (osłabione widzenie zieleni), tritanopia (ślepota na niebieski) i achromatopsja (całkowita ślepota barw). Wszystkie pięć jest wyświetlanych jednocześnie obok siebie — dla każdego koloru z twojej palety i dla wczytanego obrazu.
Najczęstsze są zaburzenia widzenia czerwieni i zieleni, przede wszystkim deuteranomalia, czyli osłabione widzenie zieleni. Dotyczą one około 8 % mężczyzn i 0,5 % kobiet (dane dla osób pochodzenia europejskiego), a na całym świecie szacunkowo około 300 milionów osób. Kobiety również mogą mieć ślepotę barw, choć zdarza się to znacznie rzadziej.
Nie. Symulator pokazuje, jak osoby z zaburzeniami widzenia barw postrzegają kolory, ale nie jest testem wzroku ani narzędziem diagnostycznym. Jeśli chcesz sprawdzić własne widzenie barw, skontaktuj się z okulistą lub optometrystą, który może użyć na przykład tablic Ishihary.
Symulator ślepoty barw jest bezpłatny i nie wymaga logowania. Obrazy nie są przesyłane: narzędzie odczytuje plik bezpośrednio w twojej przeglądarce i oblicza warianty za pomocą Canvas, bez przesyłania na serwer, zapisywania ani rejestrowania danych. Obsługiwane są pliki PNG i JPG do 15 MB. Na potrzeby podglądu obraz jest zmniejszany do maksymalnie 1.600 px na dłuższym boku. Gdy zamkniesz kartę, obraz zniknie.
Tak. Przyciskiem plus dodasz dowolną liczbę kolorów i zobaczysz je jednocześnie w każdym z pięciu symulowanych wariantów. Kliknij kolor, aby otworzyć go do edycji w próbniku, lub usuń go ikoną kosza. Dzięki temu zobaczysz, czy dwa kolory z twojej palety, na przykład kolory marki, stają się zbyt podobne przy zaburzeniach widzenia barw.
Podstawą jest model Machado, Oliveira & Fernandes (2009), oparty na fizjologii widzenia i wykorzystujący opublikowane w nim macierze. Obliczenia odbywają się w liniowej przestrzeni barw RGB po konwersji z sRGB. Protanopia, deuteranopia i tritanopia są symulowane w pełnym nasileniu (poziom 1,0), deuteranomalia na poziomie 0,6, a achromatopsja jako względna luminancja. Nasilenie zaburzenia widzenia barw różni się u poszczególnych osób, dlatego symulacja przedstawia typowy sposób postrzegania.
Szczególną uwagę zwróć na czerwień i zieleń, ale też zieleń i brąz oraz niebieski i fioletowy, jeśli kolor jest jedynym sposobem ich rozróżnienia. Zamiast całkowicie rezygnować z kolorów, dodaj tekst, ikony lub wzory i sprawdź swoją paletę w symulatorze. Jeśli dwa kolory w którymś wariancie wyglądają niemal identycznie, dostosuj ich jasność lub odcień. Następnie sprawdź kontrast tekstu i tła w Contrast Checker.
Masz dodatkowe pytania?
Kontakt z pomocą technicznąTwój projekt frontendowy potrzebuje niezawodnego serwera
VPS na ZAP-Hosting zapewnia niezawodne działanie twojej aplikacji lub twojego projektu online.
Bez konfiguracji. Bez ryzyka. Online w kilka sekund.
Szukasz więcej narzędzi? Zobacz wszystkie narzędzia do grafiki i projektowania
