Simulateur de Daltonisme

On estime que 300 millions de personnes dans le monde ont une forme de daltonisme — environ 1 homme sur 12 et 1 femme sur 200. C'est un groupe plus grand que la population de la plupart des pays, et si votre produit s'appuie sur la couleur pour communiquer un état, une direction ou un sens, une part importante de vos utilisateurs voit quelque chose de différent de ce que vous avez conçu.

Le Simulateur de Daltonisme de Tooladex vous permet de téléverser n'importe quelle image — une capture d'écran, un graphique, une maquette — et de la voir comme la verrait une personne atteinte de protanopie, de deutéranopie, de tritanopie ou d'une autre déficience de la vision des couleurs. Tout s'exécute localement dans votre navigateur ; rien n'est jamais envoyé à un serveur.

Qu'est-ce que le daltonisme ?

La vision des couleurs repose sur trois types de cônes dans la rétine, chacun réglé sur une plage de longueurs d'onde correspondant approximativement à la lumière rouge, verte et bleue. Votre cerveau combine leurs signaux pour produire le spectre de couleurs complet que vous percevez.

Le daltonisme survient lorsque l'un de ces types de cônes est totalement absent (dichromatie) ou décalé de sorte qu'il répond à de mauvaises longueurs d'onde (trichromatie anormale). Le résultat n'est généralement pas de voir en noir et blanc — c'est que certaines couleurs qui paraissent nettement différentes pour une vision typique deviennent difficiles, voire impossibles, à distinguer.

La plupart des cas de daltonisme sont héréditaires et liés au chromosome X, ce qui explique qu'il soit bien plus courant chez les hommes (qui n'ont qu'un seul chromosome X) que chez les femmes (qui en ont deux, et auraient besoin que les deux copies soient affectées).

Types de daltonisme simulés par cet outil

Protanopie (aveugle au rouge) — aucun cône rouge. ~1 % des hommes.
Protanomalie (faiblesse au rouge) — cônes rouges décalés. ~1 % des hommes.
Deutéranopie (aveugle au vert) — aucun cône vert. ~1 % des hommes.
Deutéranomalie (faiblesse au vert) — cônes verts décalés. ~5 % des hommes — la forme la plus courante.
Tritanopie (aveugle au bleu) — aucun cône bleu. ~1 personne sur 10 000.
Tritanomalie (faiblesse au bleu) — cônes bleus décalés. Extrêmement rare.
Achromatopsie (monochromatie) — aucun cône fonctionnel. ~1 personne sur 30 000.
Achromatomalie (monochromatie partielle) — cônes fortement réduits. Extrêmement rare.

Les déficiences rouge-vert (protanopie, protanomalie, deutéranopie et surtout deutéranomalie) représentent l'immense majorité des cas de daltonisme. Si vous ne pouvez concevoir et tester que pour un seul cas, que ce soit celui-là.

Comment utiliser le simulateur

Téléversez une image — une capture d'écran, un graphique, un logo ou une maquette d'interface — ou commencez avec l'image de démonstration intégrée, volontairement remplie des pièges classiques d'accessibilité (une paire d'état rouge/vert, un feu tricolore, un dégradé arc-en-ciel).
Choisissez un type de vision dans le sélecteur, ou parcourez la grille comparative pour voir tous les types côte à côte.
Comparez l'original et la version simulée — l'outil transforme les valeurs rouge, verte et bleue de chaque pixel à l'aide de matrices de couleur qui approximent la perception de ce type de vision.
Testez des couleurs individuelles — choisissez une valeur hexadécimale et voyez instantanément son rendu selon chaque type de vision, utile pour vérifier une palette avant de la valider.
Téléchargez le résultat pour l'intégrer à une revue de design, une présentation client ou un audit d'accessibilité.

Concevoir sans dépendre uniquement de la couleur

L'erreur d'accessibilité la plus courante en conception d'interface est d'utiliser la couleur comme seul signal pour une information importante. Une bordure rouge signifie « erreur ». Un point vert signifie « en ligne ». Une ligne rouge contre une ligne verte sur un graphique signifie « en baisse » contre « en hausse ». Pour une personne atteinte de deutéranomalie, ces paires peuvent paraître presque identiques.

Quelques solutions pratiques :

Associez la couleur à une forme ou une icône. Une coche et un « x » communiquent succès/erreur même si les couleurs paraissent identiques.
Utilisez des étiquettes textuelles, pas seulement des points codés par couleur. « Actif » / « Inactif » vaut mieux qu'un point vert / point gris.
Ajoutez des motifs ou des textures aux graphiques, pas seulement des teintes différentes, pour les séries de données qui doivent rester distinguables.
Testez d'abord votre palette contre la deutéranomalie — puisque c'est de loin la déficience la plus courante, la corriger couvre la plus grande part des utilisateurs réels.
Vérifiez la luminosité, pas seulement la teinte. Deux couleurs peuvent avoir des teintes très différentes mais une luminosité perçue presque identique, ce qui les fait se confondre encore plus sous daltonisme.

Combinaisons de couleurs plus sûres pour les statuts et les graphiques

Rouge / Vert → Bleu / Orange
Points de statut rouge / vert → Icône + étiquette (✓ Succès / ✕ Erreur)
Graphique en ligne rouge / vert → Styles de ligne pleine / pointillée, plus une légende
Carte de chaleur « bon » vert / « mauvais » rouge → Échelle divergente bleu-orange

Outils associés

Color Contrast Checker — Validez les ratios de contraste WCAG pour le texte et les arrière-plans
Accessible Color Palette Checker — Testez une palette entière pour la conformité WCAG
Relative Luminance Calculator — Comprenez la luminosité perçue de n'importe quelle couleur
Color Palette Generator — Créez de nouvelles palettes en pensant à l'accessibilité