Le contraste des couleurs

Le gris clair #999999 sur blanc a un rapport de contraste de 2.85:1, bien en dessous des 4.5:1 que les WCAG 2.2 demandent pour le texte courant.

Pourquoi le contraste compte

Un texte pâle sur son fond est difficile à lire pour les personnes malvoyantes, pour beaucoup de lecteurs âgés et pour toute personne qui utilise un téléphone en plein soleil. Les WCAG 2.2 ne laissent pas « pâle » à l'appréciation de chacun. Elles mesurent la luminance relative des deux couleurs, un nombre allant de 0 pour le noir à 1 pour le blanc, et les comparent avec le rapport de contraste (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire. Le résultat va de 1:1, une couleur sur elle-même, à 21:1, du noir sur du blanc. Le cours de théorie des couleurs détaille la formule étape par étape ; ici, nous l'utilisons.

Les valeurs à atteindre

Le critère de succès 1.4.3 Contraste (minimum), de niveau AA, demande au moins 4.5:1 pour un texte normal et 3:1 pour un grand texte, que les WCAG définissent comme au moins 18 points, ou 14 points en gras. Le critère 1.4.6, de niveau AAA, porte ces valeurs à 7:1 et 4.5:1. Le critère 1.4.11 Contraste du contenu non textuel demande 3:1 pour les parties des composants et des graphiques que les gens doivent voir, comme la bordure d'un champ de texte ou les lignes d'un graphique. Les logos et le texte purement décoratif ou appartenant à un composant inactif en sont exemptés.

Quelques valeurs méritent d'être retenues. Le gris #767676 donne 4.54:1 sur blanc, et on le cite souvent comme le gris neutre le plus clair qui passe le niveau AA ; #777777 donne 4.48:1 et échoue. Le #595959, plus foncé, atteint 7.00:1 et passe le niveau AAA. Les couleurs saturées peuvent tromper : le rouge pur #ff0000 sur blanc ne fait que 4.00:1, alors que le rouge plus profond #c01c28 atteint 6.11:1. Le texte indicatif (placeholder) dans les champs de formulaire échoue souvent, car les designers le rendent volontairement très clair.

Vérifier les couleurs en pratique

Tu as rarement besoin d'appliquer la formule à la main. Quand tu inspectes un élément de texte, le sélecteur de couleur des outils de développement des principaux navigateurs affiche son rapport de contraste avec le fond, souvent avec une ligne qui marque les seuils AA et AAA. Deux cas demandent plus d'attention. Un texte posé sur une photo ou un dégradé n'a pas de fond unique : vérifie-le donc par rapport à la partie la plus claire sur laquelle il se trouve, ou place un panneau uni derrière lui. Et un site avec un thème sombre doit être vérifié deux fois, car une couleur qui passe sur blanc peut échouer sur un fond presque noir : le bleu #1a5fb4 donne 6.29:1 sur blanc mais seulement 3.34:1 sur noir pur.

Jamais la couleur seule

Le contraste entre le texte et le fond n'est que la moitié du problème. Le critère 1.4.1 Utilisation de la couleur, de niveau A, dit que la couleur ne doit pas être le seul moyen de transmettre une information. Le rouge #c01c28 et le bleu #1a5fb4 se lisent tous deux bien sur blanc, mais l'un par rapport à l'autre, leur rapport n'est que de 1.03:1. En niveaux de gris, ou pour quelqu'un qui ne distingue pas le rouge du bleu, ils deviennent le même gris. Un champ obligatoire signalé seulement par une étiquette rouge, ou un lien qui ne se distingue du texte voisin que par sa couleur, a donc besoin d'un second indice : un mot, une icône, un soulignement.