# Palettes adaptées au daltonisme et comment tester vos créations [Canonical HTML page](https://gradiently.design/fr/guide/color-blindness-design) La plupart des troubles de la vision des couleurs ne consistent pas à voir en gris. Certaines paires de couleurs se confondent. Choisissez des couleurs de clartés différentes et le problème disparaît. ## The short version - Une palette adaptée au daltonisme utilise des couleurs qui diffèrent nettement en clarté, pas seulement en teinte, pour rester distinctes quand certaines teintes se ressemblent. - La confusion entre rouge et vert est de loin le trouble de la vision des couleurs le plus courant ; la confusion entre bleu et jaune est bien plus rare, et ne voir aucune couleur l’est plus encore. - La palette d’Okabe et Ito, composée de huit couleurs, a été conçue pour rester lisible avec les formes courantes de daltonisme et elle est libre d’utilisation. - Ne laissez jamais la couleur porter seule le sens : ajoutez un libellé, une icône, un motif ou une position. - Les outils de développement de Chrome et Edge simulent plusieurs formes de daltonisme sur n’importe quelle page, et un test en niveaux de gris révèle la plupart des problèmes en quelques secondes. 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](https://webaim.org/articles/visual/colorblind) détaille la biologie ; pour le design, c’est ce tableau qui compte. | Type | Cônes concernés | Couleurs confondues | Fréquence | | --- | --- | --- | --- | | Deutéranomalie et deutéranopie | Vert (moyennes) | Rouge et vert, vert et brun, bleu et violet | La plus courante | | Protanomalie et protanopie | Rouge (grandes) | Rouge avec vert et noir, les rouges paraissent plus sombres | Courante | | Tritanomalie et tritanopie | Bleu (courtes) | Bleu et vert, jaune avec rose ou gris | Rare | | Achromatopsie | Tous | Tout est vu en nuances de gris | Très rare | Les formes rouge et vert se transmettent par le chromosome X, ce qui explique qu’elles soient bien plus fréquentes chez les hommes que chez les femmes. 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. - Noir #000000: #000000 - Orange #e69f00: #e69f00 - Bleu ciel #56b4e9: #56b4e9 - Vert bleuté #009e73: #009e73 - Jaune #f0e442: #f0e442 - Bleu #0072b2: #0072b2 - Vermillon #d55e00: #d55e00 - Pourpre rosé #cc79a7: #cc79a7 La palette d’Okabe et Ito. Utilisez aussi peu de couleurs que nécessaire ; quatre ou cinq ménagent tout le monde mieux que huit. 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. - À éviter : du rouge au vert: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)` - Sûr : du bleu à l’orange: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)` - Sûr : du violet foncé au jaune: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)` La dernière échelle reprend les couleurs viridis, très répandues : sa clarté monte régulièrement, si bien qu’elle survit même à une impression en niveaux de gris. ## 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](https://gradiently.design/fr/guide/oklch-explained)) : pour une personne atteinte de deutéranopie, il ne reste presque rien pour les distinguer. ### À éviter côte à côte - Rouge et vert de clarté proche - Vert et brun - Bleu et violet - Vert clair et jaune - Rose et gris, ou jaune et gris clair ### À utiliser plutôt - Bleu et orange - Bleu foncé et jaune clair - Violet foncé et vert clair - Une teinte en paliers de clarté bien distincts - N’importe quelle paire avec un libellé ou une icône 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](https://gradiently.design/fr/guide/how-to-choose-brand-colors). ## 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](https://gradiently.design/fr/guide/color-contrast-accessibility). 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é](https://gradiently.design/fr/guide/text-on-gradient) traite ce point en détail. Une annonce d’atelier dont le titre repose sur une zone chargée du dégradé, avec peu de contraste de clarté Quand le texte et le fond ont une clarté proche, seule la teinte fait le travail, et c’est précisément ce que certains lecteurs perdent. La même annonce d’atelier avec une zone plus calme et plus sombre derrière le titre, qui se lit clairement Avec une zone calme et plus profonde derrière les mots, le contraste vient de la clarté, que tous les lecteurs perçoivent. 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. **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. **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. **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. **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](https://gradiently.design/fr/guide/infographic-design) en dit plus sur les libellés et la mise en page, et [l’harmonie des couleurs](https://gradiently.design/fr/guide/color-harmony) vous aide quand il faut une palette sûre qui paraisse tout de même réfléchie. ## FAQ ### Quelles couleurs conviennent le mieux aux personnes daltoniennes ? Le bleu et l’orange forment la paire la plus sûre, suivis du bleu et du jaune. Surtout, choisissez des couleurs qui diffèrent nettement en clarté, pour qu’elles restent distinctes même quand les teintes se ressemblent. ### Qu’est-ce que la palette Okabe Ito ? Un ensemble de huit couleurs (noir, orange, bleu ciel, vert bleuté, jaune, bleu, vermillon et pourpre rosé) conçu pour rester distinguable avec les formes courantes de daltonisme. ### Quelles couleurs éviter ensemble ? Le rouge avec le vert, le vert avec le brun, le bleu avec le violet et le vert clair avec le jaune, surtout quand leur clarté est proche. ### Comment voir ma création comme une personne daltonienne ? Dans les outils de développement de Chrome ou Edge, ouvrez le panneau Rendering et choisissez une option sous Emulate vision deficiencies. Une simple capture en niveaux de gris révèle aussi les couleurs qui ne tiennent qu’à la teinte. ### Dois-je changer des couleurs de marque rouge et verte ? Non. Rendez l’une nettement plus sombre que l’autre et ajoutez des libellés ou des icônes partout où les couleurs portent un sens.