Leçons Interactives de Mathématiques et Sciences

Vérificateur de contraste des couleurs (luminance WCAG)

Saisissez une couleur de premier plan et une couleur d'arrière-plan pour calculer ci-dessous la luminance relative WCAG actuelle et le rapport de contraste (AA/AAA). Les échantillons de droite sous l'aperçu montrent ce que « voit » la formule WCAG moderne pour chaque couleur ; ceux de gauche montrent ce qu'aurait donné la formule de luma d'un ingénieur de diffusion de 1953 pour ces mêmes couleurs — une comparaison directe entre l'ancien et le nouveau.

Chargement de la simulation interactive...

Pourquoi le vert pèse plus lourd que le rouge et le bleu — et pourquoi la loi utilise encore les mathématiques de 1953 🖖

Les coefficients de la formule de luminance (0,2126 pour le vert aujourd'hui, 0,299/0,587/0,114 en 1953) ne sont pas arbitraires : ils remontent à l'observateur de référence CIE 1931, qui a établi que la réponse des cônes de l'œil humain et la courbe d'efficacité lumineuse nous rendent bien plus sensibles à la lumière verte qu'au rouge ou au bleu. La NTSC avait besoin en 1953 exactement de ce type de somme pondérée pour qu'une nouvelle émission en couleur produise malgré tout une image en niveaux de gris correcte sur les millions de téléviseurs noir et blanc déjà présents dans les salons — le « luma » a été inventé comme un artifice de rétrocompatibilité, pas comme un idéal perceptuel. Cette histoire compte encore aujourd'hui car le rapport de contraste WCAG 2 vérifié ci-dessus a une portée juridique réelle (cité par l'ADA et la norme EN 301549), et pourtant les spécialistes de la vision le jugent imparfait : il est connu pour surestimer le contraste du texte sombre sur fond clair et sous-estimer celui du texte clair sur fond sombre — ce qui concerne directement ce site, puisqu'il utilise par défaut un thème sombre. Le remplaçant en projet dans WCAG 3, l'APCA, modélise correctement cette asymétrie ; en attendant sa sortie officielle, la formule ci-dessus reste celle à laquelle vous devez réellement vous conformer.

Ce que mesure vraiment un rapport de contraste 🖖

Le nombre affiché par cet outil est un rapport de luminance relative : (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire et L2 la plus sombre. Il va de 1:1 (couleurs identiques, invisibles) à 21:1 (noir pur sur blanc pur). Le 0.05 ajouté aux deux n'est pas un arrondi : il modélise le faible reflet de lumière ambiante que renvoient les écrans réels, si bien que même le 'noir pur' n'atteint jamais zéro. Visez 4.5:1 pour le texte courant et 3:1 pour le grand texte afin de franchir le seuil WCAG AA.

Une coquille figée dans la loi 🖖

La formule linéarise chaque canal sRGB avec une courbe par morceaux qui passe d'un segment linéaire à un exposant gamma à un seuil. WCAG 2 place ce basculement à 0.03928, mais le vrai standard sRGB le fixe à 0.04045. La valeur de WCAG est une coquille, recopiée d'un premier brouillon de sRGB avant la correction du nombre, et gravée depuis dans une norme d'accessibilité citée internationalement. L'erreur décale les résultats de moins de 10⁻⁴, si bien que personne n'a pris la peine de corriger le texte.

Problème entièrement résolu

  1. Rapport de contraste entre un texte #e2e6f0 et un fond #1a1d27 5 étapes

    Calculez le ratio de contraste entre du texte en #e2e6f0 et un arrière-plan en #1a1d27 — les couleurs de cette page. Faire la moyenne des canaux donne 5,55. Les WCAG donnent 13,46. Découvrez d'où vient ce facteur de deux et demi.

    1. La définition semble inoffensive : un ratio de deux luminances, chacune ajustée de 0,05 pour que le noir pur ne provoque pas de division par zéro. Les pondérations ne sont pas égales, et c'est la première surprise — le vert s'attribue dix fois plus de luminance que le bleu.

    2. La seconde surprise est que les valeurs des canaux ne peuvent pas être utilisées telles quelles. Un octet dans un fichier image est codé en gamma : 128 ne signifie pas la moitié de la lumière, mais environ un cinquième. L'expression définie par morceaux annule ce codage, et c'est l'étape que négligent tous ceux qui développent leur propre vérification de contraste.

    3. Faites-y passer les deux couleurs. La claire arrive à 0,79, la sombre à 0,0124 — un facteur de 63 d'écart en lumière physique, à partir d'octets qui ne diffèrent que d'un facteur d'environ 7.

    4. Les décalages de 0,05 compressent ensuite ce 63 jusqu'à 13,46, qui est le nombre affiché par le panneau. Ce décalage n'est pas cosmétique : il modélise la lumière que votre écran reflète même lorsqu'il affiche du noir, ce qui explique pourquoi un thème sombre ne peut pas atteindre un contraste infini dans une pièce éclairée.

    5. Les pondérations expliquent le reproche le plus courant des designers. Le vert pur et le bleu pur sont tous deux un canal unique à sa valeur maximale, pourtant le vert porte 0,7152 de la luminance et le bleu seulement 0,0722.

    Réponse

    L'outil affiche 13,46 : 1, largement au-dessus du 4,5 du niveau AA et du 7 du niveau AAA. La raison d'effectuer ce calcul à la main réside dans l'étape du gamma : omettez-la, calculez plutôt la moyenne des canaux, et cette paire obtient un score de 5,55 — ce qui valide toujours le test, mais comporte une erreur d'un facteur 2,4, et sur une paire plus proche, cette erreur fait la différence entre une réussite et un échec. Les pondérations constituent l'autre moitié de l'explication. Le vert est 9,9 fois plus lumineux que le bleu pour une même valeur de canal, de sorte qu'un texte bleu sur fond noir offre un résultat bien pire qu'il n'y paraît dans un sélecteur de couleurs, et le jaune sur blanc un résultat bien meilleur que ce qu'attendent les designers. Essayez le #0000ff sur du #000000 et lisez le ratio.

Références (2)

· Mis à jour

Vérifié sur des sources publiées. Corrections bienvenues. Politique éditoriale · Corrections

Toutes les leçons : Informatique →

Exemples de problèmes