Daltonisme et conception web : ce qu'il faut savoir

Plus courant que la plupart des concepteurs ne le pensent

La déficience de la vision des couleurs — communément appelée daltonisme — touche environ 8 % des hommes et 0,5 % des femmes. Cela représente environ 1 homme sur 12 et 1 femme sur 200, ce qui la rend plus répandue que la plupart des autres handicaps que traitent les normes d’accessibilité web.

Pourtant, elle est régulièrement négligée dans la conception. Les équipes testent avec des lecteurs d’écran et la navigation au clavier, lancent une analyse WCAG automatisée, et considèrent le travail d’accessibilité comme terminé — sans jamais vérifier si leur palette de couleurs est lisible pour les utilisateurs daltoniens.

Comprendre le daltonisme, et ce qu’il fait réellement aux interfaces web que vous concevez, est la première étape pour le corriger.

Les types et leurs effets

La déficience de la vision des couleurs se présente sous plusieurs formes, et elles ne produisent pas toutes la même expérience.

Déficiences rouge-vert (les plus courantes)

Protanopia — absence complète des photorécepteurs (cônes) du rouge. Le rouge apparaît sombre ou noir. Les distinctions rouge-vert sont perdues.

Protanomalie — sensibilité au rouge réduite. Le rouge, l’orange et le jaune se décalent vers le vert, et l’expérience globale est plus terne, comme si le canal rouge avait été atténué.

Deuteranopia — absence complète des cônes du vert. La forme la plus courante de daltonisme. Le vert et le rouge sont confondus ; le monde semble filtré à travers une lentille jaune-brun.

Deutéranomalie — sensibilité au vert réduite. Semblable à la deuteranopia mais plus légère. Le type le plus répandu globalement, touchant environ 5 % des hommes.

Déficiences bleu-jaune (plus rares)

Tritanopia — absence des cônes du bleu. Le bleu apparaît vert, et le jaune apparaît pâle ou invisible. Rare.

Tritanomalie — sensibilité au bleu réduite. Le bleu-vert et le rouge-violet sont confondus.

Monochromatisme (très rare)

Achromatopsia — absence de tous les cônes de couleur. Seule la luminosité est perçue ; le monde apparaît en nuances de gris. Souvent accompagnée d’une sensibilité à la lumière et d’une acuité visuelle réduite.

Comment le daltonisme casse les schémas web courants

Connaître les types de manière abstraite est moins utile que de savoir quelles décisions de conception précises posent problème. Voici les plus courantes.

États d’erreur signalés uniquement par le rouge

Rendre rouge la bordure d’un champ de formulaire pour indiquer une erreur de validation est l’un des schémas les plus répandus dans la conception web. Pour les utilisateurs ayant une déficience rouge-vert, le rouge sur blanc ou le rouge sur gris peut être presque invisible, ou impossible à distinguer d’un état normal non focalisé.

Cela est couvert directement par WCAG 2.2 1.4.1 Utilisation de la couleur (niveau A) : la couleur ne doit pas être le seul moyen de véhiculer une information, d’indiquer une action, d’inciter à une réponse ou de distinguer un élément visuel.

La correction est simple : associez la couleur à un second indicateur visuel — une icône, une étiquette texte, un changement d’épaisseur de bordure, ou tout autre signal non coloré.

<!-- S'appuie uniquement sur la couleur : échoue à 1.4.1 -->
<input type="email" class="field--error">

<!-- Couleur plus icône plus texte : réussit -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Saisissez une adresse e-mail valide.
  </p>
</div>

Contraste insuffisant

Le faible contraste est un problème distinct du daltonisme, mais les deux se recoupent. De nombreuses palettes de couleurs qui semblent lisibles pour une vision des couleurs typique deviennent encore plus difficiles à lire en cas de déficience de la vision des couleurs, car la différence perçue entre le premier plan et l’arrière-plan se réduit davantage.

WCAG 1.4.3 exige un rapport de contraste minimum de 4,5:1 pour le texte normal et de 3:1 pour le grand texte. Tester le contraste avec un outil comme le sélecteur de couleurs des DevTools du navigateur ou un vérificateur dédié n’est pas négociable — ne vous fiez pas à l’inspection visuelle.

Visualisation de données encodée uniquement par la couleur

Un diagramme circulaire à six segments différenciés uniquement par la couleur. Une carte avec un dégradé du rouge au vert. Un graphique linéaire où quatre jeux de données se distinguent uniquement par la teinte.

Pour les utilisateurs atteints de deuteranopia, le rouge et le vert deviennent impossibles à distinguer. Le sens du graphique s’effondre entièrement. Pour en savoir plus, consultez notre guide sur la visualisation de données accessible.

Liens qui reposent uniquement sur la couleur pour se démarquer du corps du texte

Par défaut, les navigateurs soulignent les liens. De nombreux concepteurs suppriment ce soulignement et s’appuient uniquement sur la couleur pour distinguer les liens du texte environnant. Les utilisateurs ayant une déficience de la vision des couleurs — et surtout ceux qui utilisent des thèmes à faible contraste — peuvent ne pas parvenir à identifier les liens du tout.

WCAG 1.4.1 s’applique aussi ici. Si la couleur du lien est le seul indicateur visuel (pas de soulignement, pas de gras, aucun autre élément différenciateur), le lien n’est pas accessible pour les utilisateurs daltoniens.

La correction la plus simple : rétablir le soulignement. Sinon, assurez-vous que la couleur du lien présente un contraste suffisant à la fois avec la couleur du corps du texte et avec l’arrière-plan.

Concevoir en tenant compte du daltonisme

Utilisez un encodage redondant

Ajoutez un second canal visuel à côté de la couleur. Dans les graphiques : ajoutez des motifs, des textures ou des étiquettes de données. Dans les indicateurs d’état : ajoutez des icônes. Dans les états de formulaire : ajoutez du texte. L’objectif est que quelqu’un qui retire entièrement la couleur de la conception puisse toujours tout comprendre.

Testez avec des outils de simulation

Chrome DevTools dispose d’une simulation de daltonisme intégrée. Ouvrez DevTools > panneau Rendering > « Emulate vision deficiencies ». Vous pouvez simuler protanopia, deuteranopia, tritanopia et achromatopsia.

Figma et d’autres outils de conception disposent de plugins similaires. Lancer une simulation prend quelques secondes et révèle souvent des problèmes qui n’étaient pas visibles dans l’aperçu standard.

Vérifiez votre palette dans son ensemble

Ne testez pas seulement des paires d’éléments individuelles. Regardez la palette complète dans son ensemble : couleurs primaire, secondaire, d’erreur, de succès, d’avertissement et d’information. Sous simulation de deuteranopia, le rouge d’erreur et le vert de succès se ressemblent-ils ? Si c’est le cas, vous avez un problème, que vos rapports de contraste passent techniquement ou non.

Évitez les combinaisons problématiques

Particulièrement peu fiables en cas de déficience de la vision des couleurs :

• Rouge et vert
• Vert et marron
• Bleu et violet
• Vert et gris
• Vert et noir

Lorsque ces paires doivent apparaître dans le même contexte, différenciez-les par la clarté ou le motif plutôt que par la teinte.

Ce que WCAG couvre et ne couvre pas

WCAG couvre le contraste des couleurs (1.4.3, 1.4.11) et l’interdiction d’utiliser la couleur comme seul moyen de véhiculer une information (1.4.1). Il ne précise pas quelles couleurs vous pouvez ou ne pouvez pas utiliser, ni n’exige que toute votre palette soit perceptible sous chaque type de déficience de la vision des couleurs.

Ce qu’il exige, c’est qu’aucun sens ne soit perdu lorsque la couleur est retirée. C’est le test pratique. Retirez la couleur de votre conception. Chaque élément d’information reste-t-il accessible par d’autres moyens ?

Si la réponse est oui, vous avez satisfait à l’exigence. Si les états d’erreur disparaissent, si les données des graphiques deviennent ambiguës, si les liens deviennent invisibles — vous avez du travail à faire.

Nos audits d’accessibilité incluent l’accessibilité des couleurs comme partie standard de l’examen. Si vous voulez savoir où en est votre conception actuelle, lancez une analyse automatisée gratuite pour détecter les problèmes automatisables comme point de départ.