Les ratios de contraste WCAG expliqués (4,5:1, 3:1, 7:1)

Un ratio de contraste WCAG compare la luminance relative de la plus claire de deux couleurs à celle de la plus foncée, sur une échelle allant de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). Trois planchers font le travail concret : 4,5:1 pour le texte de taille normale, 3:1 pour le grand texte et les composants d’interface significatifs, et 7:1 pour le niveau AAA, plus strict. Un repère utile : 21:1, c’est du noir sur blanc, et 4,5:1, c’est à peu près un gris moyen — #767676 — sur blanc.

On cite d’ordinaire les trois chiffres comme une seule règle, et l’essentiel de ce qui déraille en pratique vient de l’application du mauvais plancher à la mauvaise chose. Cette référence parcourt ce que le ratio mesure réellement, ce que couvre chaque plancher, ce qui en est exempté, et les erreurs de lecture les plus fréquentes — la pièce fondatrice de notre guide du contraste. Chaque chiffre des exemples ci-dessous est calculé, pas cité.

Qu’est-ce qu’un ratio de contraste, exactement ?

Le ratio repose sur la luminance relative : une mesure de la quantité de lumière qu’une couleur envoie à l’œil, allant de 0 pour le noir à 1 pour le blanc. WCAG définit le ratio de contraste comme (L1 + 0.05) / (L2 + 0.05) — la luminance de la couleur la plus claire sur celle de la plus foncée, chacune augmentée d’une petite constante qui modélise la lumière ambiante parasite. Deux couleurs identiques donnent 1:1 ; le noir sur le blanc donne le maximum, 21:1. La formule est symétrique : intervertir le texte et le fond ne change rien au chiffre.

L’intuition derrière la mesure : la machinerie de détection des contours de l’œil fonctionne presque entièrement sur des différences de luminosité, pas de teinte. Un bleu vif et un gris de même luminance obtiennent un score presque identique face au blanc, parce que pour la partie de votre vision qui résout les formes des lettres, ils sont presque identiques. C’est pourquoi un ratio bâti uniquement sur la luminance prédit la lisibilité aussi bien qu’il le fait — et pourquoi « changer de couleur » ne règle rien tant que la luminosité reste en place.

Que couvre le plancher de 4,5:1 ?

Le texte de taille normale — en pratique tout ce qui est en dessous de 24px en graisse normale, ou en dessous de 18,66px en gras : le corps de texte, les étiquettes, les légendes, les liens, le texte indicatif et le texte à l’intérieur des images. Le plancher provient du Critère de succès 1.4.3, Contraste (minimum), et le chiffre n’a rien d’arbitraire : la justification énoncée par la norme est que 4,5:1 compense la perte de sensibilité au contraste qui accompagne une vision d’environ 20/40 — un niveau d’acuité fréquent chez les lecteurs âgés et les personnes ayant une légère perte de vision. Le plancher est calibré pour garder le texte lisible pour elles, pas seulement pour des yeux jeunes devant des écrans lumineux.

Quand 3:1 suffit-il ?

Dans deux cas. Le premier est le grand texte : 24px et plus en graisse normale, ou 18,66px et plus en gras. Des traits plus épais restent lisibles à un contraste plus faible, donc le plancher s’assouplit. Le second concerne les composants d’interface significatifs — l’information visuelle nécessaire pour identifier ou manipuler un élément d’interface : la bordure qui marque l’emplacement d’un champ de formulaire, une icône qui porte du sens à elle seule, un indicateur de focus, la différence visuelle entre un contrôle coché et un contrôle décoché. Les deux cas comportent assez de cas limites pour mériter leur propre traitement ; en résumé, 3:1 est une exception aux limites précises, pas une remise générale.

Quand vaut-il la peine de viser 7:1 ?

7:1, c’est le niveau AAA — le Critère de succès 1.4.6, « Contraste (amélioré) » — et il est facultatif. La plupart des réglementations qui citent WCAG citent le niveau AA, donc 7:1 est un choix, et un choix raisonnable dans des situations précises : les produits à forte lecture où l’on passe des heures dans le corps de texte, la documentation, et les produits servant des publics comptant une part plus élevée de lecteurs malvoyants. Cela coûte de la place dans la palette — la bande de couleurs qui franchit 7:1 sur un fond donné est bien plus étroite que la bande de 4,5:1 — c’est pourquoi cela fonctionne mieux comme décision ciblée pour des rôles de texte que comme politique générale.

Comment se classent six paires réelles ?

Six paires, calculées avec la formule WCAG, vérifiées face aux trois planchers. Le bleu de marque est #2563eb — oklch(0.546 0.215 262.9) :

Deux lignes méritent l’attention. La ligne blanc-sur-rouge est mesurée face au remplissage rouge, pas face à la page — le texte sur un bouton coloré est toujours vérifié face à la couleur sur laquelle il repose. Et le bleu plus clair est le cas intermédiaire classique : inutilisable en corps de texte, parfaitement légal en titre ou en icône.

Ouvrez ce tableau de paires sous forme de panneau de rôles interactif dans Scale Composer — chacun des ~17 rôles sémantiques dont une surface a besoin, vérifié face à son plancher à la dérivation, avec la valeur Lc APCA à côté de chaque ratio.

Qu’est-ce qui est exempté des planchers de contraste ?

Quatre catégories ne portent aucune exigence de contraste, et on se trompe dans les deux sens à leur sujet — signalées alors qu’elles sont exemptées, ignorées alors qu’elles ne le sont pas :

• Les contrôles désactivés — l’étiquette d’un bouton inactif n’a pas de plancher.
• Les éléments purement décoratifs — fioritures et motifs de fond qui ne transmettent rien.
• Les logos et noms de marque — un logotype est exempté en tant que logo ; les mêmes mots composés en corps de texte ne le sont pas.
• Le texte incident — du texte qui se trouve par hasard dans une photographie, par opposition à du texte placé sur une image pour être lu.

Une mise en garde : l’exemption signifie l’absence de plancher légal, pas que l’invisibilité soit du bon design. Les états désactivés doivent tout de même rester repérables — un sujet avec ses propres subtilités, surtout sur des fonds sombres.

Que comprend-on de travers à propos des ratios ?

Trois erreurs de lecture expliquent l’essentiel de la confusion. Premièrement, les planchers s’appliquent par paire, pas par palette — une couleur ne « passe pas WCAG » ; c’est une combinaison de deux couleurs qui le fait, et le même gris peut passer sur blanc et échouer sur une carte teintée. Deuxièmement, AA contre AAA se décide par critère, pas par site — un produit peut satisfaire au critère de contraste AA et au critère AAA pour sa vue de lecture, et dire « nous sommes AAA » à propos d’un site entier revendique bien plus que le contraste. Troisièmement, « notre couleur de marque échoue à WCAG » signifie presque toujours qu’une paire échoue — d’ordinaire la couleur de marque en corps de texte sur blanc — et le correctif se délimite de la même façon : assombrir cette seule paire d’un cran, réserver la couleur au grand texte et à l’interface où s’applique le 3:1, ou dériver le rôle de texte face à chaque fond au lieu de coder en dur une seule valeur partout.

Faites descendre une paire jusqu’aux planchers

Les trois chiffres deviennent intuitifs à l’instant où vous regardez une vraie paire les franchir. Prenez une couleur de texte et faites glisser sa luminosité vers le fond — le ratio glisse depuis le confortable, passe 7:1, puis 4,5:1, puis 3:1, et le panneau de rôles marque chaque plancher au moment où il cède, pour que vous voyiez exactement combien de marge vos propres couleurs ont avant de cesser d’être légales pour la tâche qu’elles remplissent.