web-dev-qa-db-fra.com

Coloration des icônes pour le daltonisme

enter image description here

J'ai un scénario où il y a 2 icônes (Check et Exclamation) avec 4 états.Les couleurs des icônes changent sur les scénarios suivants

  • État 1 -! - Gris (la configuration est manquante, a du contenu)
  • État 2 -! - Bleu (la configuration est faite, a du contenu)
  • État 3 - Vérifier - Gris (la configuration est manquante, a du contenu)
  • État 4 - Vérifier - Vert (la configuration est faite, a du contenu)

Mais quand il s'agit de personnes aveugles aux couleurs, le changement de couleurs dans les icônes n'est pas perceptible car le vert devient gris pour elles. Comment ce problème peut être traité, toute suggestion ou science derrière pour gérer ce problème.

4
nithinchandrasr

"Le vert vire au gris" n'est pas strictement vrai - Pour les deutéranopes (la forme la plus courante de daltonisme), le vert se transforme en une sorte de couleur brun trouble qui se distinguerait du gris. Vous pouvez le vérifier par vous-même avec l'un des nombreux plug-ins de navigateur qui recolorent les pages comme les utilisateurs aveugles les verraient. Cela résout efficacement le problème de la distinction de l'état gris de l'état vert.

Cependant ce n'est pas une bonne pratique d'utiliser la couleur seule pour distinguer les différents états d'un objet donné.

Dans vos exemples, il semblerait que vous ayez un état incomplet ("Configuration manquante, a du contenu") et un état complet ("Configuration effectuée, a du contenu"). Je ne pense pas que ce serait un grand effort d'imagination de présenter les icônes sous une forme triangulaire d '"avertissement" pour celles qui sont incomplètes et une forme circulaire "entière" pour celles qui sont complètes - ou une autre configuration basée sur la forme de votre choisir.

Bien sûr, quoi que vous fassiez, vous devez également inclure une sorte de valeur alt indiquant le but des icônes pour les utilisateurs qui ne les voient pas du tout.

4
Andrew Martin

J'ai fait quelques simulations avec ColorOracle :

enter image description here

Il semble que cela fonctionne très bien pour les daltonisme rouge-vert (deutéronopie et protanopie), mais ceux qui ont des problèmes bleu-vert (tritanopie) auront du mal à voir les choses.

Et c'est quelque chose que vous ne pouvez pas vraiment résoudre avec un léger ajustement de la palette. Il faudrait déplacer le vert jusqu'au jaune ou faire passer le bleu au violet: enter image description here

1
PixelSnader

La meilleure façon de savoir si votre combinaison de couleurs convient aux personnes atteintes de daltonisme est de convertir l'image en niveaux de gris.

enter image description here

Bien sûr, la plupart des personnes daltoniennes verront la couleur. Mais selon le type de daltonisme, il est difficile de trouver une combinaison qui fonctionnera.

Lignes directrices pour l'utilisation de la couleur

  1. Distinguez les couleurs par la saturation et la luminosité, ainsi que par la teinte.
  2. Utilisez des couleurs distinctives.
  3. Évitez les paires de couleurs que les personnes daltoniennes ne peuvent pas distinguer. (voir la partie inférieure de cette réponse)
  4. Utilisez la couleur de manière redondante avec d'autres repères.
  5. Séparez les fortes couleurs de l'adversaire.

Je peux développer ces points si vous le souhaitez. Source: "Concevoir en pensant à l'esprit", Jeff Johnson.

Ces points optimisent non seulement l'utilisation des couleurs pour les personnes daltoniennes, mais ils aident également tous les autres visiteurs à distinguer les couleurs plus rapidement.

Différents types de daltonisme:

J'ai rendu votre exemple via un générateur de daltonisme.

Deutéranopie (alias daltonisme rouge-vert) - Plus courant:

description

Monochromie du cône bleu:

enter image description here

Achromatopsie/monochromie:

enter image description here

Vert-aveugle/Deutéranopie:

enter image description here

Rouge-faible/Protanomalie:

enter image description here

Bleu-faible/tritanomalie:

enter image description here

Blue-Blind/Tritanopia:

enter image description here

Source: http://www.color-blindness.com/coblis-color-blindness-simulator/

Conclusion

Dans la plupart des cas, ça va. Mais pour être plus clair, je me concentrerais sur la saturation et la luminosité pour mieux montrer la différence. De plus, comme Andrew Martin l'a déjà dit, n'utilisez pas seulement des couleurs pour afficher une différence.

0
Max de Mooij