Concevoir pour le daltonisme : le guide complet

Environ 300 millions de personnes dans le monde présentent une forme de déficit de la vision des couleurs (DVC). Si votre site, votre application ou votre visualisation de données repose uniquement sur la couleur pour transmettre l’information, une part importante de votre public aura du mal à s’en servir.

Bonne nouvelle : concevoir pour le daltonisme profite à tout le monde. Des choix chromatiques accessibles améliorent la clarté, la lisibilité et l’ergonomie pour l’ensemble des utilisateurs, qu’ils soient daltoniens ou non.

Pourquoi une conception accessible au daltonisme compte

Le déficit de la vision des couleurs touche environ 8 % des hommes et 0,5 % des femmes. Concrètement :

dans une équipe de 20 hommes, 1 à 2 environ présentent un DVC ;
dans un public d’un million de personnes, quelque 80 000 hommes ont une forme de DVC rouge-vert ;
la confusion rouge-vert est la plus fréquente et représente environ 98 % des cas de DVC.

Concevoir pour le daltonisme devient également une obligation réglementaire. Les Règles pour l’accessibilité des contenus Web (WCAG) 2.1 exigent explicitement que l’information transmise par la couleur soit aussi disponible par d’autres moyens.

La règle d’or : ne jamais s’appuyer sur la couleur seule

Le principe le plus important d’une conception adaptée au DVC est simple :

N’utilisez jamais la couleur comme unique moyen de transmettre une information.

Associez toujours la couleur à au moins un autre indice visuel :

des libellés — nommez explicitement la catégorie ou l’état ;
des icônes ou symboles — utilisez des formes indépendantes de la couleur ;
des motifs ou textures — particulièrement utiles dans les graphiques et les cartes ;
la position — servez-vous de l’agencement spatial pour signifier la hiérarchie ;
la forme — employez des formes différentes pour des catégories différentes.

Évitez les combinaisons problématiques

Certaines paires de couleurs sont particulièrement difficiles à distinguer pour les personnes ayant un DVC rouge-vert :

Combinaisons à haut risque, à éviter

À éviter	Pourquoi	Alternative
Rouge sur vert	Totalement invisible pour les deutéranopes	Bleu sur orange
Vert sur rouge	Même problème	Jaune sur bleu
Boutons rouge et vert	Impossible de distinguer réussite et échec	Ajoutez des icônes (✓/✗) et du texte
Texte rouge et noir	Le rouge peut paraître gris foncé	Utilisez le gras ou le souligné pour insister
Rose et gris	Identiques pour les protanopes	Bleu et gris

Combinaisons plus sûres

Pour les personnes avec un DVC rouge-vert, bleu et orange constitue la paire accessible la plus fiable : ces teintes restent distinctes dans pratiquement tous les types de DVC.

Autres paires sûres :

bleu + jaune (excellent pour les DVC rouge-vert comme bleu-jaune) ;
bleu + blanc ;
noir + jaune (contraste maximal) ;
violet + jaune.

Concevoir des graphiques accessibles

La visualisation de données est le domaine où le daltonisme pèse le plus. Erreurs courantes :

utiliser rouge/vert pour les valeurs positives et négatives ;
employer des cartes de chaleur avec un dégradé rouge-jaune-vert ;
distinguer plusieurs séries uniquement par la couleur.

Solutions pour les graphiques

1. Ajoutez des motifs de remplissage en plus des couleurs Hachures, points ou quadrillages permettent aux zones de rester distinctes même si les couleurs se ressemblent.

2. Étiquetez les données directement Plutôt que de vous reposer sur une légende colorée, étiquetez les séries directement sur le graphique. Cela aide tout le monde, pas seulement les personnes daltoniennes.

3. Utilisez une palette adaptée au DVC Palettes accessibles recommandées :

palette Okabe-Ito : conçue spécifiquement pour l’accessibilité DVC dans les figures scientifiques ;
palettes ColorBrewer : palettes issues de la recherche, pour cartes et graphiques ;
utilisez notre simulateur de daltonisme pour vérifier que vos graphiques restent lisibles sous simulation DVC.

4. Proposez des formats alternatifs Accompagnez chaque graphique d’une vue tableau ou d’un téléchargement des données, afin que les personnes gênées par la représentation visuelle accèdent tout de même à l’information.

Formulaires et états d’interface

Les formulaires sont particulièrement à risque pour les utilisateurs DVC, car les indicateurs d’état reposent souvent sur la couleur :

Problèmes courants

bordure rouge sur les champs invalides, verte sur les champs valides ;
« Statut : actif » affiché uniquement en texte vert ;
messages d’erreur affichés uniquement en rouge.

Alternatives accessibles

États de validation :

❌ À éviter : bordure rouge = erreur, bordure verte = succès
✅ À faire :  icône d’erreur (⚠) + bordure rouge + texte d’erreur explicite
              icône de succès (✓) + bordure verte + texte « Tout est bon ! »

Indicateurs d’état :

❌ À éviter : • (point vert) = En ligne, • (point rouge) = Hors ligne
✅ À faire :  ✓ En ligne, ✗ Hors ligne (ou des formes distinctes : ●/○)

Boutons et appels à l’action :

❌ À éviter : « Confirmer » vert / « Annuler » rouge — identiques pour les protanopes
✅ À faire :  libellés clairs + contraste suffisant + icônes

Exigences de contraste (WCAG)

Au-delà du choix des couleurs, un rapport de contraste suffisant est indispensable à la lisibilité. Utilisez notre vérificateur de contraste pour contrôler vos combinaisons.

Exigence	Rapport minimal	Contexte
WCAG AA	4,5:1	Texte normal (moins de 18 pt)
WCAG AA	3,0:1	Grand texte (18 pt et plus, ou 14 pt gras)
WCAG AAA	7,0:1	Renforcé — texte normal
WCAG AAA	4,5:1	Renforcé — grand texte

Important : ces rapports se mesurent entre la luminance du texte et celle du fond et doivent être respectés pour tous les profils d’utilisateurs, y compris sous simulation DVC.

Tester vos maquettes

Testez toujours vos créations par plusieurs méthodes :

1. Utilisez un simulateur DVC

Importez des captures dans le simulateur ColorVision pour voir le rendu de vos maquettes avec chaque type de DVC. Testez les quatre : protanopie, deutéranopie, tritanopie et achromatopsie.

2. Utilisez les outils du navigateur

Chrome et Firefox intègrent une simulation DVC :

Chrome : DevTools → Rendering → Emulate vision deficiencies
Firefox : DevTools → Accessibility → Simulate

3. Vérifiez les rapports de contraste

Passez chaque combinaison texte/fond dans un vérificateur de contraste qui propose aussi une simulation DVC.

4. Recueillez de vrais retours

Si possible, faites tester par des personnes réellement daltoniennes. Elles repèrent souvent des problèmes que les simulations manquent.

Conseils par plateforme

Conception web

Ajoutez des attributs aria-label et title aux éléments codés par couleur
Ne définissez pas les états :focus uniquement par la couleur
Veillez à ce que les erreurs de formulaire associent icône et texte, pas seulement un changement de couleur

Science des données et recherche

Adoptez la palette Okabe-Ito par défaut dans R, Python (matplotlib) ou toute bibliothèque de graphiques
Incluez toujours une légende avec des libellés, même si les couleurs semblent évidentes

Applications mobiles

iOS et Android proposent une simulation DVC dans leurs réglages d’accessibilité
Testez votre application avec ces réglages activés avant chaque version majeure

Impression

N’employez pas la métaphore du feu tricolore rouge/vert pour signaler un état
Assurez-vous que vos infographies restent compréhensibles une fois photocopiées en noir et blanc

Outils recommandés

Outil	Usage
Simulateur ColorVision	Simuler le rendu de n’importe quelle image avec un DVC
Vérificateur de contraste	Contrôler la conformité WCAG avec aperçu DVC
Colour Oracle (application bureau)	Superposition de simulation DVC pour tout le système
Who Can Use	Simule les rapports de contraste selon différents handicaps
Plugin d’accessibilité Figma	Contrôles DVC en temps réel dans Figma

Questions fréquentes

Concevoir pour les daltoniens impose-t-il de renoncer à la couleur ? Non. La couleur reste pleinement utilisable : elle ne peut simplement pas être le seul vecteur d’information. Ajoutez des indices secondaires (texte, icônes, motifs) en complément.

Le rouge-vert est-il le seul type de daltonisme à prendre en compte ? Le DVC rouge-vert couvre environ 98 % des cas, mais concevoir pour lui aide généralement aussi les autres profils. L’approche la plus inclusive consiste à tester tous les types avec un simulateur.

Les personnes daltoniennes utilisent-elles des lecteurs d’écran ? Pas nécessairement. Le DVC n’est pas la cécité. Les personnes concernées ont en général une acuité visuelle complète et n’utilisent pas de lecteur d’écran ; elles ont besoin d’indices visuels indépendants de la couleur, pas de texte alternatif.

Quel est le meilleur outil gratuit pour vérifier l’accessibilité au daltonisme ? Le simulateur et le vérificateur de contraste de ce site sont entièrement gratuits. Pour Figma, le plugin gratuit « Able » offre un contrôle de contraste en temps réel.

Réponse rapide