Le rapport de contraste des couleurs expliqué par des exemples vérifiés

Ce que mesure un rapport de contraste

WCAG 2.2 définit le rapport de contraste par (L1 + 0.05) / (L2 + 0.05). L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. Puisque la valeur claire est toujours au numérateur, le résultat ne dépend pas de la couleur appelée premier plan. Une même paire conserve le même rapport lorsque le texte et le fond sont inversés.

contrast = (Llighter + 0.05) / (Ldarker + 0.05)
minimum = 1:1
maximum = 21:1

Deux couleurs identiques donnent 1:1. Le noir sRGB idéal face au blanc sRGB idéal donne 21:1. Le rapport décrit la séparation entre clair et sombre, pas la distance de teinte : deux teintes visiblement différentes peuvent avoir une luminance proche et un faible contraste textuel. Choisir des couleurs complémentaires ou déplacer un curseur de teinte ne prouve donc pas la lisibilité.

Comment les canaux sRGB deviennent une luminance relative

Pour une couleur sRGB opaque, partez des valeurs de canaux rouge, vert et bleu. Normalisez chaque canal 8 bits de 0–255 vers 0–1, linéarisez-le avec la fonction de transfert sRGB, puis combinez les canaux linéaires. WCAG pondère la luminance relative à 0.2126 pour le rouge, 0.7152 pour le vert et 0.0722 pour le bleu. Le vert contribue donc beaucoup plus au nombre de luminance que le bleu.

const linear = value => {
  const channel = value / 255;
  return channel <= 0.04045
    ? channel / 12.92
    : ((channel + 0.055) / 1.055) ** 2.4;
};

const luminance = (red, green, blue) =>
  0.2126 * linear(red) +
  0.7152 * linear(green) +
  0.0722 * linear(blue);

• Analysez les canaux sRGB finaux ; ne calculez pas depuis un nom de couleur ou une estimation visuelle.
• Linéarisez chaque canal avant d’appliquer les coefficients de luminance.
• Calculez les deux luminances, placez la plus claire en L1 et conservez assez de précision.
• Affichez une valeur arrondie pour le lecteur, mais comparez le résultat non arrondi au seuil.
• Si une transparence ou une image intervient, déterminez d’abord le fond rendu effectif.

Les seuils AA et AAA dépendent du texte

Le critère de succès WCAG 1.4.3 correspond au niveau AA. Il exige au moins 4.5:1 pour le texte normal et 3:1 pour le texte à grande échelle. Le critère 1.4.6 correspond au niveau AAA : au moins 7:1 pour le texte normal et 4.5:1 pour le grand texte. Le calcul est identique à chaque niveau ; seul le seuil d’interprétation change.

• Texte normal AA : 4.5:1 ou plus.
• Texte à grande échelle AA : 3:1 ou plus.
• Texte normal AAA : 7:1 ou plus.
• Texte à grande échelle AAA : 4.5:1 ou plus.

WCAG définit la grande échelle comme un texte d’au moins 18 points, ou d’au moins 14 points en gras, avec des considérations de taille équivalentes pour les polices CJK. Pixels CSS et points ne sont pas des unités interchangeables : dans la conversion de référence CSS courante, 18 pt correspondent à 24 px CSS et 14 pt à environ 18,67 px CSS. Il faut vérifier la graisse, la taille réellement fournie et le rôle du texte plutôt que les déduire d’une capture.

Paires vérifiées et limite d’arrondi

Les valeurs suivantes emploient des couleurs sRGB opaques à six chiffres et la formule de luminance relative WCAG 2.2. Réussite et échec concernent le texte normal, pas le grand texte. Quatre décimales sont affichées afin que les résultats proches du seuil restent visibles.

#767676 sur blanc dépasse 4.5:1, tandis que #777777, légèrement plus clair, échoue. Un affichage arrondi à une décimale pourrait indiquer 4.5:1 pour les deux, mais les seuils WCAG ne sont pas arrondis avant l’évaluation. Une valeur calculée de 4.4781:1 reste inférieure à 4.5:1. Un outil fiable évalue le nombre en pleine précision et n’arrondit que l’étiquette montrée au lecteur.

Transparence, dégradés, images et états

Une couleur alpha n’a pas de rapport de contraste unique avant d’être composée sur un fond connu. Par exemple, du noir à 50 % d’opacité devient un gris moyen sur du blanc, mais un résultat bien plus sombre sur une surface bleu pâle. Testez le premier plan rendu effectif face au fond rendu effectif, pas le jeton source non composé. L’opacité d’un parent peut également modifier le texte et sa surface.

• Pour du texte translucide, composez sa couleur sur chaque fond qu’il peut réellement recouvrir.
• Pour un dégradé, testez l’endroit au contraste minimal derrière toute la zone du texte.
• Pour une photo ou une vidéo, vérifiez les images représentatives et défavorables ; un voile uni peut rendre le résultat déterministe.
• Testez séparément les états normal, survolé, ciblé, sélectionné, erreur et les autres états pertinents lorsque leurs couleurs diffèrent.
• N’échantillonnez pas un pixel de bord anticrénelé comme couleur déclarée du texte ; partez des couleurs de premier plan et de fond spécifiées.

Exceptions et exigences non couvertes par ce rapport

Le critère de contraste minimal du texte comporte des exceptions explicites. Le texte d’un composant d’interface inactif, la décoration pure, le contenu invisible pour tous, le texte accessoire dans une image comportant un autre contenu visuel important et le texte d’un logo ou nom de marque ne reçoivent pas la même exigence selon le critère 1.4.3. L’exception est étroite : un corps de texte aux couleurs de la marque ne devient pas un logotype pour autant.

Le contraste du texte ne représente pas non plus toute la révision colorimétrique. Les limites des composants d’interface et les graphiques porteurs de sens relèvent des exigences de contraste non textuel. Liens, erreurs, graphiques et statuts ne doivent pas reposer sur la seule teinte lorsqu’elle est l’unique moyen de comprendre l’information. Clavier, visibilité du focus, zoom, redistribution, étiquettes, sémantique et texte alternatif demandent des contrôles distincts.

• Déterminez si le contenu est du texte, une image de texte, un objet graphique ou un composant d’interface.
• Appliquez le critère correspondant au lieu d’imposer 4.5:1 à chaque pixel.
• Documentez les véritables exceptions sans les utiliser pour excuser un contenu ordinaire peu lisible.
• Considérez le contraste automatisé comme un test déterministe au sein d’un examen d’accessibilité plus large.

Liste reproductible de contrôle du contraste

• Relevez le premier plan et le fond finaux dans l’état rendu examiné.
• Résolvez les variables CSS, couleurs nommées, alpha, héritage, superpositions et fusions avant le calcul.
• Convertissez les canaux sRGB effectifs en luminance relative avec toute la précision.
• Calculez (L1 + 0.05) / (L2 + 0.05), en plaçant la luminance la plus claire en premier.
• Classez le contenu comme texte normal, texte à grande échelle ou autre type relevant d’un autre critère.
• Comparez le résultat non arrondi à 4.5, 3, 7 ou 4.5 selon le cas.
• Testez chaque état sensiblement différent et la partie la moins contrastée des fonds variables.
• Consignez couleurs, rapport, classe, seuil, résultat et date pour permettre une reproduction.
• Poursuivez avec les contrôles non textuels, d’interaction, de sémantique, de clavier, de zoom et d’usage humain.

Color Atlas sépare les éléments déterministes : valeurs sRGB stockées, luminance calculée, rapport exact et étiquettes de seuil. Cette structure rend les résultats reproductibles et permet à un autre article de comparer plusieurs couleurs de texte candidates sur un fond sans inventer de prose ni prétendre qu’un nombre certifie toute l’interface.