Calculateur de contraste

Un nombre entre 1 et 21

On lit un texte quand il est nettement plus clair ou plus foncé que ce qu’il y a derrière. La teinte compte à peine. Du rouge pur sur du vert pur, ce sont deux couleurs très différentes avec presque la même luminosité et les lettres semblent vibrer. WCAG mesure donc l’écart de luminance relative, la quantité de lumière qu’une couleur envoie à l’œil sur une échelle de 0 (noir) à 1 (blanc).

Pour la calculer, chacun des canaux rouge, vert et bleu est converti de sa valeur enregistrée en lumière linéaire, puis les trois sont pondérés selon la sensibilité de l’œil à chacun :

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

Le vert compte pour plus de 70 % du résultat et le bleu pour environ 7 %. C’est pourquoi le bleu pur #0000ff se comporte comme une couleur foncée et le jaune pur comme une couleur claire. Deux couleurs identiques donnent 1:1. Du noir sur du blanc donne 21:1. Échanger le texte et le fond ne change pas le rapport.

Les seuils et où ils s’appliquent

AA est le niveau auquel renvoient en général les lois et les règles d’approvisionnement, dont la norme européenne EN 301 549 et la Section 508 aux États-Unis. AAA est un objectif pour les endroits où l’on lit longtemps. Les logos, les contrôles désactivés et le texte purement décoratif sont exemptés.

Un repère pratique est le gris #767676, qui atteint 4,54:1 sur blanc et passe AA. D’un cran plus clair, #777777 donne 4,47:1 et échoue.

Comment la teinte proposée est choisie

Quand un texte de taille normale tombe sous 4,5:1, le calculateur convertit la couleur du texte en teinte, saturation et luminosité. Il garde les deux premières et fait varier la luminosité par pas d’un demi pour cent, tantôt plus foncé tantôt plus clair, jusqu’à ce que le rapport avec votre fond atteigne 4,5. Le premier résultat est la teinte la plus proche qui passe, donc votre bleu reste votre bleu. Parfois aucune luminosité de la couleur du texte ne peut passer, surtout sur un fond de ton moyen. Dans ce cas, il essaie d’ajuster le fond de la même façon. Choisissez Use pour appliquer la suggestion.

Les fonds de ton moyen sont le cas difficile. Un gris moyen comme #808080 donne environ 3,9:1 contre du blanc et 5,3:1 contre du noir, donc seul un texte très foncé fonctionne dessus. Les oranges de marque et les verts vifs ont le même problème avec du texte blanc. Il faudra assombrir le fond ou passer à du texte foncé.

Entrer et sortir des couleurs

Les deux champs acceptent tout ce qu’un navigateur comprend comme couleur CSS : #1d3557, 1d3557, rgb(29 53 87), hsl(215 50% 23%) ou un nom comme teal. Pour relever une couleur sur une page en ligne, ouvrez les outils de développement, sélectionnez le texte et copiez les valeurs calculées de color et de background-color.

L’adresse de la page se met à jour à chaque changement, sous la forme ?fg=1d3557&bg=ffffff. Copiez-la pour envoyer à un collègue la paire exacte dont vous discutez. Pour tester toute une palette de marque d’un coup, utilisez la grille de contraste de palette.

Ce qu’un rapport ne vous dit pas

• Transparence. Toute valeur alpha est ignorée. Pour un texte semi-transparent, mesurez la couleur mélangée que l’écran affiche au final.
• Images et dégradés. Une photo en arrière-plan a beaucoup de couleurs. Testez la zone la plus claire et la plus foncée derrière le texte, ou placez un panneau uni dessous.
• Graisse et taille de police sous les seuils. Une police fine de 12 px à 4,6:1 passe sur le papier et reste difficile à lire.
• Thèmes sombres. On sait que la formule de WCAG 2 surestime certaines paires sombres. Si un texte clair sur fond sombre passe de justesse, regardez-le aussi de vos propres yeux, par exemple dans le simulateur de vision.