Guide des palettes adaptées aux daltoniens — règles pratiques pour designers et développeurs

Comparaison des palettes Okabe-Ito et Paul Tol avec des simulations protan, deutan et tritan, et règles de design qui ne reposent pas sur la couleur : contraste de clarté, double codage, critères WCAG.

Si environ un homme sur 12 (ascendance européenne) présente une anomalie rouge-vert, une partie des personnes qui regardent vos graphiques, cartes et tableaux de bord est forcément daltonienne. Bonne nouvelle : quelques règles suffisent à faire disparaître la plupart des problèmes.

Règle 1 — Ne jamais transmettre une information par la seule couleur

Le critère de succès 1.4.1 « Utilisation de la couleur » des WCAG, les règles d'accessibilité du web, stipule que la couleur ne doit pas être le seul moyen visuel de transmettre une information. Pour un champ en erreur, ajoutez à la bordure rouge une icône et un message ; pour les courbes d'un graphique, ajoutez à la couleur des formes, des pointillés et des étiquettes directes.

Règle 2 — Garantir un écart de clarté

Même avec une anomalie de la vision des couleurs, on perçoit bien les différences de clarté. Choisissez des couleurs à distinguer dont la clarté (luminosité) diffère nettement. Vérifier que tout reste lisible en impression noir et blanc est le contrôle le plus simple.

Règle 3 — Éviter les paires rouge-vert, préférer bleu-orange

« Bon = vert, mauvais = rouge » est l'erreur la plus courante. Pour les protans comme pour les deutans, ces deux couleurs deviennent un ocre semblable. Pour opposer deux catégories, le couple bleu ↔ orange est le plus sûr.

Des palettes éprouvées

La palette « Color Universal Design » proposée par Okabe et Ito compte 8 couleurs choisies pour rester distinctes en cas d'anomalie rouge-vert. Le tableau ci-dessous montre les mêmes couleurs converties par une simulation de dichromatie (Machado 2009, intensité 100 %).

Palette Okabe–Ito (8 couleurs) — chaque ligne simule la même couleur pour chaque type
Vision normale	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
Dichromatie protan	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
Dichromatie deutan	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
Dichromatie tritan	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

La palette « bright » de Paul Tol est elle aussi conçue en tenant compte des anomalies de la vision des couleurs et de l'impression en noir et blanc.

Palette Paul Tol bright (7 couleurs)
Vision normale	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
Dichromatie protan	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
Dichromatie deutan	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
Dichromatie tritan	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

À l'inverse, les combinaisons courantes de rouge, de vert et d'orange très saturés se chevauchent pour les protans et les deutans.

Exemple à éviter — combinaison dominée par un rouge et un vert très saturés
Vision normale	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
Dichromatie protan	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
Dichromatie deutan	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
Dichromatie tritan	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

Pour les valeurs continues, une clarté qui varie régulièrement

Pour des valeurs continues comme la température ou la densité, utilisez une échelle séquentielle dont la clarté varie régulièrement dans un seul sens (viridis, cividis, etc.). Cividis a été conçue en tenant compte des anomalies de la vision des couleurs.
L'échelle arc-en-ciel (jet), à la clarté irrégulière, induit en erreur même sans anomalie et fait disparaître l'information dans la zone rouge-vert.
Pour des valeurs qui divergent (hausse et baisse), une échelle divergente bleu-blanc-orange (ou rouge) est plus sûre qu'une échelle rouge-vert.

Texte et contraste

Pour le texte courant, le critère WCAG 1.4.3 recommande un rapport de contraste d'au moins 4,5:1 entre le texte et le fond. Du texte rouge sur fond noir perd beaucoup de contraste pour les protans.
Pour les liens, ne changez pas seulement la couleur : gardez le soulignement.

Ordre de vérification

1. Tout reste-t-il distinct en noir et blanc (niveaux de gris) ?
2. Tout reste-t-il distinct dans le simulateur en protan et en deutan à 100 % ?
3. Y a-t-il, en plus de la couleur, des indices de forme, d'étiquette ou de motif ?
4. Peut-on placer des étiquettes directement sur le graphique, sans légende ?

Si ces quatre points sont respectés, vos documents seront plus lisibles non seulement pour les personnes daltoniennes, mais aussi pour quiconque les regarde sur un écran terne, en impression noir et blanc ou en plein soleil.

Voir dans le simulateur →