Comment créer une palette de couleurs adaptée aux daltoniens

Environ 1 homme sur 12 présente une forme de déficience de la vision des couleurs. Les recommandations de design s’arrêtent généralement à « n’associez pas le rouge et le vert », un conseil à la fois trop vague pour être appliqué et pas tout à fait la vraie règle.

La vraie règle

Ce n’est pas que le rouge et le vert deviennent identiques. Une personne deutéranope distingue généralement encore un rouge d’un vert, car les deux diffèrent normalement en luminosité autant qu’en teinte.

Ce qui se confond, c’est une paire qui ne diffère que sur l’axe rouge-vert, à luminosité similaire. C’est cela, la défaillance précise, et c’est pourquoi le conseil vague passe à côté de tant de cas réels, y compris des paires qui ne contiennent ni rouge ni vert.

Le bleu et le violet en sont l’exemple le plus frappant. Ils paraissent nettement différents pour une vision typique, avec une distance perceptuelle d’environ 15. En deutéranopie, elle tombe sous 1. Ils deviennent la même couleur, et personne ne vous met en garde contre le bleu et le violet.

Les deux propriétés qui résistent

La luminosité. Aucune déficience rouge-vert ne l’affecte. Deux couleurs nettement espacées en luminosité restent distinguables quoi que fassent les cônes. C’est l’outil le plus fiable dont vous disposez.

L’axe bleu-jaune. Il reste largement intact en protanopie et en deutéranopie, qui représentent ensemble l’écrasante majorité des cas. Le bleu face à l’orange est l’association de deux couleurs la plus robuste qui soit : à la mesure, il se distingue souvent davantage en deutéranopie qu’avec une vision typique.

Les déficiences tritan affectent bien l’axe bleu-jaune, mais elles sont assez rares, environ 0.01%, pour que le bleu-orange reste le bon choix par défaut.

Construire une palette catégorielle

Deux catégories. Bleu et orange. C’est un problème quasiment résolu : utilisez cette paire et passez à autre chose.

Trois. Bleu, orange, et une troisième couleur séparée avant tout par la luminosité, un neutre très sombre ou très clair. Ne prenez pas le vert comme troisième couleur.

Quatre. Bleu, orange, plus un neutre clair et un neutre sombre. Vous approchez de la limite pratique de ce que la couleur peut porter seule.

Cinq ou plus. La couleur n’est plus un encodage fiable. Il vous faut un second canal : forme, motif, étiquetage direct, position. Ce n’est pas un compromis ; l’étiquetage direct est plus efficace qu’une légende de couleurs pour tous les lecteurs, pas seulement pour les personnes daltoniennes.

Si vous voulez un jeu tout prêt, la palette Okabe-Ito compte huit couleurs conçues exactement pour cela et elle est très utilisée dans l’édition scientifique. Les schémas qualitatifs de Paul Tol sont une autre option éprouvée.

Les couleurs d’état méritent une attention particulière

Le rouge pour l’erreur et le vert pour le succès constituent la défaillance liée au daltonisme la plus courante dans les logiciels, car c’est une convention que personne ne vérifie.

À la mesure, les couleurs danger et success par défaut de Bootstrap sont séparées par une distance perceptuelle d’environ 74 pour une vision typique, et de 4 en deutéranopie. Le red-500 et le green-500 de Tailwind passent de 76 à environ 8. Chaque couleur passe le contraste sur blanc prise isolément, si bien qu’aucun audit de contraste ne les signale.

Trois corrections, de la moins durable à la plus durable :

1. Les écarter en luminosité. Un rouge sombre et un vert clair restent distinguables. C’est le changement le moins coûteux.
2. Quitter l’axe rouge-vert. Le bleu pour le succès est inhabituel, mais parfaitement lisible.
3. Ajouter une icône. Une croix et une coche, ou un triangle d’avertissement. C’est la correction qui satisfait réellement le critère WCAG 1.4.1, et celle qui continue de fonctionner quand la palette est refondue.

Ce qu’exigent les WCAG

Le critère de succès 1.4.1, Utilisation de la couleur, est de niveau A, le palier de base. Il exige que la couleur ne soit jamais le seul moyen visuel de transmettre une information, d’indiquer une action, de solliciter une réponse ou de distinguer un élément.

Notez ce qu’il ne dit pas. Il n’interdit pas les associations rouge-vert et n’impose aucune palette particulière. Il exige une redondance : un autre indice qui porte la même information.

Cette formulation est utile, car elle désigne la correction durable. Une palette sûre est une bonne pratique. Un second indice est l’exigence, et il résiste au jour où quelqu’un d’autre refondra vos couleurs.

Vérifier votre propre travail

La simulation vous indique ce qui risque d’être perdu, pas ce que voit une personne en particulier, et les modèles sont des approximations. Servez-vous-en pour trouver des problèmes, pas pour certifier leur absence.

La question à se poser porte sur les paires, pas sur chaque couleur : quelles sont les deux couleurs de cette palette qu’on ne peut plus distinguer ? Notre simulateur de daltonisme confronte chaque paire à huit types de vision et signale celles qui se confondent, une vérification qu’un outil de contraste est structurellement incapable de faire.