Palettes adaptées au daltonisme et comment tester vos créations

Une palette adaptée au daltonisme est un ensemble de couleurs qui restent distinctes pour les personnes qui confondent certaines teintes, le plus souvent les rouges et les verts. L’astuce consiste à séparer les couleurs par la clarté autant que par la teinte, et à ne jamais faire de la couleur le seul signal. Un bleu foncé et un orange clair restent différents pour presque tout le monde ; un rouge moyen et un vert moyen, de clarté proche, peuvent ressembler au même brun terne. Vous trouverez ci-dessous des palettes à copier, les paires à éviter et trois façons gratuites de tester votre travail.

Les types de daltonisme, en bref

La vision des couleurs repose sur trois types de cônes dans l’œil, sensibles en gros aux grandes, moyennes et courtes longueurs d’onde. Quand un type manque ou se décale, des couleurs que la plupart des gens voient différentes se mettent à se ressembler. L’article de WebAIM sur le daltonisme détaille la biologie ; pour le design, c’est ce tableau qui compte.

Le point commun : la teinte devient peu fiable, mais la clarté demeure. Une personne atteinte de deutéranopie voit très bien qu’une couleur est plus sombre qu’une autre. Ce seul fait guide toutes les règles qui suivent.

Une palette adaptée au daltonisme à copier

L’ensemble sûr le plus connu est la palette proposée par Masataka Okabe et Kei Ito pour les figures scientifiques. Ses huit couleurs ont été choisies pour rester distinguables avec les formes courantes de daltonisme, et elle fonctionne tout aussi bien pour les graphiques, les cartes, les étiquettes et les couleurs d’état dans un produit.

Pour une marque, huit couleurs, c’est en général trop. L’association la plus sûre est le bleu et l’orange : ils se trouvent de part et d’autre de l’axe de confusion rouge et vert et diffèrent en clarté, si bien que presque tout le monde les perçoit comme différents. Le bleu avec le jaune, et le violet foncé avec le vert clair, tiennent bien aussi.

Dégradés et échelles pour les données

Pour les cartes de chaleur et les graphiques qui montrent une plage de valeurs, utilisez une échelle dont la clarté évolue régulièrement d’un bout à l’autre. Une échelle du rouge au vert échoue deux fois : ses extrémités trompent les lecteurs daltoniens, et elles ont une clarté semblable. Du bleu à l’orange, ou une seule teinte du foncé au clair, convient à presque tout le monde.

Les paires à éviter et quoi utiliser à la place

Certaines combinaisons posent problème encore et encore. Le rouge #d7263d et le vert #2e9e44 ci-dessus paraissent nettement différents à la plupart des gens, mais leur clarté perçue est presque identique (environ 57 % et 62 % en OKLCH) : pour une personne atteinte de deutéranopie, il ne reste presque rien pour les distinguer.

Si les couleurs de votre marque sont le rouge et le vert, inutile d’en changer. Rendez simplement l’une nettement plus sombre que l’autre, et ne les utilisez jamais comme seule différence entre, par exemple, un gain et une perte. Une flèche ou un signe plus et moins règle la question pour tout le monde. Le choix des couleurs lui-même est traité dans comment choisir les couleurs de sa marque.

Ne comptez jamais sur la couleur seule

C’est la règle la plus importante, et elle figure aussi dans les Règles pour l’accessibilité des contenus web (WCAG). Si une légende de graphique, une erreur de formulaire, un badge « en stock » ou une carte ne diffère que par la couleur, certains lecteurs perdent le sens. Ajoutez un second signal :

• Des libellés posés directement sur les courbes et les barres plutôt qu’une légende de couleurs.
• Des icônes pour les états : une coche pour la réussite, une croix ou un signe d’alerte pour les erreurs.
• Des motifs ou styles de trait, comme des lignes pointillées et pleines, dans les graphiques.
• La position et l’ordre, pour que le premier élément signifie toujours la même chose.
• Un contraste du texte suffisant à lui seul, vérifié avec un vérificateur de contraste.

Les visuels pour les réseaux sociaux demandent le même soin. Une publication qui dit « vert signifie disponible » sur un calendrier rouge et vert perdra une partie de ses lecteurs. Les mots portent mieux le message, encore faut-il qu’ils se lisent sur le fond, surtout sur un dégradé, où le contraste varie d’un bout à l’autre du cadre. Le texte sur un dégradé traite ce point en détail.

La version de droite, c’est ce que fait un Mark Gradiently de lui-même : il place sa zone la plus calme et la plus contrastée derrière le texte, et l’encre automatique choisit un texte clair ou foncé pour chaque ligne, de sorte que la séparation vient de la clarté plutôt que de la teinte.

Comment tester une création face au daltonisme

1. 1

   Faites le test des niveaux de gris

   Exportez ou capturez la création et passez-la en niveaux de gris. Si deux couleurs qui signifient des choses différentes deviennent le même gris, modifiez la clarté de l’une d’elles.

2. 2

   Simulez dans le navigateur

   Dans Chrome ou Edge, ouvrez les outils de développement, lancez le menu de commandes, tapez Rendering et utilisez Emulate vision deficiencies pour voir la page en direct en protanopie, deutéranopie, tritanopie ou achromatopsie.

3. 3

   Passez tout l’écran en gris

   Mac et Windows proposent tous deux un filtre de couleur en niveaux de gris dans leurs réglages d’accessibilité. Activez-le pour vérifier les applications, les fichiers de design et les exports, pas seulement les pages web.

4. 4

   Retirez la couleur et relisez

   Demandez-vous si chaque graphique, badge et état garde son sens avec les seuls libellés et icônes. Si oui, la couleur est décorative, et c’est sa juste place.

Les simulations sont des approximations, et la vision des couleurs varie d’une personne à l’autre. Si l’accessibilité compte pour votre produit, demandez à des personnes daltoniennes de votre entourage de regarder le vrai résultat. Pour les graphiques en particulier, la conception d’infographies en dit plus sur les libellés et la mise en page, et l’harmonie des couleurs vous aide quand il faut une palette sûre qui paraisse tout de même réfléchie.