Comment concevoir des palettes adaptées au daltonisme

La première fois que j'ai vraiment compris le daltonisme, ce n'est pas une spécification qui me l'a appris — c'est une revue de code. J'avais construit un tableau de bord d'état où les points verts signifiaient « en bonne santé » et les points rouges « hors service », et un ingénieur back-end de l'équipe a mentionné, presque en s'excusant, qu'il était incapable de distinguer quels serveurs étaient en feu. Il fait partie des quelque un homme sur douze atteints d'une déficience rouge-vert de la vision des couleurs. Mon magnifique système de feu tricolore n'était, pour lui, qu'une grille de cercles brun-gris identiques. Rien n'était cassé dans le code. Tout était cassé dans le design.

Voilà ce qui caractérise la conception d'une palette adaptée au daltonisme : les défaillances sont invisibles à la personne qui les a livrées. Vous ne pouvez pas sentir le bug. Vous devez donc prendre l'habitude de concevoir comme si la couleur était une information que vous pourriez perdre à tout moment — car pour une part non négligeable de vos utilisateurs, c'est déjà le cas.

À quel point est-ce répandu, et qu'est-ce qui dérape exactement

La déficience de la vision des couleurs (DVC) touche environ 8 % des hommes et 0,5 % des femmes d'origine nord-européenne — soit à peu près 1 homme sur 12 et 1 femme sur 200. Sur un produit avec une audience réelle, ce n'est pas un cas marginal. C'est une colonne de vos statistiques.

La déficience n'est pas « voir en noir et blanc » — la monochromatie véritable est extrêmement rare. Ce qui se produit, c'est qu'un type de cône de l'œil est décalé ou absent, ce qui fait s'effondrer certaines couleurs les unes vers les autres. Les principaux types, par ordre de fréquence :

• Deutéranomalie et deutéranopie — réponse réduite ou absente des cônes verts. C'est le cas majeur : la deutéranomalie à elle seule touche environ 5 % des hommes, ce qui en fait la forme la plus courante. Les rouges, verts, bruns et oranges se confondent.
• Protanomalie et protanopie — réponse réduite ou absente des cônes rouges, environ 1 % des hommes pour la forme complète. Confusion rouge-vert similaire, mais les rouges paraissent aussi plus sombres et peuvent disparaître sur fond noir.
• Tritanopie et tritanomalie — déficience bleu-jaune. Véritablement rare (de l'ordre de 0,01 % et non liée au sexe, donc elle touche hommes et femmes à peu près également), mais à surveiller d'un coup d'œil car elle casse les distinctions bleu-vert et jaune-rose que les autres types laissent intactes.

L'essentiel en pratique : environ 99 % des DVC sont de type rouge-vert. Si votre palette survit à une simulation rouge-vert, vous avez couvert l'écrasante majorité des utilisateurs concernés. C'est là qu'il faut concentrer votre attention en priorité.

C'est un problème distinct du contraste

Voici la distinction qui fait trébucher même les équipes attentives. Le contraste de luminance (celui de WCAG) concerne le clair contre le foncé — pouvez-vous lire le texte. La déficience de la vision des couleurs concerne la confusion des teintes — pouvez-vous distinguer deux couleurs l'une de l'autre lorsqu'elles se trouvent être proches en luminosité. Ce sont des problèmes indépendants, et vous pouvez échouer à l'un tout en excellant à l'autre.

L'exemple classique : du texte rouge pur #FF0000 sur du vert pur #008000 a un contraste de luminance d'environ 1.3:1, ce qui échoue lamentablement à WCAG — mais même si vous « corrigiez » le contraste, une personne deutéranope aurait toujours du mal car les deux teintes elles-mêmes s'effondrent l'une dans l'autre. À l'inverse, deux couleurs peuvent présenter un contraste superbe et constituer malgré tout un piège pour la DVC si vous utilisez leur teinte, et uniquement leur teinte, pour porter le sens.

Une palette adaptée au daltonisme et une palette conforme WCAG sont donc des cercles qui se recoupent, pas un seul et même cercle. Vous avez besoin des deux. Si ce n'est pas déjà fait, il vaut la peine de lire Les ratios de contraste WCAG expliqués en parallèle de cet article — le contraste de luminance est la fondation, et le design adapté à la DVC est la couche par-dessus.

La règle qui résout l'essentiel : ne jamais se fier à la couleur seule

Si vous ne retenez qu'un seul principe de cet article, retenez celui-ci : ne vous fiez pas à la couleur seule pour transmettre une information. Le W3C en fait une exigence explicite — critère de succès WCAG 1.4.1, Utilisation de la couleur — et c'est l'habitude au rendement le plus élevé que vous puissiez bâtir.

La solution passe presque toujours par la redondance. Chaque fois que la couleur porte du sens, associez-la à un second signal, non chromatique :

• Du texte ou des étiquettes. Mon tableau de bord de serveurs s'est amélioré à l'instant même où chaque point a aussi affiché « En ligne » ou « Hors ligne ». Ennuyeux, mais à toute épreuve.
• Des icônes et des formes. Une coche, une croix, un triangle d'avertissement. Les états d'erreur reçoivent une icône différente, pas seulement une couleur différente. C'est pourquoi un bon formulaire affiche une bordure rouge et une icône d'erreur et un message.
• Des motifs et des textures. Dans les graphiques, remplissez les barres ou les régions avec des hachures, des points ou des tirets pour que les catégories diffèrent même en niveaux de gris.
• La position et l'ordre. Une légende qui suit le même ordre de haut en bas que les aires empilées qu'elle décrit permet de faire la correspondance par position, pas par teinte.

Le test rapide que je fais sur n'importe quel écran : imaginez-le imprimé sur une imprimante laser noir et blanc. Si vous arrivez encore à le comprendre, vous ne vous fiez pas à la couleur seule. Si deux états deviennent identiques, vous avez trouvé votre bug.

Choisir des teintes qui survivent à la DVC

La redondance gère le sens. Mais vous voulez tout de même que les couleurs elles-mêmes restent distinguables autant que possible — surtout en visualisation de données, où vous ne pouvez pas coller une étiquette textuelle sur chacun de 200 points de données.

Quelques règles empiriques tirées du terrain :

• Évitez le rouge-vert comme seul contraste. L'appariement « bon/mauvais », « avant/après », « équipe A/équipe B » qui par défaut tombe sur le rouge et le vert est la défaillance de DVC la plus courante. Si vous avez besoin de deux couleurs opposées, le bleu et l'orange forment la paire la plus sûre de la planète — elle reste distincte à travers tous les types de DVC. Le bleu et le rouge constituent un solide deuxième choix.
• Appuyez-vous sur des différences de luminosité, pas seulement de teinte. Si deux catégories diffèrent aussi en luminance, les spectateurs atteints de DVC peuvent les distinguer même quand les teintes s'effondrent. Un bleu clair sur un bleu foncé se lit comme deux choses pour tout le monde.
• Méfiez-vous des teintes intermédiaires. Le sarcelle, l'olive, le brun et les oranges boueux se situent en plein dans la zone dangereuse pour la déficience rouge-vert. Les teintes pures et bien séparées s'en sortent mieux que les teintes troubles.

Plutôt que de réinventer tout cela, montez sur les épaules de ceux qui l'ont résolu avec rigueur. La palette Okabe-Ito (aussi appelée palette Wong, d'après l'article de Bang Wong paru dans Nature Methods en 2011) est un ensemble de huit couleurs conçu pour rester distinguable à travers tous les types courants de DVC. Les codes hexadécimaux méritent d'être mis en favori : orange #E69F00, bleu ciel #56B4E9, vert bleuté #009E73, jaune #F0E442, bleu #0072B2, vermillon #D55E00, pourpre rosé #CC79A7 et noir #000000. Je l'ai utilisée comme palette catégorielle pour plus de tableaux de bord que je ne saurais compter, et elle n'a jamais échoué à une simulation.

Quand vous construisez une palette de marque ou d'interface plutôt qu'un graphique, vous n'avez généralement pas besoin de huit couleurs distinctes pour la DVC — vous avez besoin de quelques accents qui n'entrent pas en collision. C'est là que le générateur de palette de couleurs prend tout son sens : construisez votre harmonie (un schéma complémentaire fractionné ou triadique), relevez les valeurs HSL, puis écartez délibérément vos deux couleurs sémantiquement les plus importantes en luminosité autant qu'en teinte. L'affichage HSL rend cela facile — baissez la luminosité de l'une, montez celle de l'autre, et vous vous offrez une séparation qui survit à la DVC. Si vous voulez comprendre pourquoi certaines relations sur le cercle entrent en conflit plus que d'autres, Palettes complémentaires fractionnées vs triadiques plonge dans la géométrie.

Testez — ne vous fiez pas à vos propres yeux

Vous ne pouvez pas juger cela à l'œil, parce que (statistiquement) vous avez probablement une vision des couleurs normale et que tout l'enjeu est que la défaillance vous soit invisible. Vous simulez.

• Coblis (le simulateur de daltonisme de Colblindor) vous permet de téléverser une capture d'écran et de la visualiser à travers huit types de déficience différents. Tout s'exécute localement dans votre navigateur, vous pouvez donc lui soumettre des exports en pleine résolution. C'est mon outil de prédilection pour vérifier un écran terminé.
• Les outils de développement du navigateur. Le panneau Rendering de Chrome propose un menu déroulant « Emulate vision deficiencies » — protanopie, deutéranopie, tritanopie et vision floue — appliqué en direct sur la page réelle. Excellent pour repérer les problèmes pendant que vous êtes encore dans le balisage.
• Les plugins Figma et Sketch comme Stark ou les simulateurs de vision intégrés vous permettent de vérifier les maquettes avant même qu'elles ne soient construites.

Mon flux de travail réel : je conçois normalement, puis je passe les écrans clés — tableaux de bord, graphiques, erreurs de formulaire, tout ce où la couleur signifie quelque chose — à travers la deutéranopie d'abord (la plus courante), puis la protanopie, puis un rapide passage en tritanopie. Quatre-vingt-dix pour cent des problèmes que je trouve sont dans cette première vue en deutéranopie. Corrigez ceux-là et vous aurez aidé le plus de monde pour le moindre effort.

Les erreurs que je continue de voir

• Des états de validation rouge/vert sans icône. La plus courante. Une bordure rouge et une bordure verte sont la même bordure pour des millions d'utilisateurs. Ajoutez une icône et un message, toujours.
• Des cartes de chaleur et des graphiques qui ne varient que la teinte. Une carte de chaleur du vert au rouge est un champ de mines pour la DVC. Utilisez une échelle séquentielle qui fait aussi varier la luminosité (un jaune clair vers un bleu foncé, disons), ou ajoutez des étiquettes de valeur.
• Des légendes codées par couleur, associées uniquement par la couleur. Si la seule façon de relier une ligne à son étiquette est « trouvez la verte », les utilisateurs atteints de DVC sont bloqués. Ordonnez la légende pour qu'elle corresponde aux données, ou étiquetez directement sur la ligne.
• Supposer que « ça passe WCAG » signifie « c'est accessible ». Le contraste et la DVC sont des axes différents. Une palette peut franchir le 4.5:1 partout et s'effondrer malgré tout en bouillie en deutéranopie. Testez les deux.
• Concevoir uniquement sur votre propre écran parfait. Le même angle mort qui masque les problèmes de contraste masque ceux de DVC. Simulez, à chaque fois.

Rien de tout cela ne vous demande de concevoir des interfaces laides ni de renoncer à la couleur. La couleur est merveilleuse et vous devriez l'utiliser librement. La discipline tient simplement à ceci : que la couleur soit la couche délicieuse, jamais la seule couche. Associez chaque teinte porteuse de sens à une étiquette, une icône ou une forme ; choisissez des appariements qui survivent à l'effondrement rouge-vert ; appuyez-vous sur la luminosité autant que sur la teinte ; et lancez le simulateur avant de considérer le travail terminé. Faites cela, et le prochain ingénieur incapable de voir vos points verts saura tout de même exactement quels serveurs sont en feu.