Les couleurs : un enjeu d'accessibilité majeur
« Mais on va devoir tout mettre en noir et blanc ? ». Non. C'est le premier malentendu que je dois corriger à chaque formation sur les couleurs. Le thème 3 du RGAA impose deux règles fondamentales : un contraste suffisant entre le texte et le fond, et l'information ne doit pas être transmise uniquement par la couleur. Et quand on sait qu'environ 4 % des hommes en France sont daltoniens — soit 3,2 millions de personnes — on comprend vite pourquoi.
Les ratios de contraste WCAG
Gardez ce tableau sous le coude, vous en aurez besoin régulièrement :
| Type | Ratio AA (minimum) | Ratio AAA (amélioré) |
|---|---|---|
| Texte normal (< 18px) | 4.5:1 | 7:1 |
| Grand texte (≥ 18px ou 14px gras) | 3:1 | 4.5:1 |
| Éléments graphiques / UI | 3:1 | — |
| Texte inactif / décoratif | Pas d'exigence | — |
Outils de vérification des contrastes
Voici ma boîte à outils — vous n'avez pas besoin de tous les utiliser, choisissez celui qui colle à votre workflow :
- Colour Contrast Analyser (CCA) : application desktop gratuite avec une pipette pour picker les couleurs directement sur l'écran. Mon outil de prédilection
- WebAIM Contrast Checker : outil en ligne, rapide et efficace pour vérifier un couple de couleurs en deux clics
- Chrome DevTools : le sélecteur de couleur CSS intègre déjà un indicateur de ratio — pas besoin d'installer quoi que ce soit
- Stark (Figma/Sketch) : plugin indispensable pour les designers qui veulent vérifier les contrastes directement dans les maquettes
- RGAA Test : détecte automatiquement les problèmes de contraste sur votre site en ligne
Ne pas transmettre l'information par la couleur seule
Le RGAA critère 3.1 l'interdit formellement. Et concrètement, voici les pièges classiques dans lesquels tout le monde tombe :
- Liens dans le texte : si vos liens ne se distinguent que par la couleur, les daltoniens ne les voient pas. Soulignez-les ou utilisez un autre indicateur visuel comme le gras
- Erreurs de formulaire : marquer un champ en erreur uniquement en rouge, c'est invisible pour beaucoup de gens. Ajoutez une icône et un message texte
- Graphiques : utilisez des motifs (rayures, points, hachures) en plus des couleurs pour différencier les séries de données
- Statuts : « En ligne » (vert) / « Hors ligne » (rouge) — sans texte ou icône, c'est incompréhensible pour un daltonien rouge-vert
Concevoir pour le daltonisme
Types de daltonisme
Le daltonisme n'est pas un seul trouble, c'est une famille de déficiences visuelles :
- Protanopie/Deutéranopie (rouge-vert) : le plus courant et de loin — 8 % des hommes sont concernés
- Tritanopie (bleu-jaune) : rare (0,01 %)
- Achromatopsie (absence totale de perception des couleurs) : très rare mais existe
Couleurs à éviter ensemble
Ces combinaisons sont des mines antipersonnel pour les daltoniens :
- Rouge et vert — le classique rouge=erreur, vert=succès. Ajoutez toujours des icônes en complément
- Vert et orange — pratiquement identiques pour beaucoup de daltoniens
- Bleu et violet — confusion fréquente, surtout sur écran
Outils de simulation
Vous voulez voir votre site comme un daltonien ? Ces outils simulent les différentes déficiences :
- Chrome DevTools : Rendering > Emulate vision deficiencies — c'est intégré, pas besoin d'extension
- Figma : plugin Color Blind pour simuler les différentes visions directement sur vos maquettes
- Sim Daltonism (Mac) : application qui filtre tout votre écran en temps réel, très bluffant
Créer une palette accessible
Bon allez, concrètement, voici la méthode en 5 étapes :
- Choisissez vos couleurs de marque
- Vérifiez les contrastes texte/fond pour chaque combinaison possible — c'est là que ça coince souvent
- Créez des variantes claires et foncées pour chaque couleur de base
- Testez avec un simulateur de daltonisme — ça prend 2 minutes
- Documentez les combinaisons autorisées dans un design system — vos collègues vous remercieront
Une palette accessible n'est pas une palette ennuyeuse. J'ai vu des identités visuelles magnifiques et parfaitement accessibles. Des couleurs vives et saturées peuvent respecter les ratios de contraste. L'accessibilité est une contrainte créative, pas une limitation.