Daltonisme : concevoir un site lisible par tous

Environ 8 % des hommes et 0,5 % des femmes ont du mal à distinguer le rouge et le vert, soit environ 1 homme sur 12 et 1 femme sur 200. Un graphique en rouge et vert, un message d’erreur signalé par sa seule couleur ou une carte aux couleurs trop proches deviennent alors illisibles pour ces personnes.

Ce guide explique ce qu’est le daltonisme, quelles couleurs se confondent, comment concevoir un site lisible par tous et comment le vérifier avec notre simulateur gratuit. Les écarts de couleur cités viennent du moteur de nos outils.

Qu’est-ce que le daltonisme ?

Le daltonisme est une difficulté à distinguer certaines couleurs. Il vient le plus souvent d’une anomalie des cônes, les cellules de l’œil sensibles aux couleurs. L’un des trois types de cônes (rouge, vert, bleu) est absent ou fonctionne autrement. La personne voit toujours, mais des teintes (la couleur elle-même, comme le rouge ou le vert) que les autres distinguent lui paraissent semblables.

Les noms suivent une règle simple.

• Le préfixe indique le cône concerné : prot- pour le rouge, deutér- pour le vert, trit- pour le bleu.
• Le suffixe indique l’atteinte : -opie si ce cône est absent, -omalie s’il est altéré, à des degrés divers.

L’achromatopsie, enfin, est une vision en niveaux de gris.

Les formes liées au rouge et au vert sont de loin les plus fréquentes, et elles touchent bien plus d’hommes que de femmes. Au total, environ 8 % des hommes et 0,5 % des femmes sont concernés, soit environ 1 homme sur 12 et 1 femme sur 200.

Quelles couleurs les personnes daltoniennes confondent-elles ?

Pour les formes liées au rouge et au vert (protan et deutéran), la confusion touche l’axe du rouge au vert. Mais ce qui compte n’est pas la teinte seule : c’est la teinte combinée à la clarté (le fait d’être plus ou moins clair). Deux couleurs de teintes différentes et de même clarté peuvent devenir presque identiques.

Le tableau montre trois paires telles que les simule notre outil. Le ratio indiqué avec chaque paire est son ratio de contraste WCAG, qui mesure l’écart de clarté (voir Comprendre le contraste WCAG). La colonne « Écart perçu » indique à quel point deux couleurs se distinguent : 0 signifie qu’elles sont identiques, et sous 10 elles se confondent.

Le rouge #d62728 et le vert #2ca02c n’ont que 1,47 : 1 de ratio de contraste : ils ont presque la même clarté. Sous deutéranopie, leur écart perçu tombe à 4,7, alors qu’il reste de 27,3 sous protanopie, où le rouge paraît beaucoup plus sombre : testez donc chaque type. Le bleu #2f5fd0 et le violet #7a3fb0 s’écartent de 17,4 en vision normale, mais seulement de 7,3 sous protanopie et de 4,9 sous deutéranopie.

Concevoir un site web lisible par les personnes daltoniennes

Ne jamais donner une information par la couleur seule

C’est la règle de base (critère WCAG 1.4.1, critère RGAA 3.1) : doublez toujours la couleur d’un texte, d’une icône, d’un soulignement ou d’un motif. Les cas concrets (formulaires, liens, pastilles, graphiques) sont détaillés dans notre guide Information donnée uniquement par la couleur.

Faire varier la clarté, pas seulement la teinte

Deux couleurs de clartés nettement différentes restent en général distinctes, quel que soit le type de daltonisme. Reprenons notre rouge et notre vert, mais avec un rouge foncé #af1b00 et un vert clair #68c478. Leur ratio passe à 3,27 : 1, et leur écart perçu reste de 46,8 sous protanopie, 27,8 sous deutéranopie et 60,1 sous tritanopie. Aucune paire n’est confondue parmi les trois types testés.

Le ratio de contraste WCAG mesure justement cet écart de clarté (voir Comprendre le contraste WCAG). Pour le vérifier sur toute une charte, suivez notre guide Créer une palette de couleurs accessible.

Tester avec un simulateur de daltonisme

Le simulateur propose deux modes. L’image que vous déposez reste dans votre navigateur.

• Palette : vous saisissez vos couleurs, l’outil les affiche sous chaque type de daltonisme et liste les paires qui se confondent alors qu’elles sont distinctes en vision normale.
• Image : vous déposez une capture d’écran, une maquette ou un graphique, et vous le voyez comme le voit une personne daltonienne.

Vous choisissez les types à simuler, un ou plusieurs. Pour les formes « -omalie » (protanomalie, deutéranomalie, tritanomalie), un curseur règle la sévérité de 10 à 100 %, car l’atteinte varie d’une personne à l’autre.

Quand une paire se confond, le simulateur propose aussi des couleurs proches qui évitent la confusion : des versions plus claires ou plus sombres de la couleur concernée, que vous pouvez appliquer d’un clic. Vous pouvez ouvrir le simulateur en mode image (nouvel onglet) pour tester une capture de votre site.

Les limites des simulations

Une simulation est un outil de repérage, pas un diagnostic. Quelques précautions :

• Ce sont des modèles. Notre outil utilise des modèles publiés (Viénot pour la protanopie et la deutéranopie, Brettel pour la tritanopie, Machado pour les formes atténuées). Celui de la tritanomalie reste approximatif. L’écart perçu est calculé avec la formule CIEDE2000.
• Chaque personne est différente. La sévérité, l’éclairage et l’écran changent ce qu’elle perçoit réellement.
• L’achromatopsie est rendue en niveaux de gris. L’outil ne modélise pas la monochromatie des cônes bleus, faute de modèle de référence.
• La simulation ne remplace pas la règle. Elle détecte des confusions, mais seule une information doublée d’un texte, d’une icône ou d’une forme est vraiment fiable.

Pour un produit important, complétez ces tests par un essai avec des personnes concernées.