Qu'est-ce qu'une palette de couleurs accessible ?

Qu'est-ce qu'une palette de couleurs accessible ?

Une palette de couleurs accessible est un ensemble de couleurs choisi pour que le texte, les icônes et les éléments d'interface aient un contraste suffisant avec leur fond, et pour que la couleur ne soit jamais le seul moyen de transmettre une information. Les personnes malvoyantes, daltoniennes ou face à un écran délavé peuvent ainsi lire et utiliser la page. Les WCAG fixent les contrastes minimaux qu'une palette doit respecter.

Les règles de contraste des WCAG

• Texte normal (SC 1.4.3, niveau AA) : au moins 4,5:1 par rapport au fond.
• Grand texte (SC 1.4.3) : au moins 3:1. Grand signifie 18 points ou plus, ou 14 points en gras ou plus, soit environ 24 px et 18,5 px en CSS.
• Composants d'interface et graphiques (SC 1.4.11, niveau AA) : au moins 3:1 par rapport aux couleurs adjacentes, par exemple la bordure d'un bouton, un anneau de focus ou une ligne de graphique nécessaire pour comprendre les données.
• Contraste renforcé (SC 1.4.6, niveau AAA) : 7:1 pour le texte normal et 4,5:1 pour le grand texte.
• Utilisation de la couleur (SC 1.4.1, niveau A) : la couleur ne doit pas être le seul moyen visuel de transmettre une information, comme une erreur ou un état sélectionné.

Les contrôles désactivés, la décoration pure et les logotypes sont exemptés. Les détails figurent sur les pages du W3C consacrées à 1.4.3 et 1.4.11. Pour la norme complète, voir les WCAG.

Comment le ratio est calculé

Le rapport de contraste est (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus foncée. La luminance relative vaut 0,2126 R + 0,7152 G + 0,0722 B après linéarisation de chaque canal sRVB. Les valeurs vont de 1:1 à 21:1. Selon les WCAG, les valeurs calculées ne s'arrondissent pas : 4,499:1 n'atteint pas le seuil de 4,5:1.

Exemples calculés sur fond blanc

Un simple pas de #767676 à #777777 renverse le résultat. Pour les éléments d'interface, #949494 donne 3,03:1 sur blanc et respecte la règle des 3:1, alors que #959595 donne 2,995:1 et échoue.

Erreurs courantes

• Texte indicatif ou d'aide en gris clair, correct sur votre écran mais sous 4,5:1.
• Ne vérifier la couleur de marque que sur blanc. Le survol, le mode sombre et le texte sur image sont des combinaisons à part.
• Du texte sur une photo ou un dégradé sans voile, si bien que le contraste varie le long du texte.
• Montrer erreurs ou séries de graphique uniquement en rouge et vert, sans icône, libellé ni motif (SC 1.4.1).
• Oublier les bordures, icônes et indicateurs de focus, qui relèvent de 1.4.11 et non de 1.4.3.

Tester une palette

Vérifiez chaque paire texte et fond avec un vérificateur de contraste, puis contrôlez la page rendue, car l'opacité CSS et les voiles modifient les couleurs réelles. Les analyses automatiques repèrent beaucoup d'échecs de contraste, mais le texte sur image ou dégradé demande souvent un contrôle manuel. Notre guide des outils de test d'accessibilité web compare les options, et le suivi de la vitesse des pages suit le score d'accessibilité Lighthouse dans le temps, ce qui révèle un changement de couleur qui casse le contraste. À lire aussi : images accessibles, technologies d'assistance et tests d'accessibilité automatisés.

Questions fréquentes

Quel ratio de contraste faut-il pour le texte courant ?

Au moins 4,5:1 pour WCAG AA (critère de succès 1.4.3). Le grand texte demande 3:1. Le niveau AAA exige 7:1 pour le texte normal.

La règle des 3:1 s'applique-t-elle aux boutons et aux icônes ?

Oui. Le critère 1.4.11 exige 3:1 par rapport aux couleurs adjacentes pour les parties d'un contrôle nécessaires pour l'identifier et pour ses états, ainsi que pour les graphiques nécessaires à la compréhension. Le texte du bouton suit la règle du texte.

Un logo est-il exempté des règles de contraste ?

Les logotypes et noms de marque sont exemptés de 1.4.3, mais pas un logo qui sert de contrôle, ni une version peu contrastée choisie par l'auteur plutôt qu'imposée par la charte de marque.

Puis-je indiquer une erreur uniquement par la couleur ?

Non. Selon le SC 1.4.1, il faut un autre indice, comme un texte, une icône ou un motif, car certains utilisateurs ne distinguent pas les couleurs.

Dois-je tester le mode sombre séparément ?

Oui. Chaque paire de couleurs de premier plan et d'arrière-plan susceptible d'apparaître à l'écran a son propre ratio, donc un thème sombre demande sa propre vérification.