Comment mes couleurs apparaissent-elles aux personnes daltoniennes ?
Simulateur de daltonisme : vois comment tes couleurs / designs apparaissent aux personnes avec différents types de daltonisme.
Quatre types : protanopie (pas de récepteurs rouges, environ 1 % des hommes), deutéranopie (pas de vert, environ 1,2 % des hommes), tritanopie (pas de bleu, rare), achromatopsie (daltonisme total, très rare).
Vérifie une seule couleur ou une image / capture entière. Algorithme basé sur les matrices Brettel/Vienot/Mollon, les mêmes que celles utilisées par les Chrome DevTools.
Comment l'utiliser
- Choisis le mode : « Couleur » (un seul hex) ou « Image » (photo / capture de page).
- Mode couleur : tape un hex / picker / utilise la pipette d'écran / clique sur une des 8 couleurs d'exemple. À droite, tu vois 5 versions : original + 4 types avec population affectée.
- Mode image : upload un fichier (PNG, JPG, WebP, AVIF, HEIC), vois quatre simulations à côté de l'original.
- Note : les matrices simulent les formes « sévères ». La plupart des daltoniens ont des anomalies (« protanomalie ») : ils voient de la couleur, juste plus terne. Le simulateur montre le « pire cas ».
- Designers : avant d'envoyer une maquette, vérifie toujours deutéranopie (le plus courant) et protanopie. Si ta couleur d'accent est invisible pour les deutéranopes, ajoute un indicateur secondaire (icône, contraste).
Quand c'est utile
Là où le simulateur de daltonisme paie, scénarios typiques :
- Design web / a11y : avant de livrer un design, vérifie si les liens rouge/vert, les états erreur/succès, les graphiques de couleur sont distinguables pour les deutéranopes (environ 1,2 % des utilisateurs, 8 % des hommes).
- Graphiques : barres rouges et vertes paraissent identiques à un deutéranope. Ajoute des motifs (rayures, points) ou des labels.
- UI de jeu : indicateurs santé/dégâts rouge/vert : quasi illisibles pour environ 5 % des joueurs masculins.
- Audits d'accessibilité : WCAG 1.4.1 exige : « la couleur n'est pas le seul moyen visuel de transmettre l'information ». Le simulateur montre pourquoi. Associe-le au vérificateur de contraste pour couvrir WCAG 1.4.3 (contraste de texte) dans la même passe.
- Pédagogie : vois pourquoi les flèches verte/rouge de GitHub marchent (forme différente), mais un tutoriel qui dit « clique sur le bouton vert » échoue (couleur seule). Pour choisir un accent plus sûr, échange les couleurs dans le convertisseur de couleurs.
Questions et réponses
Approximativement précise. On utilise les matrices Brettel et al. 1997 / Machado 2009 : les mêmes que celles utilisées par Chrome DevTools, Photoshop, Sim Daltonism (appli macOS populaire). Simulation « forme sévère ». Les daltoniens avec anomalie (pas la cécité totale) voient plus que ce que le simulateur suggère. Pour la « vérification de design dans le pire cas », c'est l'approche standard.