Bonne palette de couleurs, utilisable pour les daltoniens.

13

Je suis en train de concevoir un graphique en ce moment, qui aura lentement plus d'éléments ajoutés. Je voudrais créer une liste / ordre de couleurs pour les articles, qui sera plus utilisable pour les daltoniens afin de différencier chaque article. Des idées comment / par où commencer?

fish2000
la source

Réponses:

14

Si vous souhaitez opter pour une approche par «essais et erreurs», je suggérerais un outil appelé Color Oracle (multiplateforme) qui simule la deutéranopie / deutéranomalie, la protanopie / protanomalie et la tritanopie - types de daltonisme sur l'écran de votre ordinateur.

(Photoshop propose également des configurations résistantes au daltonisme sous ViewProof Setup(CS5 en a au moins). Mais Photoshop peut être un peu exagéré, si vous êtes sur le point de concevoir un graphique.)

Jari Keinänen
la source
1
+1 pour la preuve photoshop je l'ai essayé l'autre jour. Son assez génial
JamesHenare
Le fait est que le test est la bonne approche; le choix d'une palette "sûre" va être inutilement restrictif.
Charles Stewart
7

À quel type de daltonisme essayez-vous de remédier? Ce lien

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

devrait vous donner une bonne idée des différentes couleurs à éviter en fonction du type de daltonisme.

En général, rendre tout dépendant du choix entre le bleu et le vert peut devenir risqué; vous voudrez peut-être voir à quoi ressemble votre substance comme purement monochrome.

Puisqu'il existe une gamme de "daltonisme", vous voudrez probablement aussi toujours être sûr que les commandes, etc. ont une redondance (par exemple, le gros bouton rouge devrait également être étiqueté "bouton d'autodestruction" dans une belle couleur contrastée (noir sur rouge ou blanc sur rouge).

lawndartcatcher
la source
bon appel à la redondance
JamesHenare
1
@Lauren: Eh bien, vous ne pouvez pas être trop prudent lors de la conception d'interfaces utilisateur pour votre repaire maléfique ...
lawndartcatcher
oui, et assurez-vous d'embaucher un enfant de cinq ans pour tester vos grands plans. :)
Lauren-Clear-Monica-Ipsum
5

Il existe plusieurs types de daltonisme. L'essentiel est de s'assurer qu'il y a un contraste adéquat. Encore mieux, ne vous fiez pas uniquement à la couleur - ayez toujours les mêmes informations sur la forme, le contraste ou l'ordre des articles. Si votre image est facile à comprendre en noir et blanc, elle passe.

DA01
la source
Bien qu'il existe techniquement de nombreux types, la grande majorité souffre de deutéranopie ou de deutéranomalie plus bénigne. Presque tous les autres ont une protanopie ou une protanomalie. Tout ce qui précède est une perte de rouge-vert. Tous les types restants ensemble (bleu-jaune ou monochrome) représentent moins de 0,01% de la population, si je comprends bien. Donc, je cible principalement la vision normale et la deutéranopie (en utilisant la simulation Adobe), puis je peaufine un peu en utilisant la simulation de la protanopie.
Jon Coombs
Si vous remplacez entièrement le rouge par une couleur autrement inutilisée (généralement magenta ou orange), cela aide. Android a fait beaucoup de cela. (Ou, vous pouvez remplacer le vert.) Il n'est pas facile de remplacer les icônes colorées si vous utilisez du rouge (ou du vert) dans certaines de vos icônes. (Pour nous, nos icônes héritées ne peuvent pas toutes être monochromes.) Si vous avez le luxe des palettes échangeables, vous pouvez optimiser séparément pour le Deut. et prot., et même ajouter une troisième option pour la tritanopie / tritanomalie. Si vous avez permutable, avoir un mode à contraste élevé (texte clair sur bg foncé) est beaucoup de substitutions mais encore plus utile.
Jon Coombs
4

Je suis daltonien. «Nous» aimons que les graphiques soient discriminés en utilisant la couleur autant que «vous» - c'est juste qu'il y a moins de couleurs dans notre monde que la vôtre. Voici une suggestion pragmatique dans l'esprit de la règle 80/20.

Si votre premier type de capteurs de couleur (proto) ne fonctionne pas, votre vision est proto-anopique. S'ils se conduisent un peu mal, vous êtes proto-anomole. Répétez l'opération pour les deux autres types de capteur de couleur et remplacez «deuter» ou «trito» par «proto». (Je pense que ce sont des grecs pour 1,2,3).

L'opportunité pragmatique vient du fait que la deutéranomalie est beaucoup plus répandue que les autres types; 5% de tous les hommes. Les autres marquent moins de 1% chez les hommes et encore moins chez les femmes. Donc, une solution simple pour nous, les deutéranomalistes, va très loin - personnellement, je ne veux pas avoir à configurer les couleurs moi-même juste pour pouvoir voir une différence dans les lignes d'un graphique. (Ce qui arrive tout le temps).

J'ai inclus ci-dessous un petit ensemble de couleurs dont je peux voir la différence entre sans effort. J'ai essayé en vain d'en mettre plus - ce qui vous donne une idée de la taille de la palette.

Nb. N'oubliez pas qu'il est inutile de faire référence à ces couleurs par leur nom dans l'expérience utilisateur que vous créez. Pour nous Deuts - il semble que "vous" ayez inventé un grand nombre de noms dupliqués inutilement pour à peu près les mêmes couleurs :-)

RVB (255, 204, 153)

RVB (204, 204, 255)

RVB (255, 102, 102)

RVB (139, 230, 2)

rouge

Jaune

RVB (51, 51, 255)

RVB (153, 153, 153)

rgb (153, 0, 0)

RVB (51, 51, 51)

rgb (0, 0, 102)

RVB (120, 102, 75)

pete howard
la source
1
Le fragment html dans lequel j'ai copié pour montrer les couleurs ne s'est pas affiché correctement - alors laissez-moi réessayer:
pete howard
ici vous allez jsfiddle.net/kgasj68o
santa
2

Le type de daltonisme le plus courant est le daltonisme rouge-vert (qui peut être un défaut dans la détection du rouge ou du vert, mais rarement les deux). Évitez donc de vous fier aux distinctions dans la partie rouge-verte du spectre. (Le vert clair et l'orange clair auront tendance à avoir la même apparence pour ces personnes, par exemple.)

Si vous voulez être particulièrement prudent, vous pouvez placer vos couleurs sur un axe bleu-jaune (bleu très profond; aqua; blanc; chartreuse; marron); tous les problèmes rouge-vert rendent encore l'individu capable de dire que le bleu est différent; le jaune a l'avantage d'activer les cônes vert et rouge, donc s'il y a un problème avec l'un ou l'autre, il est toujours bien visible. Alternativement, tout étirement où la luminosité augmente (par exemple rouge-> jaune-> blanc) est visible pour la plupart des gens. Ne présumez cependant pas que le rouge est différent du noir.

Rex Kerr
la source
2

Il existe des outils pour Firefox par exemple

Afaik, il y a aussi un certificat qui a quelques directives. J'ai regardé dans mes papiers mais je ne l'ai pas trouvé jusqu'à présent. Google va sûrement vous parler des différents certificats disponibles pour votre pays.

kaiser
la source
2

Je ressuscite cela parce qu'il est difficile de trouver des exemples concrets ou des procédures.

Vous pouvez utiliser des simulateurs pour aider à atteindre cet objectif, en gardant à l'esprit que le ciblage de la Deutéranopie couvre la majorité, et le soutien de la Protanopie couvre également presque tout le monde. (Je pense que le reste représente moins de 0,01% de la population.)

Les produits Adobe comme Illustrator ont des simulateurs très utiles (ouvrez une nouvelle fenêtre et choisissez Affichage> Configuration de la vérification> Cécité des couleurs ...) qui peuvent instantanément vous montrer un rendu côte à côte en direct lorsque vous ajustez vos couleurs. Et il existe également des outils autonomes gratuits, comme l'analyseur de contraste des couleurs.

Ce qui suit est juste un exemple de capture d'écran d'Illustrator montrant une palette de six couleurs (où la sixième couleur est soit rouge ou magenta, pas les deux) et les deux simulations. Celui en bas à gauche est le plus critique, statistiquement.

Notez que dans ce cas, le violet n'est devenu que marginalement utile (assez décoloré, et malgré tout, le contraste avec le bleu et / ou le magenta reste faible). De plus, l'option "la plus sûre" (le magenta plein remplaçant le rouge) peut être assez bruyante. Pour la plupart des personnes atteintes de CVD, le réglage de la saturation / luminosité du rouge et du vert peut fournir un contraste reconnaissable.

une palette qui, espérons-le, ne présente aucune couleur

(Veuillez vérifier avec moi avant de réutiliser cette palette / image dans son intégralité.)

Je recommande fortement d'utiliser l'espace colorimétrique HSL. HSB (alias HSV) est également assez convivial, surtout par rapport à RVB ou CMJN. (Pour info, seules les valeurs de teinte H seront identiques dans les deux systèmes.) Ici, chaque colonne utilise un seul numéro de teinte. Vous pouvez toujours extraire les codes RVB plus tard, soit d'Adobe, soit en utilisant les excellents outils de colorizer.org . Les codes Hex RGB sont, malheureusement, les plus concis et directement utilisables par les programmeurs, etc., bien que si vous travaillez en CSS, il supporte directement HSL (yay).

La saturation du bleu ici est délibérément faible pour (a) être une couleur de lien / bouton plus douce et (b) pour contraster davantage avec ces magentas et ces violets bien saturés. Dans une colonne, la principale variation est la luminosité, mais vous pouvez aussi vous en sortir avec une certaine variation de saturation.

Jon Coombs
la source
1

Si vous n'êtes pas dans Photoshop ou si vous êtes dans une version antérieure qui n'a pas la vue d'épreuve de daltonisme mentionnée ci-dessus, vous pouvez vérifier le contraste de luminosité de votre conception en la convertissant en niveaux de gris. Ou, s'il s'agit d'une version antérieure de PS, vous pouvez utiliser soit une couche de teinte et de saturation avec la saturation complètement baissée, soit une carte de dégradé utilisant le noir au blanc comme dégradé. Placez ce calque comme calque supérieur dans votre document, puis lorsque vous souhaitez vérifier le contraste, activez-le. Je préfère la carte de dégradé car elle est plus précise en termes de contraste des couleurs en termes de luminosité (le rouge apparaît comme un peu plus clair que si vous désaturez), mais l'un ou l'autre peut vous montrer des zones à problème dans la conception. Tant que votre page a l'air bien dans cette vue, elle devrait convenir à un utilisateur daltonien.

Crys
la source
0

entrez la description de l'image ici

Figure 1: test de daltonisme Ishihara .

Je viens de répondre à une question similaire, assez longuement:

Quelle est une bonne source de palettes de couleurs à fournir à un utilisateur daltonien?

Le résultat de base est le suivant: l'expérience de daltonisme spécifique de votre base d'utilisateurs (car il existe des écarts considérables) mérite d'être étudiée; votre palette évoluera probablement à partir de ce que vous pourriez voir à travers les yeux daltoniens.

Concernant la photo:

Daltonien vs trichromatique

fish2000
la source
Mais il semble étrange qu'étant donné la fréquence de certaines formes de daltonisme, il n'existe pas de sites Web qui répertorient simplement des palettes pratiques. C'est comme réinventer la roue à chaque fois.
dumbledad
0

Je sais que j'ai déjà répondu à ce q - mais je viens de trouver ceci:

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

... qui est un simulateur de daltonisme qui semble particulièrement bien adapté à la tâche de l'année. Je l'ai regardé et je me sentais tellement mal pour les daltoniens que j'étais obligé de penser à des palettes qui fonctionneraient aussi pour eux, par compassion. Vraiment - je ne plaisante pas entièrement; regarde.

fish2000
la source