Bhinish Dhiman
Quel ratio de contraste vous faut-il vraiment ?
Traduit de l’original en anglais. Lire l’original
4.5:1 pour le texte courant et 3:1 pour le grand texte afin de respecter WCAG 2.2 AA. Est considéré comme grand un texte de 24px, ou de 18.66px s'il est en gras. Les composants d'interface, comme les bordures de champs et les icônes porteuses de sens, demandent 3:1. Le niveau AAA relève le texte courant à 7:1 et le grand texte à 4.5:1.
Les seuils sont assez simples pour être retenus par cœur. Ce qui pose problème, c’est de savoir lequel s’applique à un élément donné, et quatre règles sont très souvent mal comprises.
Les chiffres
| Quoi | AA | AAA |
|---|---|---|
| Texte courant | 4.5:1 | 7:1 |
| Grand texte | 3:1 | 4.5:1 |
| Composants d’interface et graphismes porteurs de sens | 3:1 | pas de niveau AAA |
| Contrôles désactivés, éléments décoratifs, logos | exemptés | exemptés |
Le niveau AA est celui auquel presque tout le monde est tenu. L’ADA, l’European Accessibility Act et les régimes équivalents renvoient à WCAG 2.x au niveau AA. Le niveau AAA est généralement visé de façon sélective plutôt que sur tout un site : les auteurs de WCAG eux-mêmes reconnaissent qu’il n’est pas atteignable pour tous les contenus.
Règle 1 : « grand » a une définition précise
Un grand texte, c’est 24px ou plus, ou 18.66px ou plus si la graisse est de 700 ou plus.
Ces valeurs viennent de la conversion de 18pt, et de 14pt en gras, sur une référence de 96dpi. Le seuil en gras est plus bas parce qu’un trait plus épais dépose plus d’encre à l’écran à taille égale.
L’erreur courante consiste à supposer qu’un titre est forcément concerné. Un sous-titre de 20px en graisse normale n’est pas un grand texte. Il lui faut 4.5:1, comme au texte courant.
Règle 2 : les composants d’interface ont aussi besoin de contraste
Le critère de succès 1.4.11, ajouté dans WCAG 2.1, est celui que l’on oublie le plus souvent complètement. Il exige 3:1 pour l’information visuelle nécessaire pour identifier un composant et son état.
En pratique :
- Les bordures des champs de saisie, par rapport au fond environnant
- Les indicateurs de focus
- Les contours des interrupteurs et des cases à cocher, dans leurs deux états
- Les icônes qui portent un sens à elles seules
- Les parties porteuses de sens d’un graphique : une ligne, une barre, un point de donnée
Il ne s’applique pas aux graphismes décoratifs, ni aux parties d’un composant qui ne sont pas nécessaires pour le comprendre. Une ombre portée discrète sous une carte ne pose aucun problème. La bordure de la carte, si c’est la seule chose qui vous indique où se trouve le champ de saisie, en pose un.
Ce critère prend en défaut un grand nombre de maquettes par ailleurs soignées. Des bordures de champ gris pâle #e5e7eb sur blanc atteignent environ 1.3:1 : un motif courant, et un échec net.
Règle 3 : le texte d’exemple n’est pas exempté
Les contrôles désactivés sont exemptés des exigences de contraste. Le texte d’exemple (placeholder) ne l’est pas, et les deux sont constamment confondus.
Le texte d’exemple est un vrai contenu présenté à l’utilisateur : il lui faut donc 4.5:1, comme à tout autre texte courant. Le texte d’exemple gris pâle habituel en est très loin.
La meilleure correction est généralement structurelle plutôt que chromatique : si le texte d’exemple fait office de libellé, il devrait être un libellé. Le texte d’exemple disparaît dès que l’on commence à taper, c’est-à-dire précisément au moment où l’on a le plus souvent besoin de se rappeler à quoi servait le champ.
Règle 4 : un texte sur une image a besoin d’un fond défini
Si un texte est posé sur une photo ou un dégradé, il n’y a pas de couleur de fond unique par rapport à laquelle mesurer, et le rapport change à mesure que l’image change.
Vous devez créer un fond déterminé : un voile opaque, un dégradé superposé assez dense pour garantir le pire cas, ou un conteneur de texte. Mesurez par rapport au point le plus clair de la zone derrière le texte, pas par rapport à la moyenne.
Le même raisonnement explique pourquoi les surfaces très translucides et floutées sont difficiles à rendre conformes : leur fond est ce qui défile en dessous à ce moment-là, si bien que le rapport n’est pas du tout une propriété fixe.
Un seuil n’est pas une note
Dépasser 4.5:1 de 0.01 n’est pas vraiment mieux que le manquer de 0.01. Le chiffre est un plancher, pas une note.
Si une paire passe de justesse, prenez-le comme un avertissement : elle échouera dès que quelqu’un réduira légèrement la taille du texte, ou qu’un designer éclaircira le gris d’un cran. Gardez de la marge sur tout ce que vous comptez réutiliser.
Ce que le rapport ne peut pas vous dire
Deux choses échappent entièrement à ce modèle.
Il ne voit pas la typographie. Une légende en filet de 12px et un titre gras de 32px dans les mêmes couleurs obtiennent le même rapport, et un seul des deux est lisible. APCA modélise cela ; WCAG 2 ne le fait pas.
Il ne peut pas vous dire si deux couleurs de premier plan se distinguent l’une de l’autre. C’est ce qui rend les graphiques et les couleurs d’état illisibles pour les personnes daltoniennes, et aucune vérification de contraste ne le détecte, puisque les deux couleurs ne sont jamais comparées entre elles.
Ces deux lacunes sont réelles, et chacune mérite d’être vérifiée séparément une fois les rapports en règle.
Notre vérificateur de contraste affiche tous les seuils à la fois (AA et AAA, texte courant et grand texte, plus la règle des composants) pour que vous voyiez ce qu’une paire réussit et ce qu’elle rate, sans changer de mode.