Le daltonisme sur le web : définition et conception adaptée

Qu'est-ce que le daltonisme ?

Nous percevons les couleurs grâce à trois types de cônes présents dans la rétine. Chaque type réagit à une gamme de lumière différente : rouge, verte ou bleue. Si un type de cône fonctionne moins bien ou pas du tout, la perception des couleurs peut être altérée.

À proprement parler, il existe deux formes :

• Déficience de la vision des couleurs : L'être humain peut voir toutes les couleurs, mais certaines sont perçues plus faiblement. Le rouge et le vert, par exemple, se ressemblent beaucoup.

• Daltonisme : Certaines personnes ne perçoivent absolument aucune couleur. Dans le cas d'un daltonisme total, appelé achromatopsie, elles ne voient que des nuances de gris.

Dans le langage courant, le terme « daltonisme » est souvent utilisé pour désigner les deux. La plupart des personnes atteintes présentent une déficience de la vision des couleurs, et non un daltonisme complet.

Les types les plus courants

• Déficience rouge-vert : C'est de loin la forme la plus courante. Il est difficile de distinguer le rouge du vert. Selon le cône touché, on parle de protanomalie ou de protanopie (rouge) et de deutéranomalie ou de deutéranopie (vert).

• Déficience bleu-jaune (tritanomalie ou tritanopie) : Rare. Le bleu et le vert, ainsi que le jaune et le rose, sont difficiles à distinguer.

• Daltonisme complet (achromatopsie) : Très rare. Les personnes atteintes ne voient que la lumière et l'obscurité, et sont souvent très sensibles à l'éblouissement.

_{Figure 1 : Simulation de différents daltonismes. Original (en haut à gauche), daltonisme rouge (en haut à droite), daltonisme vert (en bas à gauche) et daltonisme bleu (en bas à droite).}

Combien de personnes sont concernées ?

Selon le portail du ministère fédéral allemand de la Santé gesund.bund.de Environ 8 % des hommes et 0,4 % des femmes présentent un daltonisme. Dans un groupe de 25 hommes, deux sont statistiquement concernés. Le daltonisme total, quant à lui, est très rare : en Allemagne, on ne compte qu’environ 2 700 personnes atteintes.

Les hommes sont beaucoup plus souvent touchés car les gènes des cônes rouges et verts se trouvent sur le chromosome X. Les hommes ne possèdent qu'un seul chromosome X ; par conséquent, une mutation de ce gène a un effet direct. Les femmes, quant à elles, en possèdent deux et sont généralement porteuses asymptomatiques.

La vision des couleurs peut également évoluer au cours de la vie, notamment en raison de maladies oculaires. De plus, de nombreuses personnes perçoivent moins nettement les couleurs dans certaines situations, par exemple sur un téléphone en plein soleil.

Quels sont les éléments des sites web qui posent problème ?

Le daltonisme devient un obstacle lorsque la couleur est le seul moyen de transmettre des informations. Exemples typiques :

• Liens dans le texte : Si les liens sont uniquement marqués par une couleur, sans soulignement, beaucoup de gens ne peuvent pas les voir.

• Messages d'erreur et de réussite : Un cadre rouge autour d'un champ de formulaire ou une coche verte ne suffisent pas.

• Cartes et graphiques : Des lignes, des barres ou des zones qui ne diffèrent que par leur couleur sont indiscernables.

• Affichage de l'état : Les indicateurs rouges, oranges et verts, comme ceux relatifs à la disponibilité ou à l'état de la livraison, deviennent illisibles.

• Boutons et sélections : Si l'état actif n'est indiqué que par un changement de couleur, les utilisateurs ne savent pas ce qui est sélectionné.

• Faible contraste : Un texte gris clair sur fond blanc ou un texte superposé à des images est difficile à lire – et pas seulement pour les personnes atteintes de daltonisme.

• Espaces réservés dans les formulaires : Le texte d'espace réservé gris clair est souvent difficile à distinguer du texte déjà saisi.

Le problème est répandu. Selon les WebAIM Million 2026 83,9 % des pages d'accueil des 1 million de sites web les plus populaires présentaient un texte avec un contraste insuffisant.

La figure 2 montre à quoi peut ressembler un graphique pour une personne atteinte de daltonisme (prosopagnosie) :

^{Figure 2 : À gauche, le diagramme inchangé ; à droite, la cécité verte simulée.}

Ce dont a besoin WCAG

Les directives d’accessibilité du contenu Web (WCAG) contiennent trois critères de succès particulièrement importants pour la couleur :

• 1.4.1 Utilisation de la couleur (niveau A) : La couleur ne doit pas être le seul moyen visuel de transmettre des informations, d'indiquer une action ou de distinguer un élément.

• 1.4.3 Contraste (minimum) (niveau AA) : Le texte doit présenter un rapport de contraste d'au moins 4,5:1 par rapport à son arrière-plan, et d'au moins 3:1 pour les grands caractères.

• 1.4.11 Contraste non textuel (niveau AA) : Les boutons, les bordures des champs de formulaire, les indicateurs de focus et les éléments graphiques importants nécessitent un rapport de contraste d'au moins 3:1.

Ces critères font partie de la norme européenne EN 301 549, sur laquelle les Loi européenne sur l'accessibilité est basé.

Conseils pour une conception web accessible aux personnes ayant une vision des couleurs

1. N’utilisez jamais la couleur seule : Associez la couleur au texte, aux icônes, aux motifs ou au soulignement. Un message d'erreur doit comporter un texte clair, et non pas seulement un cadre rouge.

2. Liens soulignés : Les liens dans le texte doivent être soulignés ou autrement signalés de manière visible.

3. Vérifier le contraste : Utilisez un vérificateur de contraste pour vous assurer que le texte et les éléments importants respectent les valeurs WCAG.

4. Étiquetez directement les graphiques : Ajoutez des étiquettes à côté des lignes et des barres plutôt que d'utiliser uniquement une légende de couleurs. Les motifs ou les différents styles de lignes peuvent également être utiles.

5. Évitez les combinaisons de couleurs critiques : Pour beaucoup de gens, il est difficile de distinguer le rouge et le vert, le vert et le marron, le bleu et le violet.

6. Testez avec une simulation : De nombreux outils de conception et de développement pour navigateurs peuvent simuler différents déficits de la vision des couleurs. Cela permet de repérer rapidement les zones de perte d'informations.

7. Pensez au-delà du daltonisme : Un bon contraste et des signaux clairs aident également les personnes âgées, les personnes malvoyantes et toute personne utilisant un téléphone à l'extérieur.

Notre guide de conception accessible avec WCAG et notre article sur formulaires en ligne accessibles contiennent des conseils plus pratiques.

Comment Eye-Able vous aide

La conception accessible est fondamentale. De plus, Eye-Able Assist Ce service permet aux visiteurs de personnaliser un site web selon leurs besoins. Un mode spécial ajuste les couleurs pour les personnes daltoniennes ou présentant une déficience de la vision des couleurs, et le mode contraste facilite la lecture du texte.

^{Figure 3 : Illustration de la correction des couleurs à l'aide d'images de test d'Ishihara (Source : Wellcome collection CC BY 4.0)}

La figure 3 montre comment le mode couleur permet de rendre à nouveau visibles les différences dans les images du test d'Ishihara. Augmenter le contraste ou la saturation des couleurs peut également s'avérer utile. Le feu tricolore de la figure 4 en est un autre exemple.

^{Figure 4 : Feu tricolore avec couleurs normales (à gauche), feu tricolore pour les personnes atteintes de déficience du rouge (au milieu), feu tricolore pour les personnes atteintes de déficience du rouge après la correction Eye-Able (à droite)}

L’assistance ne remplace toutefois pas la conception accessible. La conformité d’un site web aux exigences de contraste de la norme WCAG dépend de sa conception et de sa mise en œuvre. Audit et rapport Eye-Able Vous pouvez ainsi vérifier votre site web pour détecter les erreurs de contraste et autres obstacles, et les corriger à la source.

Conclusion

Environ un homme sur douze souffre de daltonisme. Pour lui, les informations véhiculées uniquement par la couleur sont inexploitables. La solution est simple : ne jamais utiliser la couleur seule, assurer un contraste suffisant et tester son design à l’aide d’une simulation. Ainsi, les sites web deviennent plus accessibles à tous.

Vous vous demandez à quel point votre propre site web est accessible ? vérification d'accessibilité gratuite vous donne un premier aperçu en moins de 2 minutes.

FAQ : le daltonisme sur le web

Le daltonisme est-il fréquent ?

Environ 8 % des hommes et 0,4 % des femmes présentent un daltonisme. La forme la plus courante est le daltonisme rouge-vert. Le daltonisme total, où les personnes ne perçoivent que des nuances de gris, est très rare.

Quelle est la différence entre le daltonisme et la déficience de la vision des couleurs ?

Les personnes atteintes de déficience de la vision des couleurs perçoivent toutes les couleurs, mais certaines plus faiblement. Les personnes daltoniennes ne perçoivent pas du tout une ou plusieurs couleurs. Dans le langage courant, le terme « daltonisme » est souvent utilisé pour désigner les deux.

Quelles couleurs dois-je éviter pour les personnes daltoniennes ?

Évitez d'associer le rouge et le vert, le vert et le marron, ou le bleu et le violet pour indiquer une différence. Surtout, n'utilisez jamais la couleur comme unique signal : ajoutez toujours du texte, des icônes ou des motifs.

Que disent les fichiers WCAG à propos de la couleur ?

Le critère de succès 1.4.1 d'WCAG stipule que la couleur ne doit pas être le seul moyen de transmission d'informations. De plus, le texte doit présenter un rapport de contraste d'au moins 4,5:1 (1.4.3), et les boutons, les champs de formulaire et les éléments graphiques importants, un rapport d'au moins 3:1 (1.4.11).

Comment puis-je tester la compatibilité de mon site web avec les personnes daltoniennes ?

Utilisez la simulation de déficience de la vision des couleurs intégrée à votre outil de conception ou aux outils de développement de votre navigateur pour visualiser votre site web tel qu'il apparaît aux personnes atteintes de différents types de daltonisme. Un vérificateur de contraste ou un contrôle d'accessibilité automatisé permet de détecter les erreurs de contraste.