Dobra paleta kolorów, przydatna dla osób niewidomych.


13

W tej chwili projektuję wykres, w którym będzie powoli dodawanych więcej elementów. Chciałbym utworzyć listę / kolejność kolorów dla przedmiotów, które będą najbardziej użyteczne dla osób niewidomych, aby rozróżniały poszczególne elementy. Wszelkie pomysły, jak / od czego zacząć?

Odpowiedzi:


14

Jeśli chcesz zastosować podejście „prób i błędów”, zasugeruję narzędzie o nazwie Color Oracle (wieloplatformowe), które symuluje deuteranopię / deuteranomalię, protanopię / protanomalię i trytanopię - typy ślepoty barw na ekranie komputera.

(W programie Photoshop dostępne są również ustawienia odporne na ślepotę kolorów pod ViewProof Setup(przynajmniej CS5). Ale Photoshop może być nieco przesadny, jeśli masz zamiar zaprojektować wykres.)


1
+1 za dowód w Photoshopie Próbowałem tego innego dnia. To całkiem niesamowite
JamesHenare

Chodzi o to, że testowanie jest właściwym podejściem; wybór „bezpiecznej” palety będzie niepotrzebnie ograniczał.
Charles Stewart,

7

Jakiego rodzaju ślepotę kolorów próbujesz rozwiązać? Ten link

http://en.wikipedia.org/wiki/Color_blindness

powinien dać ci dobry obraz różnych kolorów, których należy unikać w zależności od rodzaju ślepoty barw.

Ogólnie rzecz biorąc, uzależnienie czegokolwiek od wyboru między błękitem a zielenią może stać się ryzykowne; możesz chcieć zobaczyć, jak twoje rzeczy wyglądają czysto monochromatycznie.

Ponieważ istnieje szereg „ślepoty kolorów”, prawdopodobnie również chcesz zawsze mieć pewność, że elementy sterujące itp. Mają nadmiarowość (np. Duży czerwony przycisk powinien być również oznaczony jako „przycisk samozniszczenia” w ładnym, kontrastowym kolorze (czarny na czerwonym) lub biały na czerwonym).


dobre wezwanie do zwolnienia
JamesHenare

1
@Lauren: Cóż, nie możesz być zbyt ostrożny, projektując interfejsy dla swojej złej kryjówki ...
lawndartcatcher

tak, i upewnij się, że zatrudniłeś pięciolatka, który przetestuje twoje wielkie plany. :)
Lauren-Clear-Monica-Ipsum

5

Istnieje wiele rodzajów ślepoty barw. Kluczem do sukcesu jest zapewnienie odpowiedniego kontrastu. Co więcej, nie polegaj wyłącznie na kolorze - zawsze miej te same informacje w kształcie, kontraście lub kolejności elementów. Jeśli twój obraz jest łatwy do zrozumienia w czerni i bieli, przechodzi.


Chociaż technicznie istnieje wiele rodzajów, znaczna większość ma deuteranopię lub łagodniejszą deuteranomalię. Prawie cała reszta ma protanopię lub protanomalię. Wszystkie powyższe są utratą czerwono-zielonej. Wszystkie pozostałe typy razem (niebiesko-żółty lub monochromatyczny) stanowią mniej niż 0,01% populacji, jak rozumiem. Więc skupiam się głównie na normalnym widzeniu i deuteranopii (za pomocą symulacji Adobe), a następnie trochę poprawiam za pomocą symulacji protanopii.
Jon Coombs

Pomoże to całkowicie zastąpić czerwony całkowicie innym, nieużywanym kolorem (zwykle karmazynowym lub pomarańczowym). Android wiele tego zrobił. (Lub możesz zastąpić zielony.) Zamiana kolorowych ikon nie jest jednak łatwa, jeśli używasz czerwonego (lub zielonego) tylko w niektórych swoich ikonach. (Dla nas nasze starsze ikony nie mogą być monochromatyczne.) Jeśli masz luksus wymienialnych palet, możesz osobno zoptymalizować dla deut. i prot., a nawet dodaj trzecią opcję dla trytanopii / tritanomalii. Jeśli masz możliwość zamiany, tryb wysokiego kontrastu (jasny tekst na ciemnym tle) jest dużo substytucji, ale jeszcze bardziej przydatny.
Jon Coombs

4

Jestem daltonistą. „Lubimy” grafikę dyskryminowaną za pomocą kolorów tak samo jak „ty” - po prostu w naszym świecie jest mniej kolorów niż w twoim. Oto pragmatyczna sugestia w duchu zasady 80/20.

Jeśli twój pierwszy typ czujników koloru (proto) nie działa, twoja wizja jest proto-anopiczna. Jeśli trochę źle zachowują się, jesteś proto-anomoliczny. Powtórz dla pozostałych dwóch rodzajów czujnika koloru i zamień „deuter” lub „trito” na „proto”. (Myślę, że są to greckie 1,2,3).

Pragmatyczna okazja wynika z faktu, że deuteranomalia jest znacznie bardziej rozpowszechniona niż inne typy; 5% wszystkich mężczyzn. Inni zdobywają mniej niż 1% u mężczyzn, a jeszcze mniej u kobiet. Dlatego dla nas, deuteranomalistów, jest to proste rozwiązanie - osobiście nie chcę sam konfigurować kolorów, aby zobaczyć różnicę w liniach na wykresie. (Co dzieje się cały czas).

Poniżej zamieściłem niewielki zestaw kolorów, w którym widzę różnicę między wysiłkiem. Próbowałem bezskutecznie wprowadzić więcej - dzięki temu masz pojęcie o tym, jak mała powinna być paleta.

Uwaga Nie zapominaj, że nie ma sensu odwoływać się do tych kolorów według nazwy w tworzonym doświadczeniu użytkownika. Dla nas Deutski - wygląda na to, że „wymyśliłeś” wiele niepotrzebnie powielonych nazw dla prawie tych samych kolorów :-)

rgb (255, 204, 153)

rgb (204, 204, 255)

rgb (255, 102, 102)

rgb (139, 230, 2)

czerwony

żółty

rgb (51, 51, 255)

rgb (153, 153, 153)

rgb (153, 0, 0)

rgb (51, 51, 51)

rgb (0, 0, 102)

rgb (120, 102, 75)


1
Fragment HTML, który skopiowałem, by pokazać kolory, nie pokazał się poprawnie - pozwólcie, że spróbuję jeszcze raz:
Peter Howard


2

Najczęstszym rodzajem ślepoty barw jest ślepota czerwono-zielona (która może być wadą w wykrywaniu czerwieni lub w wykrywaniu zieleni, ale rzadko jedno i drugie). Unikaj więc polegania na różnicach w czerwono-zielonej części widma. (Na przykład jasnozielone i jasnopomarańczowe wydają się takie same).

Jeśli chcesz zachować szczególną ostrożność, możesz umieścić kolory na niebiesko-żółtej osi (bardzo ciemnoniebieski; aqua; biały; chartreuse; brązowy); wszystkie problemy czerwono-zielone nadal sprawiają, że jednostka może stwierdzić, że niebieski jest inny; żółty ma tę zaletę, że aktywuje zarówno zielone, jak i czerwone szyszki, więc jeśli występuje problem z jednym z nich, nadal jest wystarczająco widoczny. Alternatywnie, każdy odcinek, w którym zwiększa się jasność (np. Czerwony-> żółty-> biały) jest widoczny dla większości ludzi. Nie zakładaj jednak, że czerwony różni się od czarnego.


2

Istnieje kilka narzędzi dla Firefoxa Przykład

Afaik, jest też certyfikat, który ma pewne wytyczne. Przejrzałem swoje dokumenty, ale jak dotąd ich nie znalazłem. Google z pewnością powie coś o różnych dostępnych certyfikatach dla twojego kraju.


2

Wskrzeszam to, ponieważ ciężko jest znaleźć konkretne przykłady lub instrukcje.

Możesz użyć symulatorów, aby osiągnąć ten cel, pamiętając, że celowanie w Deuteranopia obejmuje większość, a wspieranie Protanopia obejmuje również prawie wszystkich innych. (Uważam, że reszta to mniej niż 0,01% populacji).

Produkty Adobe, takie jak Illustrator, mają bardzo pomocne symulatory (otwórz nowe okno i wybierz Widok> Ustawienia dowodu> Ślepota kolorów ...), które mogą natychmiast wyświetlać rzeczywiste wyświetlanie obok siebie podczas dostosowywania kolorów. Dostępne są również niezależne narzędzia, takie jak Color Contrast Analyzer.

Poniżej znajduje się przykładowy zrzut ekranu z programu Illustrator pokazujący sześciokolorową paletę (gdzie szósty kolor to Czerwony lub Magenta, a nie oba) i obie symulacje. Statystycznie lewy dolny jest najbardziej krytyczny.

Zauważ, że w tym przypadku fioletowy stał się tylko nieznacznie użyteczny (dość wyblakły, a mimo to nadal ma niski kontrast z niebieskim i / lub purpurowym). Również opcja „najbezpieczniejsza” (w pełni Magenta zastępująca czerwony) może być dość głośna. W przypadku większości osób z CVD dostosowanie nasycenia / jasności czerwieni i zieleni może zapewnić rozpoznawalny kontrast.

mam nadzieję, że paleta jest bezpieczna dla kolorów

(Proszę sprawdzić ze mną przed ponownym użyciem tej palety / obrazu w całości.)

Zdecydowanie polecam użycie przestrzeni kolorów HSL. HSB (alias HSV) jest również dość przyjazny, szczególnie w porównaniu z RGB lub CMYK. (FYI, tylko wartości odcienia H będą identyczne w dwóch systemach.) Tutaj każda kolumna używa jednego numeru odcienia. Zawsze możesz później wyodrębnić kody RGB, albo z Adobe, albo przy użyciu doskonałych narzędzi na colorizer.org . Kody szesnastkowe RGB są, niestety, najbardziej zwięzłe i bezpośrednio użyteczne dla programistów itp., Chociaż jeśli pracujesz w CSS, obsługuje on bezpośrednio HSL (yay).

Nasycenie niebieskiego tutaj jest celowo niskie, aby (a) być delikatniejszym kolorem / przyciskiem i (b), aby bardziej kontrastować z tymi dobrze nasyconymi magentami i purpurami. Główną odmianą w kolumnie jest jasność, ale można uciec także odmiany nasycenia.


1

Jeśli nie jesteś w Photoshopie lub korzystasz z wcześniejszej wersji, która nie ma wspomnianego wyżej widoku próbnego z daltonizmem, możesz sprawdzić kontrast jasności swojego projektu, konwertując go na skalę szarości. Lub, jeśli jest to wcześniejsza wersja PS, możesz użyć albo warstwy odcienia i nasycenia, gdy nasycenie jest całkowicie obniżone, albo mapy gradientu, używając gradientu od czerni do bieli. Umieść tę warstwę jako górną warstwę w dokumencie, a następnie za każdym razem, gdy chcesz sprawdzić kontrast, włącz go. Wolę mapę gradientową, ponieważ jest bardziej dokładna pod względem tego, jakie kolory kontrastują ze sobą pod względem jasności (czerwony jest nieco jaśniejszy niż wtedy, gdy po prostu się nasycasz), ale jedno z nich może pokazywać problematyczne obszary w projekcie. Tak długo, jak strona wygląda dobrze w tym widoku, powinna być w porządku dla użytkownika nieświadomego koloru.


0

wprowadź opis zdjęcia tutaj

Ryc. 1: Test ślepoty barw Ishihary .

W pewnym momencie odpowiedziałem na podobne pytanie:

Jakie jest dobre źródło palet kolorów dla niedowidzącego użytkownika?

Podstawowy wynik jest następujący: warto zbadać specyficzną, niewidoczną na kolor bazę użytkowników (ponieważ istnieje znaczna wariancja); Twoja paleta prawdopodobnie ewoluuje z tego, co możesz zobaczyć oczami niewidomych.

Powiązane zdjęcia:

Kolor ślepy kontra trójchromatyczny


Ale wydaje się to dziwne, biorąc pod uwagę, jak często występują niektóre rodzaje ślepoty na kolory, nie ma stron internetowych, które po prostu wymieniają wygodne palety. Wygląda na to, że za każdym razem wymyślasz koło na nowo.
dumbledad

0

Wiem, że już odpowiedziałem na to pytanie - ale właśnie to znalazłem:

http://disturbmedia.com/max/colour-blindness.html

... który jest symulatorem ślepoty barw, który wydaje się szczególnie odpowiedni do twojego zadania. Spojrzałem na to i tak źle czułem się z powodu ślepoty na kolory, że zmuszony byłem myśleć o paletach, które również by na nie działały, ze współczucia. Naprawdę - nie do końca żartuję; Spójrz.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.