Simulateur de daltonisme, gratuit

Pourquoi concevoir pour la déficience de vision des couleurs est important

La déficience de vision des couleurs (DVC) est courante. Le National Eye Institute américain rapporte qu'environ 1 homme sur 12 présente une forme de DVC ; les femmes sont touchées à un taux bien plus faible, car les formes les plus courantes sont héréditaires via des gènes récessifs liés au chromosome X. Au total, la population mondiale ayant un certain niveau de DVC se compte en centaines de millions. Toute interface destinée aux utilisateurs qui s'appuie sur le rouge et le vert pour transmettre du sens (indicateurs d'erreur ou de succès, graphiques, pastilles de statut, messages de validation) échouera pour une part significative d'utilisateurs, sauf si la couleur est associée à un autre repère.

C'est aussi une exigence formelle d'accessibilité. Le critère de succès 1.4.1 des WCAG 2.2 (« Utilisation de la couleur »), niveau A, énonce la règle directement : « La couleur n'est pas utilisée comme le seul moyen visuel de véhiculer l'information, d'indiquer une action, d'inviter à une réponse ou de distinguer un élément visuel. » Le niveau A est le plus bas seuil de conformité WCAG : ne pas le respecter signifie qu'un site n'est pas seulement inaccessible, mais aussi juridiquement non conforme dans les juridictions qui imposent la conformité WCAG (Section 508 aux États-Unis, Accessibility Act de l'UE, Equality Act du Royaume-Uni).

Les huit formes de DVC

La vision humaine des couleurs repose sur trois types de photorécepteurs à cônes : les cônes L (grande longueur d'onde, pic autour du rouge), les cônes M (longueur d'onde moyenne, pic autour du vert) et les cônes S (courte longueur d'onde, pic autour du bleu-violet). Chaque forme de DVC correspond à l'un de ces cônes absent (-anopie) ou à la sensibilité décalée (-anomalie).

La deutéranomalie est la forme la plus répandue parce que les gènes des photopigments des cônes L et M sont adjacents sur le chromosome X et ne diffèrent que de quelques acides aminés. De petites mutations décalent facilement le pic de sensibilité du cône M plus près de celui du cône L, réduisant la capacité du cerveau à distinguer le rouge du vert.

Pourquoi les hommes sont touchés plus souvent

Les gènes des photopigments du cône L (OPN1LW) et du cône M (OPN1MW) se situent tous deux sur le chromosome X. Les hommes n'héritent que d'un seul X (de leur mère) ; les femmes en héritent deux (un de chaque parent). Pour qu'une déficience récessive s'exprime, une femme aurait besoin du gène déficient sur ses deux chromosomes X, tandis qu'un homme n'en a besoin que sur son unique X. L'arithmétique produit une différence de prévalence d'environ 10× entre les hommes et les femmes, pour la DVC rouge-vert en particulier. Le gène du cône S est sur le chromosome 7 et est autosomique : la tritanopie et la tritanomalie touchent hommes et femmes à des taux similaires, mais les deux formes sont de toute façon très rares.

Les exigences de contraste WCAG s'appliquent aussi

Au-delà du CS 1.4.1, les WCAG imposent aussi des ratios de contraste minimaux pour le texte et les composants d'interface, tous mesurés par rapport à l'appariement de couleurs réellement visible :

• CS 1.4.3 Contraste (minimum), niveau AA : au moins 4,5:1 pour le texte courant normal, 3:1 pour le texte grand ou gras.
• CS 1.4.6 Contraste (renforcé), niveau AAA : 7:1 pour le texte normal, 4,5:1 pour le grand.
• CS 1.4.11 Contraste des éléments non textuels, niveau AA : 3:1 pour les composants d'interface et les objets graphiques (bordures de boutons, indicateurs de focus, contours d'icônes).

Utilisez ce simulateur en parallèle d'un vérificateur de contraste. Deux couleurs peuvent avoir un ratio de contraste parfaitement correct de 4,5:1 en vision normale et rester indistinguables pour une personne deutéranope. Le simulateur détecte le second mode de défaillance que la simple vérification de contraste manque.

Pièges de conception courants et leurs correctifs

• Indicateurs de statut rouge / vert pour succès ou erreur. Associez-les à une icône (✗ / ✓), une étiquette textuelle ou des formes distinctes. Ne vous fiez jamais à la seule teinte.
• Liens colorés sans soulignement. De nombreux utilisateurs ayant une DVC ne peuvent pas distinguer un lien coloré du texte courant environnant. Ajoutez un soulignement, un changement de graisse de police, ou les deux.
• Histogrammes colorés uniquement par catégorie. Ajoutez des motifs, des étiquettes directes, ou utilisez une palette sûre pour le daltonisme (Viridis, Cividis, Magma, Okabe-Ito, les jeux sûrs pour la DVC de ColorBrewer).
• Cartes thermiques avec dégradés rouge→vert. Passez à des palettes perceptuellement uniformes : le Viridis de Matplotlib (par défaut depuis 2017) et Cividis (Nuñez et al., 2018, conçu spécifiquement pour les observateurs ayant une DVC) sont tous deux sûrs.
• Validation de formulaire par du texte rouge seul. Associez-y une icône, un message d'erreur explicite et un changement visible du contour du champ.
• Instructions du type « cliquez sur le bouton vert ». Référez-vous à la position ou à l'étiquette, pas à la couleur.
• Légendes de cartes aux teintes similaires. Les cartes choroplèthes à échelles rouge-orange-jaune peuvent se réduire à deux couleurs indistinguables en cas de deutéranopie. Utilisez une échelle monochrome (du bleu clair au bleu foncé) ou une palette divergente sûre pour la DVC.
• Codes couleur dans la conception de jeux. Cas célèbre : les premières Noigrumes de Pokémon Cristal et les PokéStops à code couleur d'origine de Pokémon GO présentaient des décisions rouge-vert insolubles pour de nombreux joueurs ayant une DVC.

Palettes sûres pour le daltonisme

• Viridis : la palette séquentielle par défaut de Matplotlib depuis 2017. Perceptuellement uniforme en vision normale comme en cas de DVC.
• Cividis : conçu spécifiquement pour les observateurs ayant une DVC (Nuñez, Anderton et Renslow, PLOS ONE 2018). Maintient une distance perceptuelle uniforme même avec une deutéranopie ou une protanopie simulée.
• ColorBrewer : les palettes de Cynthia Brewer pour la cartographie. Le site marque explicitement les variantes sûres pour la DVC pour les données séquentielles, divergentes et qualitatives.
• Okabe-Ito : une palette qualitative de huit couleurs conçue par Masataka Okabe et Kei Ito pour l'accessibilité dans l'édition scientifique. La palette de référence recommandée pour les données catégorielles jusqu'à 8 catégories.

Les DevTools des navigateurs ont aussi des simulateurs de DVC

Les DevTools de Chrome comme d'Edge disposent d'une option intégrée « Émuler les déficiences visuelles » (dans l'onglet Rendu) qui peut simuler la protanopie, la deutéranopie, la tritanopie et l'achromatopsie sur toute la fenêtre d'affichage. L'Inspecteur d'accessibilité de Firefox expose un simulateur similaire. Ils sont parfaits pour les audits de page entière lors des revues de conception : cet outil monochrome les complète en isolant un échantillon à la fois, afin que vous puissiez trancher une décision de palette sans que le reste de la page ne perturbe la comparaison.

Tests diagnostiques dont vous avez peut-être entendu parler

• Planches d'Ishihara (Shinobu Ishihara, 1917), les fameuses planches de points colorés avec des nombres cachés. Standard en milieu clinique pour le dépistage des déficiences rouge-vert.
• Test Farnsworth-Munsell 100 teintes : disposez des pastilles dans l'ordre continu des teintes. Teste la discrimination subtile, pas seulement la présence oui/non d'une DVC.
• Anomaloscope : ajustez un mélange rouge-vert pour égaler une référence jaune. Utilisé pour la classification clinique du type et de la sévérité de la DVC.

Cet outil n'est pas un diagnostic : il simule la façon dont une couleur donnée apparaît à une personne ayant diverses formes de DVC, afin que vous puissiez concevoir en conséquence, et non tester la vision de quelqu'un.

Erreurs courantes

1. Traiter la DVC comme une préoccupation de niche. Un homme sur 12 représente une part significative de la base d'utilisateurs de tout produit grand public, et la plupart d'entre eux ne le signalent jamais parce qu'ils ont composé avec toute leur vie.
2. Supposer que le « mode sombre » ou le « contraste élevé » suffit. Le contraste et la DVC sont des axes indépendants. Une palette à contraste élevé peut tout de même s'appuyer sur des distinctions rouge-vert qui échouent.
3. Tester uniquement avec la deutéranopie. La deutéranopie est la forme la plus courante, mais pas la seule : la protanopie, la tritanopie et les variantes partielles en -anomalie produisent toutes des confusions différentes. Parcourez-les toutes.
4. N'utiliser que le simulateur, en ignorant le vérificateur de contraste. Une palette peut être sûre pour la DVC et tout de même échouer aux minimums de contraste WCAG 1.4.3. Utilisez les deux outils.
5. Choisir les couleurs par leur nom plutôt que par la distance perçue. « Rouge, vert et bleu » semble bien séparé ; en cas de DVC, cela peut se réduire à « sombre, sombre, bleu ». Testez les échantillons réels.

Foire aux questions

Quelle est la précision de la simulation ?

La simulation de DVC est une approximation, pas un rendu parfait. Les algorithmes standard (la méthode de Brettel, Viénot et Mollon de 1997, affinée par Viénot 1999 et Machado et al. 2009) projettent une couleur sur la « ligne de confusion » du cône manquant ou décalé dans l'espace colorimétrique LMS. Le résultat est ce qu'une personne en dichromatie complète verrait en moyenne, mais les utilisateurs réels ayant une DVC varient individuellement : le cerveau compense avec des indices de luminance, de contexte et d'expérience antérieure qu'une simulation statique ne peut pas reproduire.

Mon image ou ma couleur est-elle envoyée quelque part ?

Non. La simulation s'exécute entièrement dans votre navigateur à l'aide d'un élément canvas pour appliquer la transformation de couleur pixel par pixel. Rien n'est téléversé, journalisé ni stocké. C'est important quand l'image que vous testez est une maquette de conception non publiée, une capture d'écran d'interface confidentielle, ou toute autre chose que vous ne partageriez pas avec un tiers.

Devrais-je concevoir pour les huit formes de DVC ?

En pratique, concevoir pour les formes les plus courantes (deutéranopie et deutéranomalie) couvre la grande majorité des utilisateurs. Ajouter une vérification contre la protanopie vous couvre la plupart du reste. La tritanopie et la tritanomalie sont assez rares pour que satisfaire les tests deutan / protan suffise généralement, même si une conception réellement accessible qui ne s'appuie pas du tout sur la teinte (associée à des icônes, des motifs ou des étiquettes) couvre tout le monde automatiquement.

Ma palette actuelle a « CVD-safe » dans son nom. Dois-je quand même tester ?

Oui. « CVD-safe » signifie généralement que les couleurs de catégorie de la palette sont distinguables sous simulation, mais dès que vous composez une véritable interface (du texte sur un fond coloré, une icône par-dessus un aplat, un état de survol décalé de 5 % de luminosité), vous pouvez réintroduire de la confusion. Testez vos paires de couleurs composées, pas seulement la palette source.

Quelle est la différence entre la protanopie et la protanomalie ?

La protanopie est l'absence du photopigment du cône L (rouge) : la personne touchée n'a aucune sensibilité fonctionnelle au rouge. La protanomalie est un décalage du pic de sensibilité du cône L plutôt que son absence : la personne touchée a une discrimination du rouge réduite, mais non nulle. Même schéma pour deutéra-/deutér- et trita-/triton- : -anopie est la forme forte, -anomalie est la forme partielle.

Les lunettes correctrices de couleur (EnChroma) fonctionnent-elles vraiment ?

Pour de nombreuses personnes ayant une déficience rouge-vert, oui : elles élargissent l'écart perçu entre certains rouges et verts en filtrant des longueurs d'onde spécifiques qui se chevauchent entre les cônes L et M. Elles ne « guérissent » pas la DVC et ne font pas voir des couleurs normales à un dichromate ; la situation des photopigments est inchangée. L'efficacité varie selon l'individu et les conditions d'éclairage ; la lumière du jour en extérieur tend à être là où elles aident le plus.

Outils associés