Better in English?
Better in English? Switch the website language for a better experience.
Environ 8% des hommes et 0,5% des femmes présentent une forme de daltonisme en France. Sur un produit digital touchant quelques milliers d'utilisateurs, cela représente mécaniquement des centaines de personnes qui peuvent mal interpréter un bouton rouge d'erreur, un graphique vert/rouge ou un badge de statut coloré. Le sujet n'est pas anecdotique : il touche à l'accessibilité numérique, à la conformité RGAA/WCAG, et in fine à la conversion d'un produit.
Chez Mazette.co, on observe ce problème très régulièrement en audit UI : des design systems entiers construits autour de codes couleur (vert = succès, rouge = erreur, orange = attention) sans aucun second signal visuel. Sur Figma, c'est un classique des premières maquettes rapides, qui se propage ensuite sans être jamais challengé jusqu'au site Webflow final.
La confusion la plus répandue consiste à croire que les daltoniens voient le monde « en noir et blanc ». C'est faux dans l'immense majorité des cas. Le daltonisme est une anomalie de perception de certaines longueurs d'onde, pas une absence totale de couleur.
Une personne daltonienne perçoit bien les couleurs, mais certaines teintes lui apparaissent proches, voire indiscernables, alors qu'elles sont très différentes pour une vision normale. Le cas le plus fréquent, la deutéranomalie, rend le vert plus terne et proche du rouge ou du marron. L'achromatopsie totale, qui supprime toute perception colorée, est en réalité extrêmement rare.
C'est la combinaison la plus problématique, car elle regroupe la majorité des cas de daltonisme (les familles « rouge-vert » représentent la grande majorité des anomalies). Un rouge et un vert de luminosité similaire peuvent apparaître comme deux nuances de brun ou de jaune-olive très proches, rendant par exemple un graphique à barres ou un indicateur de statut totalement illisible sans légende ni icône.
Le bleu reste globalement bien perçu par les daltonismes rouge-vert, ce qui en fait une couleur souvent recommandée en remplacement du vert dans les interfaces. En revanche, les daltonismes de type bleu-jaune (tritanopie, tritanomalie), beaucoup plus rares, rendent justement le bleu difficile à distinguer du vert, et le jaune du gris clair.
Il existe sept familles de daltonisme, réparties en deux grandes catégories selon les cônes de la rétine affectés.
| Type de daltonisme | Couleurs affectées | Fréquence |
|---|---|---|
| Deutéranomalie / deutéranopie | Vert perçu plus terne, confusion rouge-vert | Forme la plus courante |
| Protanomalie / protanopie | Rouge affaibli, confusion rouge-vert-marron | Fréquente |
| Tritanomalie / tritanopie | Confusion bleu-vert et jaune-gris | Rare |
| Achromatopsie | Absence totale de perception des couleurs | Très rare |
Cette distinction compte pour le design : un filtre « daltonisme » générique qui ne simule que la deutéranopie va vous rassurer à tort sur une interface qui reste illisible pour un profil tritanope.
La règle n'est pas d'éliminer le rouge ou le vert du nuancier, mais d'éviter certaines associations précises et de ne jamais les utiliser comme seul vecteur d'information.
Pour évaluer une vision des couleurs, la méthode de référence reste le test d'Ishihara, composé de planches pseudo-isochromatiques où un chiffre ou une forme se détache d'un fond de points colorés. C'est ce test que l'on retrouve derrière la plupart des « tests daltonien chiffre couleur » disponibles en ligne.
D'autres formats existent : le test de daltonisme carré couleur (tri de nuances par ordre de teinte, type Farnsworth-Munsell) et les tests spécifiques bleu-vert pour isoler les tritanopies. Un test daltonisme gratuit en ligne donne une indication utile mais ne remplace pas un diagnostic ophtalmologique, l'affichage de l'écran et le calibrage pouvant fausser le résultat.
Côté outils de conception, deux approches se complètent :
Chez Mazette.co, le réflexe est d'intégrer ce test de simulation directement dans la revue de maquettes Figma, avant transmission au développement Webflow. Repérer un problème de contraste à ce stade coûte quelques minutes ; le corriger une fois le site en ligne coûte un cycle de refonte complet.
Le daltonisme est le plus souvent héréditaire (transmission liée au chromosome X, ce qui explique sa prévalence bien plus forte chez les hommes) et présent dès la naissance. Il est généralement détecté entre 4 et 7 ans, au moment où l'enfant doit nommer et associer des couleurs à l'école, via un test de dépistage simple chez l'ophtalmologiste ou le médecin scolaire. Un dépistage précoce permet d'adapter le matériel pédagogique, qui repose souvent énormément sur des codes couleur.
Administrativement, le daltonisme n'ouvre pas droit à une reconnaissance de handicap au sens de la MDPH, sauf cas exceptionnel associé à une pathologie plus large. Il reste en revanche une restriction fonctionnelle reconnue, qui peut limiter l'accès à certains métiers (pilote, certains postes de sécurité) et qui justifie pleinement les obligations d'accessibilité numérique imposées par le RGAA et les normes WCAG.
La bonne pratique consiste à traiter l'accessibilité couleur comme une contrainte de design system, pas comme une correction a posteriori.
C'est tout l'enjeu d'une collaboration design-développement bien construite : une règle d'accessibilité définie dans Figma mais non documentée se perd systématiquement à l'intégration. Nos équipes product design intègrent ces contrôles directement dans la phase de design, en lien avec le développement Webflow qui suit.
{{webdesign}}
On le constate projet après projet : la question de la couleur pour daltonien arrive presque toujours trop tard, au moment du test utilisateur ou pire, après la mise en ligne. C'est un chantier de design system, pas un détail graphique. Un bon réflexe, simple à mettre en place : interdire en interne toute information critique codée uniquement par une teinte, dès la phase de wireframe. Cette règle, une fois posée dans la charte de composants Figma, évite 90% des problèmes qu'on corrige habituellement en urgence sur des interfaces déjà en production.
On a aussi remarqué, en travaillant le référencement de contenus de design, que ce type de sujet technique attire un trafic qualifié et récurrent, avec une concurrence SEO encore relativement ouverte : peu d'acteurs du design produit français traitent le sujet en profondeur, alors que la requête génère un volume de recherche solide tout au long de l'année. C'est un signal clair que l'accessibilité couleur reste un point de douleur mal couvert, aussi bien côté contenu que côté pratique réelle en agence.
Envie d'auditer votre design system sous l'angle accessibilité, couleurs comprises ? Notre méthode intègre ce contrôle dès la phase de conception. Parcourez aussi notre portfolio pour voir comment ces règles se traduisent en interface réelle, ou contactez-nous pour en discuter.
Code
Plus de 180 entreprises sont déjà sorties de l'obscurité à nos côtés.
Utilisez un plugin de simulation de daltonisme directement dans Figma pour visualiser vos maquettes selon les principaux types de daltonisme (protanopie, deutéranopie, tritanopie). Combinez-le avec un vérificateur de contraste pour vous assurer que l'information reste lisible même sans distinction de teinte. Testez en priorité les composants fonctionnels : boutons d'action, badges de statut et graphiques.
Évitez d'utiliser uniquement le duo rouge et vert pour coder une information importante comme une erreur ou une validation. Évitez aussi les dégradés rouge-orange-vert dans les graphiques et jauges. Préférez le bleu et l'orange, mieux distingués par la majorité des profils daltoniens, et doublez toujours la couleur d'un texte ou d'une icône.
Oui, le daltonisme est le plus souvent héréditaire, transmis via le chromosome X, ce qui explique sa plus forte fréquence chez les hommes. Il est présent dès la naissance mais généralement détecté entre 4 et 7 ans, lorsque l'enfant doit associer et nommer des couleurs à l'école.
Titres percutants, meta descriptions soignées, sitemap, Schema.org, structure Hn, audits : ce sont les fondations SEO qui rendent votre contenu lisible par Google ET par les IA génératives. Nous couvrons les deux en même temps.
Avec plus de 180 clients, notre agence vous accompagne sur tous les sujets comme le webdesign sur mesure, les automations fines, la conversion et votre visibilité SEO et GEO.
Nous concevons des designs web sur mesure, orientés performance, parcours utilisateurs et conversion. Comme plus de 180 clients, faites nous confiance et élevez votre marque.
