Ce que mesure vraiment un ratio de contraste (et pourquoi 4,5:1 compte)

Un texte gris clair sur fond blanc paraît net dans la maquette, mais se révèle infranchissable pour quiconque a les yeux un peu fatigués, un peu plus âgés ou un peu différents. La lisibilité d’un texte n’est pas une question de goût, c’est une chose mesurable, et cette mesure, c’est le ratio de contraste. Une fois que vous savez ce que ce chiffre compare, les règles d’accessibilité qui en découlent cessent de paraître arbitraires.

En bref : un ratio de contraste compare la clarté de votre texte par rapport à son fond, sur une échelle allant de 1:1 (identique, invisible) à 21:1 (noir sur blanc). Les WCAG fixent 4,5:1 comme minimum pour le corps de texte courant et 3:1 pour le grand texte, afin que la plupart des gens puissent le lire. Le chiffre suit la luminance, pas la teinte, et c’est pourquoi certaines paires de couleurs vives échouent malgré tout.

L’échelle : de 1:1 à 21:1

Un ratio de contraste est un nombre unique qui indique à quel point deux couleurs diffèrent par leur clarté. Il va de 1:1 en bas à 21:1 en haut. À 1:1, le texte et le fond ont la même clarté, si bien que le texte s’y fond et disparaît. À 21:1, le maximum, vous avez du noir pur sur du blanc pur, l’association la plus lisible qui soit.

Tout ce qui est lisible se situe entre ces deux extrêmes. Le ratio s’écrit sous forme de paire, comme 4,5:1, ce qui signifie que la plus claire des deux couleurs est 4,5 fois plus lumineuse que la plus foncée. Plus le chiffre est élevé, plus la lecture est facile. Tout l’intérêt de ce nombre est de transformer un jugement vague, est-ce que cela paraît lisible, en quelque chose que l’on peut vérifier et valider ou non.

Il mesure la luminance, pas la couleur

Voici ce qui surprend souvent : le ratio ne porte pas sur les couleurs que vous avez choisies, mais sur la clarté de chacune. Le terme technique est luminance relative, la luminosité perçue d’une couleur une fois pris en compte le fait que l’œil est bien plus sensible au vert qu’au bleu. La formule pondère les canaux rouge, vert et bleu en conséquence, puis compare les deux résultats.

C’est pourquoi deux couleurs qui semblent radicalement différentes peuvent quand même offrir un contraste désastreux entre elles. Un rouge saturé sur un vert saturé est une combinaison criarde, mais si les deux ont une luminance proche, le texte posé dessus est réellement difficile à lire, en particulier pour une personne ayant une déficience de la vision des couleurs, qui s’appuie davantage sur les écarts de clarté que sur la teinte. Le contraste est un écart de luminosité, pas un choc de couleurs, et c’est en confondant les deux que des designs séduisants finissent illisibles. Vous pouvez vérifier n’importe quelle paire texte-fond par rapport aux seuils des WCAG dans un vérificateur de contraste sur color.hivly.net et voir le ratio exact avant la mise en ligne.

D’où vient le 4,5:1

Le chiffre de 4,5:1 n’est pas une préférence de designer, c’est le seuil que les Web Content Accessibility Guidelines fixent pour le corps de texte de taille normale au niveau AA, celui que vise la majeure partie du web. Il a été retenu comme le point en dessous duquel un texte ordinaire devient difficile à lire pour une part non négligeable des gens, y compris ceux dont la vision est modérément réduite ou qui présentent une légère déficience de la vision des couleurs. Passez ce seuil et votre corps de texte est lisible par la grande majorité.

Le grand texte bénéficie d’un objectif plus accessible, 3:1, parce que des lettres plus grandes et plus grasses restent lisibles à un contraste plus faible. Les traits sont plus épais et les formes plus larges, l’œil a donc besoin d’un écart de luminosité moindre pour les distinguer. C’est la logique derrière ces deux chiffres : plus le texte est petit et fin, plus il a besoin de contraste pour rester lisible, et les règles exigent donc davantage là où le texte est petit et moins là où il est grand.

AA, AAA et le choix de votre seuil

Les WCAG définissent deux niveaux, et la différence tient à la rigueur du contraste exigé. AA, l’objectif courant, demande 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA, le niveau strict, porte cela à 7:1 pour le texte normal et 4,5:1 pour le grand. AAA est plus difficile à concevoir, car il écarte beaucoup de styles doux et peu contrastés, mais il rend le contenu lisible pour les personnes atteintes d’une basse vision plus marquée.

La plupart des sites visent AA et le considèrent comme un plancher, non comme un but. Si votre public est plutôt âgé ou comprend de nombreux lecteurs malvoyants, viser AAA sur vos textes essentiels est un choix raisonnable. Dans tous les cas, la démarche est la même : fixez votre seuil, mesurez chaque paire texte-fond par rapport à lui, et corrigez celles qui ne l’atteignent pas avant que quiconque ait à plisser les yeux. Le chiffre supprime les approximations, et c’est précisément pour cela qu’il existe.