Comprendre le contraste WCAG : ratios et seuils

Un gris clair sur fond blanc paraît élégant, mais il devient difficile à lire pour une personne malvoyante, sur un écran en plein soleil ou simplement quand la fatigue s’en mêle. Les WCAG (Web Content Accessibility Guidelines) fixent des seuils chiffrés pour éviter cela.

Ce guide explique comment le ratio de contraste est calculé, quel seuil s’applique à quoi, ce qui est exempté, et comment tout cela se retrouve dans le RGAA. Les chiffres cités sont calculés avec le même moteur que nos outils gratuits.

Le contraste, c’est quoi ?

Le contraste mesure l’écart de clarté entre deux couleurs, ici celle d’un texte et celle de son arrière-plan. Ce n’est pas une différence de teinte (la couleur elle-même, rouge ou vert par exemple) : un rouge et un vert de même clarté se distinguent bien pour une personne qui voit les couleurs, mais leur contraste est quasi nul, et le texte devient illisible pour beaucoup d’autres.

Dans nos guides, la clarté désigne ce que l’œil perçoit : une couleur est plus ou moins claire. Pour la mesurer, les WCAG utilisent la luminance relative, un nombre de 0 (noir le plus sombre) à 1 (blanc le plus clair) calculé à partir de la quantité de lumière. Les deux vont dans le même sens, mais la luminance relative est une formule précise : c’est elle qui fait foi pour les seuils.

La luminance relative et le ratio

Pour obtenir la luminance, on corrige chaque canal de couleur (rouge, vert, bleu) afin de retrouver une quantité de lumière, puis on les additionne en donnant plus de poids au vert.

c = valeur du canal / 255
si c ≤ 0,04045 :  linéaire = c / 12,92
sinon :           linéaire = ((c + 0,055) / 1,055) ^ 2,4

L = 0,2126 × R + 0,7152 × V + 0,0722 × B

Dans la dernière ligne, R, V et B sont les valeurs linéarisées des trois canaux (le « linéaire » calculé ci-dessus), pas les valeurs sRVB d’origine.

Le ratio compare ensuite la couleur la plus claire (L1) à la plus sombre (L2) :

ratio = (L1 + 0,05) / (L2 + 0,05)

Le résultat va de 1 : 1 (aucune différence) à 21 : 1 (noir sur blanc). Il ne dépend pas de l’ordre : texte clair sur fond sombre ou l’inverse, le ratio est le même.

Un exemple pas à pas

Prenons le gris #767676 sur blanc. Ses trois canaux valent 118, soit 0,4627 une fois divisés par 255. La linéarisation donne 0,1812 pour chaque canal, donc une luminance L2 d’environ 0,1812. Le blanc a une luminance L1 de 1. Le ratio vaut (1 + 0,05) / (0,1812 + 0,05), soit 4,54 : 1 une fois tronqué à deux décimales.

Avec #777777, un cran plus clair, le ratio tombe à 4,47 : 1 : il passe sous 4,5 : 1. Le gris #767676 est donc le plus clair des gris à atteindre 4,5 : 1 sur blanc.

Les seuils à connaître

Trois critères des WCAG 2.2 fixent des seuils : le 1.4.3 et le 1.4.6 pour le texte, le 1.4.11 pour les composants et les graphiques. Les deux premiers distinguent le grand texte du texte courant, que nous définissons d’abord.

Qu’est-ce qu’un « grand texte » ?

Un grand texte mesure au moins 24 px, ou au moins 18,5 px s’il est en gras (graisse CSS de 700 ou plus). Tout autre texte est un texte courant.

Les WCAG expriment ces tailles en points (18 points, ou 14 points en gras) et parlent de « texte de grande taille », ou de « texte agrandi » dans leur version française. Un point vaut 4/3 de pixel CSS : 18 points font exactement 24 px, et 14 points environ 18,66 px. Le W3C écrit « environ 18,5 px », valeur que retient aussi le RGAA.

Le tableau des seuils

Le niveau AA est celui qu’exige le RGAA. Le niveau AAA (critère 1.4.6) est une exigence renforcée, qu’on cherche à atteindre quand c’est possible sans l’imposer partout.

Quelques valeurs repères

Tester l’un de ces gris dans le vérificateur de contraste (nouvel onglet).

Remarquez le rouge pur #ff0000 sur blanc : 3,99 : 1. Il échoue pour du texte courant mais suffit pour un grand texte ou pour un composant d’interface (3 : 1). Et le gris #949494 est le plus clair des gris à atteindre 3 : 1 sur blanc, alors que #959595 reste juste en dessous.

Ce qui est exempté

Les critères 1.4.3 et 1.4.6 n’exigent aucun contraste pour :

• le texte d’un composant d’interface inactif (visible mais non utilisable pour le moment, par exemple un bouton désactivé) ;
• le texte purement décoratif ;
• le texte que personne ne peut voir ;
• le texte faisant partie d’une image contenant beaucoup d’autres éléments visuels, comme une photographie de rue où l’on devine une enseigne ;
• les logotypes : le texte d’un logo ou d’un nom de marque.

Le critère 1.4.11 exempte lui aussi :

• les composants inactifs ;
• les composants dont l’apparence est celle du navigateur, sans modification de votre part ;
• les graphiques dont la présentation exacte est essentielle.

États, images et dégradés

Survol, focus et état désactivé

Le contraste se mesure dans chaque état où le texte s’affiche : le critère 1.4.3 s’applique aussi au texte qui apparaît au survol ou au focus. Un bouton dont le texte reste lisible au repos mais devient pâle au survol échoue.

Pour les composants (critère 1.4.11), un effet de survol n’a pas à atteindre 3 : 1 avec l’état normal, mais le composant ne doit jamais perdre son contraste. Si vous dessinez votre propre contour de focus, visez 3 : 1 avec le fond. Le contour par défaut du navigateur est exempté. L’état désactivé relève de l’exemption des composants inactifs.

Texte sur une image ou un dégradé

L’exemption des images ne couvre pas le texte réel que vous posez sur une photo : c’est votre responsabilité de le rendre lisible. La bonne pratique consiste à mesurer le contraste au point le moins favorable sous le texte, pas au centre ni en moyenne, et à ajouter si besoin un voile ou un aplat (une zone de couleur unie) opaque derrière le texte.

Même logique pour une couleur semi-transparente : le navigateur la compose avec ce qui se trouve derrière. Définissez toujours ensemble la couleur du texte et celle de son arrière-plan. Sinon, ce sont les couleurs de l’utilisateur ou du navigateur qui s’appliquent, et le contraste devient imprévisible (c’est l’échec F24 du W3C).

Erreurs fréquentes

• Arrondir. 4,49 : 1 n’est pas 4,5 : 1 : le seuil est strict.
• Ne tester que l’état par défaut. Survol, focus, texte de remplacement d’un champ et état sélectionné comptent aussi.
• Oublier les composants. Un texte parfait dans un champ dont la bordure, nécessaire pour l’identifier, est à 1,5 : 1 échoue au critère 1.4.11. Voir Contraste des boutons, champs et icônes.
• Oublier le texte sur image ou dégradé, mesuré en un seul point favorable.
• Se fier à son œil ou à un écran réglé très lumineux : seul le calcul fait foi.
• Signaler une information par la couleur seule (un champ en erreur juste souligné de rouge). C’est un autre critère, le 1.4.1 : ajoutez un texte, une icône ou une forme (voir Information donnée uniquement par la couleur).

La correspondance avec le RGAA

Le RGAA 4.1.2, référentiel français d’accessibilité, s’appuie sur les WCAG 2.1 et ne retient que les niveaux A et AA : le critère 1.4.6 (AAA) n’en fait pas partie. Les contrastes se trouvent dans la thématique « Couleurs ».

Les tests du critère 3.2 reprennent les seuils vus plus haut : 4,5 : 1 pour un texte courant, 3 : 1 pour un grand texte (24 px, ou 18,5 px en gras). Le critère 3.3 demande 3 : 1. Dans les deux cas, le RGAA accepte aussi qu’un mécanisme permette à la personne d’afficher le contraste requis.

Et l’APCA ?

L’APCA (Accessible Perceptual Contrast Algorithm) est un modèle de perception du contraste, proposé comme piste pour les futures règles. Il donne une valeur « Lc » qui dépend du sens (texte sombre sur fond clair ou l’inverse), de la taille et de la graisse du texte.

Il ne fait partie d’aucune version des WCAG (2.0, 2.1, 2.2). Le brouillon de travail des WCAG 3.0 indique que l’algorithme de contraste à employer reste à déterminer. Pour une conformité aux WCAG 2.x ou au RGAA, seul le ratio décrit dans ce guide fait foi. Nos outils affichent l’APCA à titre indicatif, jamais comme un verdict.