8 % des hommes et 0,5 % des femmes sont daltoniens. Concrètement, sur 1 000 visiteurs de votre site, une cinquantaine voient vos couleurs différemment de ce que vous avez prévu. Et pour une bonne partie d'entre eux, certains éléments de votre interface sont tout simplement illisibles ou incompréhensibles.
Le daltonisme n'est pas un cas marginal. C'est une réalité statistique que la plupart des designers et des propriétaires de site ignorent au moment de faire leurs choix visuels. Voici les 5 erreurs les plus fréquentes, et comment les corriger sans sacrifier l'esthétique de votre site.
Petit rappel : c'est quoi le daltonisme ?
Le daltonisme désigne une anomalie dans la perception des couleurs. Il en existe trois grandes formes. La deutéranopie (la plus répandue) rend difficile la distinction entre le vert et le rouge. La protanopie affecte la perception du rouge, souvent confondu avec le vert et le marron. La tritanopie (rare) crée une confusion entre le bleu et le jaune.
La grande majorité des personnes daltoniennes confondent donc le rouge et le vert, deux couleurs omniprésentes dans les interfaces web pour signifier succès/erreur, validation/refus, positif/négatif.
Erreur n°1 : utiliser uniquement la couleur pour transmettre une information
C'est l'erreur la plus classique. Un bouton vert = valider, un bouton rouge = annuler. Un message vert = succès, un message rouge = erreur. Un graphique avec des barres rouges pour les dépenses, vertes pour les revenus.
Le problème : pour quelqu'un qui ne distingue pas le rouge du vert, tous ces éléments se ressemblent. L'information portée uniquement par la couleur disparaît.
La solution : ne jamais faire de la couleur le seul vecteur d'information. Ajoutez toujours une icône, un label textuel ou un motif pour doubler l'information. Un message d'erreur doit dire « Erreur », pas seulement être rouge.
Erreur n°2 : un contraste insuffisant entre le texte et le fond
Un texte gris clair sur fond blanc peut paraître élégant sur votre écran. Pour un utilisateur daltonien, ce contraste déjà faible peut devenir quasi nul. Les WCAG (Web Content Accessibility Guidelines) définissent des ratios de contraste minimaux : 4,5:1 pour le texte courant, 3:1 pour les grands titres et les composants d'interface.
La solution : testez vos combinaisons de couleurs avec WebAIM Contrast Checker ou Colour Contrast Analyser. Si vous n'atteignez pas le ratio minimal, assombrissez le texte ou éclaircissez le fond.
Erreur n°3 : des formulaires qui signalent les erreurs uniquement en rouge
Vous remplissez un formulaire de contact, vous soumettez, et des champs se bordent en rouge pour indiquer les erreurs. Intuitivement simple, mais invisible pour une personne daltonienne rouge-vert.
La solution : combinez la couleur avec un message texte explicite (« Ce champ est obligatoire », « Format d’e-mail invalide ») et une icône d'alerte (⚠ ou ✕). La bordure rouge peut rester, mais elle ne doit pas être le seul signal. C'est aussi vrai pour les indicateurs de force de mot de passe : ajoutez toujours un label texte (« Faible », « Moyen », « Fort »).
Erreur n°4 : des graphiques et visualisations de données illisibles
Les graphiques construits avec des palettes de couleurs par défaut incluent quasi systématiquement des verts et des rouges côte à côte. Pour une personne daltonienne, deux segments de couleurs « différentes » peuvent paraître identiques, rendant le graphique inexploitable.
La solution : utilisez des palettes accessibles pensées pour le daltonisme (Datawrapper ou Flourish les proposent nativement). Ajoutez des étiquettes directement sur les éléments du graphique plutôt que de vous en remettre à une légende de couleurs. Combinez couleur et motif (hachures, points, traits) pour différencier les séries. L'outil Viz Palette aide à construire des palettes accessibles pour les dataviz.
Erreur n°5 : ne jamais tester son site en mode daltonien
La plupart des sites ne sont jamais testés à travers le prisme du daltonisme. Ce qui paraît évident à un designer à vision normale peut être complètement ambigu pour quelqu'un qui voit les couleurs autrement.
La solution : simulez les différents types de daltonisme sur votre site avant de le publier. Color Oracle est un logiciel gratuit qui simule le daltonisme sur tout votre écran en temps réel. Stark est un plugin Figma et Chrome qui intègre simulations et vérificateurs de contraste directement dans votre outil de design. Chrome DevTools propose une option « Rendering » pour simuler plusieurs types de déficiences visuelles directement sur n'importe quel site.
En résumé : la checklist accessibilité couleurs
L'accessibilité couleur fait partie des piliers d'une bonne expérience utilisateur, un facteur de plus en plus pris en compte par Google dans son classement. Avant de publier une page ou de valider un design, posez-vous ces cinq questions : mon information est-elle compréhensible sans les couleurs ? Mes ratios de contraste texte/fond sont-ils conformes aux WCAG AA (4,5:1) ? Mes formulaires signalent-ils les erreurs avec du texte ET de la couleur ? Mes graphiques sont-ils lisibles avec une palette accessible ? Ai-je testé mon site avec un simulateur de daltonisme ?
FAQ — Daltonisme et accessibilité web
Suis-je légalement obligé de rendre mon site accessible aux daltoniens ?
En France, l'obligation d'accessibilité numérique (RGAA) s'applique aux services publics, aux grandes entreprises (CA > 250 M€) et à certains acteurs spécifiques. Pour les autres, ce n'est pas une obligation légale, mais c'est une bonne pratique qui améliore l'expérience de tous vos visiteurs et peut avoir un impact positif sur votre référencement.
Rendre son site accessible aux daltoniens demande-t-il de tout refaire ?
Pas nécessairement. Beaucoup de corrections sont légères : ajout d'un label texte sur un message d'erreur, ajustement d'une teinte de gris, icône ajoutée à un indicateur. Une refonte complète n'est nécessaire que si les problèmes sont structurels dans la charte graphique.
Le daltonisme affecte-t-il aussi les images et photos ?
Les photos en elles-mêmes ne posent généralement pas de problème. En revanche, si vous utilisez des images pour transmettre une information importante (une flèche rouge sur un schéma, un tableau de données en couleur), les mêmes règles s'appliquent : l'information doit être accessible sans la couleur.
Un site accessible aux daltoniens est-il forcément moins joli ?
Non. Les contraintes d'accessibilité obligent souvent à faire des choix visuels plus clairs et plus lisibles, ce qui profite à tous les utilisateurs. Un bon designer intègre ces contraintes comme des paramètres de design, pas comme des limitations.
Comment savoir si mon site a des problèmes d'accessibilité couleur ?
Commencez par tester vos principales pages avec Color Oracle ou l'option de simulation de Chrome DevTools. Pour un audit complet, un professionnel peut réaliser une analyse WCAG complète et vous donner une liste de corrections priorisées.
Conclusion
Rendre un site accessible aux personnes daltoniennes n'est pas un luxe réservé aux grandes marques. C'est un investissement minimal, souvent quelques ajustements, qui améliore l'expérience de 8 % de vos visiteurs masculins et renforce la qualité globale de votre interface pour tout le monde.
Un site bien conçu, c'est un site que tout le monde peut utiliser. Si vous voulez savoir où en est le vôtre sur ces questions d'accessibilité, contactez-moi pour un audit.
