Créer une palette de couleurs accessible

Une palette accessible est une palette dont chaque couple texte et fond a été vérifié. Le piège classique : on valide un nuancier sur sa beauté, puis on découvre en production que le bouton d’accent ou le message d’erreur est presque illisible pour une partie du public.

Ce guide montre comment construire une charte graphique accessible, étape par étape, à partir d’une palette réelle. Les ratios cités sont calculés avec le même moteur que nos outils gratuits. Le ratio de contraste est un nombre de 1 : 1 à 21 : 1 qui mesure l’écart de clarté entre deux couleurs ; son calcul est détaillé dans notre guide Comprendre le contraste WCAG.

Pourquoi une palette de couleurs accessible repose sur le contraste

Les WCAG (Web Content Accessibility Guidelines), les règles internationales d’accessibilité du web, imposent deux seuils pour les couleurs. Le RGAA (Référentiel général d’amélioration de l’accessibilité), le référentiel français, les reprend.

• Texte (critère WCAG 1.4.3, critère RGAA 3.2) : au moins 4,5 : 1 pour un texte courant, 3 : 1 pour un grand texte (au moins 24 px, ou 18,5 px en gras).
• Composants d’interface et graphiques (critère WCAG 1.4.11, critère RGAA 3.3) : au moins 3 : 1 pour les bordures de champ, les icônes qui portent un sens ou l’indicateur de focus. Le guide Contraste des boutons, champs et icônes détaille ce critère.

Un seuil s’applique à une paire de couleurs, pas à une couleur seule.

Une couleur n’est donc jamais « accessible » en soi. Le corail #d4442d atteint 4,50 : 1 sur blanc, mais seulement 3,34 : 1 sur l’indigo profond #241f52. Il faut donc décider, dès la conception de la palette, quelles associations sont permises.

Définir les rôles des couleurs de la charte graphique

Avant de choisir des teintes (la couleur elle-même, comme le rouge ou le vert), listez ce que les couleurs doivent faire. Une palette utile sépare quatre familles : le texte, les fonds, l’accent (actions, liens, focus) et les états (erreur, succès, alerte). Voici la palette d’exemple que nos outils chargent par défaut. Un aplat est une zone de couleur unie.

Le tableau ne dit pas encore quelles associations sont lisibles : c’est l’objet des étapes suivantes.

Construire des échelles de tons pour un site web

Votre marque n’a sans doute qu’un seul exemplaire de chaque couleur. Or une couleur qui ne fonctionne que sur un fond limite beaucoup les usages. La solution est une échelle de tons : la même teinte déclinée du plus clair au plus sombre. On choisit ensuite, pour chaque usage, le ton qui atteint le ratio visé.

Prenons le corail #e4533b. Sur fond blanc, il atteint seulement 3,75 : 1 : c’est suffisant pour une icône ou un grand texte, pas pour un message d’erreur en texte courant. Le tableau ci-dessous décline sa teinte en six tons.

Le badge indique si le ton atteint 4,5 : 1 pour du texte courant. Sur fond blanc, le Corail 600 passe de justesse (4,50 : 1) : préférez le Corail 700 (5,32 : 1), qui laisse de la marge. Sur l’indigo profond, le Corail 400 passe lui aussi de justesse (4,51 : 1) ; le Corail 300 (7,03 : 1) est plus sûr.

En pratique, les tons 700 et 800 servent au texte sur fond clair, et le ton 300 au texte sur fond sombre. Le ton 500 (3,75 : 1 sur blanc, 4,02 : 1 sur indigo profond) reste pour les aplats et les icônes.

Exemple : quelles paires de couleurs fonctionnent ?

Voici quelques associations de la palette d’exemple, avec leur ratio calculé (tronqué à deux décimales, jamais arrondi).

Tester l’indigo clair sur Lavande 200 dans le vérificateur de contraste (nouvel onglet).

On en tire trois leçons.

• Un accent peut réussir sur un fond et échouer sur un autre. L’indigo clair atteint 4,5 : 1 sur blanc, mais seulement 4,29 : 1 sur Lavande 200.
• Le texte coloré sur un fond coloré est dangereux. L’indigo clair sur Gris encre tombe à 1,08 : 1 : les deux couleurs ont la même clarté.
• Les couleurs d’état ne sont pas dispensées. Le vert succès atteint 4,08 : 1 sur blanc : insuffisant pour du texte courant. Sa version plus sombre, ou un fond différent, règle le problème. Le Lavande 200 ne convient pas non plus comme bordure de champ (1,40 : 1 sur blanc, contre 3 : 1 requis).

Tester toutes les combinaisons avec la matrice

Vérifier les paires une à une ne suffit pas : avec 9 couleurs, il y a 72 combinaisons possibles d’un texte sur un fond. Notre matrice de palette les calcule toutes. Chaque ligne est une couleur de texte, chaque colonne une couleur de fond, et chaque case affiche le ratio et le verdict.

Sur la palette ci-dessus :

• 10 paires sur 36 atteignent 4,5 : 1 (texte courant) ;
• 18 atteignent 3 : 1 (grand texte, composant) ;
• 18 n’atteignent même pas 3 : 1 : elles ne conviennent à rien de ce qui précède.

Un classement trie aussi les combinaisons de la meilleure à la moins bonne.

Vérifier la palette pour le daltonisme

Un bon contraste ne garantit pas que deux couleurs restent distinctes. Pour une personne daltonienne, un rouge et un vert de même clarté peuvent devenir presque identiques. Le simulateur de daltonisme applique à votre palette plusieurs types de daltonisme et signale les paires qui étaient distinctes en vision normale et ne le sont plus.

Sur notre palette, voici les paires signalées pour trois types de daltonisme.

• Protanopie : Corail et Vert succès.
• Deutéranopie : Vert succès et Corail 700.
• Tritanopie : Lavande 50 et Lavande 200 ; Lavande 200 et Blanc ; Indigo clair et Gris encre.

Le corail et le vert servent à signaler une erreur et un succès. Si seule la couleur les distingue, une partie du public ne fait pas la différence : ajoutez toujours un texte ou une icône. Notre guide Daltonisme : concevoir un site lisible par tous détaille ces règles.

Documenter les paires autorisées

Une palette vérifiée, mais jamais documentée, se dégrade : un nouveau composant reprend le gris clair « qui va bien » et l’accessibilité s’érode. Dans votre design system (le recueil de règles et de composants de votre site), ne listez pas seulement les couleurs : listez les associations autorisées.

• Pour chaque couleur de texte, les fonds sur lesquels elle est permise, avec le ratio.
• L’usage prévu : texte courant (4,5 : 1), grand texte ou composant (3 : 1).
• Les paires interdites, comme l’indigo clair sur Gris encre, pour éviter qu’elles reviennent.
• Les tons réservés aux fonds sombres et ceux réservés aux fonds clairs.

Vérifiez de nouveau la matrice à chaque ajout de couleur. Elle donne un lien partageable, qu’on peut joindre à la documentation.

Erreurs fréquentes

• Du gris clair pour le texte secondaire. Les légendes et les aides à la saisie sont du texte comme les autres : elles demandent 4,5 : 1.
• La couleur de marque utilisée telle quelle sur du blanc. Le corail d’exemple n’atteint que 3,75 : 1. Gardez-le pour les aplats et les icônes, et prévoyez un ton plus sombre pour le texte.
• Du texte coloré sur un fond coloré. Deux teintes différentes peuvent avoir la même clarté, donc un contraste quasi nul.
• S’appuyer sur la teinte seule. Un état « erreur » uniquement rouge n’est pas perçu par tout le monde (critère WCAG 1.4.1, critère RGAA 3.1) : voir Information donnée uniquement par la couleur.
• Oublier les états. Survol, focus, champ en erreur et lien visité comptent aussi, ainsi que le mode sombre s’il existe.