Vérifier un contraste : seuils, calcul et cas limites

Le contraste est le critère le plus souvent en échec, et le plus facile à corriger. Il est aussi le seul entièrement calculable : deux couleurs donnent un rapport, et ce rapport se compare à un seuil. Reste à savoir quel seuil, et quoi faire quand les couleurs ne sont pas deux aplats.

Les seuils du référentiel

Rapports de contraste minimaux exigés
ÉlémentSeuilDéfinition
Texte courant 4,5:1 Moins de 24 px, ou moins de 18,5 px en gras
Texte de grande taille 3:1 Au moins 24 px, ou au moins 18,5 px en gras
Composants d'interface 3:1 Bordures de champs, boutons, indicateur de focus
Éléments graphiques porteurs d'information 3:1 Icônes signifiantes, courbes d'un graphique

Comment se calcule le rapport

On calcule la luminance relative de chaque couleur, puis on forme le rapport (L clair + 0,05) ÷ (L sombre + 0,05). Le résultat va de 1:1, deux couleurs identiques, à 21:1, noir absolu sur blanc absolu.

Deux conséquences pratiques, rarement énoncées. D'abord, le rapport est symétrique : texte clair sur fond sombre ou l'inverse donne le même chiffre. Ensuite, il ne dépend pas de la teinte mais de la luminance — deux couleurs très différentes à l'œil peuvent être parfaitement illisibles l'une sur l'autre.

Les cas que les outils traitent mal

Situations demandant un jugement humain
CasCe qu'il faut faire
Texte sur photographie Mesurer sur la zone la plus défavorable, pas sur la moyenne
Texte sur dégradé Mesurer aux deux extrémités : les deux doivent passer
Couleur semi-transparente Calculer la couleur composite réelle, pas la couleur déclarée
Texte au survol ou au focus Vérifier chaque état, pas seulement l'état au repos
Texte dans une image Mesurer à la pipette : aucune analyse de code ne le verra
Thème sombre Reprendre l'intégralité des mesures : rien ne se transpose

La méthode que nous appliquons

  1. Extraire les jetons de couleur du système de design, plutôt que de mesurer page par page.
  2. Calculer chaque paire réellement utilisée : texte sur fond, texte sur surface, texte sur encadré.
  3. Refaire l'intégralité du calcul pour le thème sombre s'il existe.
  4. Vérifier séparément les composants au seuil de 3:1 — c'est l'oubli le plus fréquent.
  5. Consigner les valeurs obtenues : elles serviront à la déclaration d'accessibilité.
Corriger à la source

Une couleur corrigée dans le système de design répare des centaines d'occurrences d'un coup. C'est le meilleur rapport entre effort et points de conformité gagnés — voir le plan de remédiation.

Au-delà du seuil

Passer le seuil ne garantit pas le confort. Un texte gris à 4,6:1 est conforme et fatigant. Quand le choix existe, viser franchement au-dessus coûte la même chose et sert tout le monde — à commencer par les personnes malvoyantes et les lecteurs en plein soleil.

Poursuivre

Pour l'outillage du navigateur, voyez les extensions de navigateur. Pour la vérification de restitution, tester au lecteur d'écran.