Color Blindness Simulator
Visualisez n'importe quelle couleur vue par des personnes atteintes de déficience visuelle chromatique — 6 types simulés.
① Entrer un code HEX ou choisir une couleur ② Simuler 6 types de daltonisme ③ Copier tout HEX simulé
Essayer un preset :
Qu'est-ce que le Daltonisme et pourquoi est-il important pour le Design ?
Le daltonisme (déficience de la vision des couleurs) affecte environ 8% des hommes et 0,5% des femmes dans le monde. Les types les plus courants — deutéranopie et deutéranomalie — impliquent une confusion entre les teintes rouges et vertes. Le critère WCAG 2.1 SC 1.4.1 exige que la couleur ne soit pas le seul moyen visuel de transmettre des informations. Ce simulateur utilise le modèle LMS validé scientifiquement (Viénot 1999)
Questions fréquentes
Le daltonisme (déficience de la vision des couleurs) est l'incapacité à distinguer certaines couleurs due à l'absence ou au dysfonctionnement de cellules coniques rétiniennes. Il touche environ 8% des hommes et 0,5% des femmes. La forme la plus courante est la deutéranomalie (sensibilité réduite au vert), suivie de la protanomalie. La tritanopie (bleu-jaune) est bien plus rare (~0,01%).
L'outil utilise le modèle couleur LMS (méthode Viénot 1999). La pipeline est : HEX → sRGB [0,1] → RGB linéaire (suppression gamma) → réponses cônes LMS via matrice Hunt-Pointer-Estevez → matrice de simulation de déficience → LMS → RGB linéaire → sRGB (gamma) → HEX. Produit des résultats perceptivement précis concordant avec les études cliniques.
Deutéranopie : cônes M (sensibles au vert) absents — verts, rouges et oranges semblent similaires. Protanopie : cônes L (rouge) absents — les rouges apparaissent très sombres, confondus avec vert/brun. Tritanopie : cônes S (bleu) absents — bleus et verts confondus avec rouges et roses. Les formes anomales (deutéranomalie, protanomalie) impliquent une sensibilité réduite plutôt qu'absente.
Entrez chaque couleur clé de votre UI — boutons primaires, indicateurs d'état, graphiques, badges. Pour chaque simulation, vérifiez si la couleur transmet encore la signification voulue. Si la couleur simulée devient indiscernable d'un autre élément, ajoutez un second indice : icône, motif, étiquette ou bordure. Testez systématiquement toute votre palette.
WCAG 2.1 SC 1.4.1 (Niveau A) : la couleur ne doit pas être le seul moyen visuel de transmettre des informations, indiquer une action, solliciter une réponse ou distinguer un élément. SC 1.4.3 (Niveau AA) : le contraste du texte doit être d'au moins 4,5:1 (3:1 pour grand texte). Ces exigences s'appliquent quel que soit le type de vision chromatique.
Les combinaisons les plus sûres maintiennent un contraste de luminance élevé indépendamment de la teinte. Bleu-orange et bleu-jaune fonctionnent pour la plupart des déficiences. Les combinaisons rouge-vert sont les plus problématiques pour la deutéranopie et la protanopie. Ajoutez des icônes ou motifs en complément du codage coloré et vérifiez les ratios de contraste.
Cet outil simule une couleur à la fois — idéal pour vérifier les couleurs de marque, les entrées de palette et les éléments clés de l'UI. Pour tester une page complète, utilisez des extensions comme NoCoffee (Chrome/Firefox) ou Colorblinding, ou les filtres couleur natifs (macOS : Réglages → Accessibilité → Affichage → Filtres couleur ; Windows 11 : Paramètres → Accessibilité → Filtres couleur).