Règles de contraste du grand texte

Le résultat d’audit que personne n’attendait, c’était le hero. Le titre — bleu de marque sur blanc à ≈3,3:1 — avait été classé comme exempté du plancher du texte courant des mois plus tôt, à juste titre : à ses 40px sur ordinateur, il se qualifiait comme grand texte, où 3:1 suffit. Ce que l’audit a relevé, c’est le point de rupture mobile. L’échelle responsive faisait tomber ce même titre à 22px, et à 22px en graisse normale, ce n’est plus du grand texte. Même couleur, même élément, même feuille de style — une réussite sur une largeur d’écran et un échec sur une autre.

WCAG considère un texte comme « grand » à partir de 18pt (24px) en graisse normale, ou à partir de 14pt (18,66px) en gras — et le plancher de contraste du grand texte passe de 4,5:1 à 3:1. La taille qui décide est la taille de rendu sur l’écran réel, pas la taille dans la maquette la plus large. L’exception est réelle et utile, et c’est aussi la règle la plus mal appliquée de ce coin de la norme — c’est pourquoi elle a droit à sa propre page dans notre guide du contraste.

Qu’est-ce qui compte exactement comme grand texte ?

La définition du texte à grande échelle trace deux lignes : 18 points en graisse normale, ou 14 points en gras. La norme parle en points, les écrans parlent en pixels, et la conversion — en supposant le pixel de référence CSS, où 1pt = 1,333px — aboutit aux deux nombres qui valent la peine d’être mémorisés : 24px en graisse normale et 18,66px en gras. Les deux sont « et au-delà » : 24px en graisse normale se qualifie, 23px en graisse normale non ; 18,66px en gras se qualifie, 18px en gras non.

Deux zones floues méritent d’être nommées honnêtement. « Gras » n’est pas fixé à un numéro de graisse précis dans le critère — 700 est indéniablement gras, et savoir si un 600 semibold compte relève de l’appréciation. Et la définition ne fait aucune distinction en dessous de la graisse normale : une police fine de 24px se qualifie à la lettre de la règle, même si ses traits ténus sont exactement là où le faible contraste fait le plus de mal. La règle est un plancher, pas un modèle de lisibilité.

Pourquoi le grand texte a-t-il un plancher plus bas ?

Parce que l’épaisseur des traits change ce que l’œil peut résoudre. La sensibilité au contraste dépend de la fréquence spatiale — la finesse du détail. Les traits fins d’un petit texte sont un détail à haute fréquence, là où la sensibilité humaine au contraste est la plus faible et où chaque point de contraste compte ; les traits épais d’un titre d’affichage sont à basse fréquence, là où le système visuel donne le meilleur de lui-même et peut tolérer une différence plus faible. C’est la lecture perceptuelle de l’exception, à prendre avec prudence : des traits plus grands sont simplement des signaux plus faciles, alors la norme en demande moins à leur couleur.

Où l’exception aide-t-elle légitimement ?

Partout où une couleur de marque de luminosité moyenne rencontre de la typographie d’affichage. Beaucoup de palettes de marque vivent dans la bande qui échoue au texte courant mais franchit 3:1 — et pour elles, l’exception fait la différence entre « inutilisable pour du texte » et « utilisable exactement là où la marque veut se faire le plus entendre ».

Le cas concret : un bleu de marque plus clair, #4A8CF7, mesure ≈3,3:1 sur blanc — calculé, et en deçà du plancher de 4,5:1 du texte courant. En tant que titre de 32px, c’est du grand texte, le plancher est de 3:1, et l’association passe légitimement. Le même bleu utilisé en texte courant de 16px échoue. Inversez l’association pour un hero : du texte d’affichage blanc sur un fond #4A8CF7 donne le même ≈3,3:1 — valide à 48px, tandis que le sous-titre blanc de 16px placé en dessous dans le même hero échoue à son plancher. Un aplat, un titre qui passe et une ligne en petits caractères qui ne passe pas.

Ouvrez ce bleu aux deux planchers dans Scale Composer — la même association vérifiée comme texte courant et comme grand texte, un plancher raté et un franchi, avec le Lc APCA à côté.

Quel plancher s’applique à quelle taille et quelle graisse ?

Pour la conformité AAA, la même définition s’applique avec les deux planchers relevés : 7:1 pour le texte normal, 4,5:1 pour le grand texte.

Quelles sont les erreurs d’application courantes ?

Quatre schémas couvrent la plupart des mauvaises décisions :

1. « C’est un titre, donc c’est grand. » La règle lit les tailles, pas la sémantique — un h3 de 18px en graisse normale est du texte normal et doit 4,5:1.
2. L’appliquer aux boutons. La plupart des libellés de boutons font 14–16px en graisse normale, loin de l’un ou l’autre seuil ; tester le seul bouton surdimensionné et généraliser étend discrètement l’exception à toute une classe de composants.
3. « C’est en gras, donc c’est grand. » Le gras abaisse le seuil de taille ; il ne le supprime pas. 18px en gras se situe sous la limite de 18,66px et doit 4,5:1.
4. Le piège du point de rupture — l’échec de l’introduction. La règle suit la taille de rendu, donc une typographie fluide qui franchit 24px (ou 18,66px en gras) quelque part dans sa plage change de plancher quelque part dans sa plage. La vérification doit se faire à la plus petite taille de rendu, pas à la plus grande.

Auditez la bande limite

Le texte qui vit entre environ 17px et 24px est là où se concentrent les mauvaises décisions — assez proche des seuils pour que la graisse, la mise à l’échelle fluide ou un seul ajustement de design fasse basculer le plancher applicable. Chargez une association limite et vérifiez-la face aux deux planchers — un titre de la classe 20px testé à 4,5:1 et à 3:1, pour que vous puissiez voir si votre couleur survit à une reclassification avant qu’un point de rupture ne la décide à votre place.