Rapport de contraste et texte lisible

Le gris #767676 sur blanc a un rapport de contraste de 4.54:1 et satisfait le minimum WCAG pour le texte courant ; un cran plus clair, #777777 donne 4.48:1 et échoue.

Luminance relative

Pour décider si un texte est lisible, les Web Content Accessibility Guidelines n'utilisent ni la teinte ni la luminosité TSL. Elles utilisent la luminance relative, un nombre de 0 pour le noir à 1 pour le blanc qui suit la quantité de lumière qu'une couleur envoie à l'œil. WCAG 2.2 la définit en deux étapes. D'abord, chaque canal est transformé en nombre de 0 à 1 en divisant par 255, puis en annulant la courbe sRVB : si la valeur est au plus 0.04045, on la divise par 12.92 ; sinon on calcule ((valeur + 0.055) / 1.055) à la puissance 2.4. Ensuite, les trois résultats sont pondérés et additionnés : L = 0.2126 R + 0.7152 G + 0.0722 B.

Les poids expliquent beaucoup. Le vert porte plus de 70 % du total, le bleu à peine 7 %. C'est pourquoi le bleu pur #0000ff n'a qu'une luminance de 0.0722 et le jaune pur, rouge plus vert, de 0.9278. La spécification consigne aussi un petit historique : avant mai 2021, le seuil s'écrivait 0.03928, copié d'un document plus ancien. Il a été corrigé en 0.04045, et WCAG note que cela n'a aucun effet pratique sur les résultats.

Rapport de contraste

Le rapport de contraste compare deux luminances : (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire et L2 la plus sombre. Le 0.05 représente un peu de lumière parasite qui atteint toujours l'œil, et il garde le rapport fini pour le noir. Les rapports vont de 1:1, une couleur contre elle-même, à 21:1, le noir contre le blanc : (1 + 0.05) / (0 + 0.05) = 21. Pour #767676 sur blanc, la luminance est 0.1812, donc le rapport est 1.05 / 0.2312 = 4.54.

Voici tout le calcul pour le bleu #2273c3 utilisé à l'unité 2, rgb(34 115 195). Divisés par 255, les canaux valent 0.1333, 0.4510 et 0.7647. Tous trois dépassent 0.04045, chacun passe donc par la formule de puissance, ce qui donne 0.0160, 0.1714 et 0.5457. Pondérés, ils deviennent 0.0034 pour le rouge, 0.1226 pour le vert et 0.0394 pour le bleu, et la somme est une luminance de 0.1654. Contre le blanc, le rapport est 1.05 / 0.2154 = 4.87 : ce bleu satisfait donc AA pour du texte courant sur une page blanche. Contre le noir, il vaut 0.2154 / 0.05 = 4.31, tout juste insuffisant.

Les seuils

WCAG 2.2 transforme le rapport en lignes de réussite ou d'échec. Le critère de succès 1.4.3, au niveau AA, demande au moins 4.5:1 pour le texte normal et 3:1 pour le texte de grande taille. Grande taille signifie au moins 18 points, ou 14 points en gras ; WCAG note que cela correspond à peu près à 1.5 em et 1.2 em en gras pour les polices de texte courantes. Le critère 1.4.6, au niveau AAA, relève la barre à 7:1 et 4.5:1. Le critère 1.4.11 demande 3:1 pour les parties de boutons, de champs de formulaire et d'icônes que les gens doivent voir. Le rouge pur #ff0000 sur blanc donne 4.00:1, ce qui convient pour un grand titre mais échoue pour du texte courant. Le bleu #0000ff sur blanc donne 8.59:1 et satisfait tout.

Un autre fait utile découle de la formule. Une couleur de luminance d'environ 0.179 a le même contraste contre le blanc et contre le noir, environ 4.58:1. Plus sombre que cela, le texte blanc se lit mieux dessus ; plus clair, c'est le texte noir. Le panneau sous le modèle montre les deux rapports et nomme le meilleur choix.