Vérificateur de contraste des couleurs (WCAG)

Comment ça marche

Écrivez les couleurs du texte dans le panneau de gauche, une par ligne ; le format est reconnu automatiquement : #777777, rgb(119, 119, 119) et hsl(0, 0%, 47%) se lisent de la même façon. Indiquez la couleur de fond dans le champ d'option ; laissé vide, il vaut blanc. Le panneau de résultat donne pour chaque couleur le rapport de contraste en un seul nombre, comme 4,48:1, et dit si ce nombre passe les seuils AA et AAA pour la taille de texte choisie. Exemple : sur fond blanc, le gris #777777 donne 4,48:1 et échoue de peu au niveau AA pour du texte normal ; assombri d'un cran en #767676, il monte à 4,54:1 et passe. Les carrés de couleur se dessinent en direct sous le résultat, ce qui permet de voir le couple à l'œil avant de regarder le chiffre. Pour essayer plusieurs couleurs de marque contre le même fond, écrivez-les simplement les unes sous les autres ; la ligne d'état compte combien passent.

Cet outil est aussi connu sous le nom de rapport de contraste wcag, contraste aa aaa, calculer contraste couleurs.

Qu'est-ce que Rapport de contraste ?

Le rapport de contraste réduit l'écart de luminance entre deux couleurs à un seul nombre, toujours écrit sous la forme « X:1 ». Sa valeur minimale est 1:1 : les deux couleurs sont identiques et le texte est invisible sur le fond. Sa valeur maximale est 21:1, celle du noir et du blanc. Ce qui rend la mesure commode, c'est qu'elle ignore l'ordre des couleurs : échangez le texte et le fond et vous trouvez le même nombre, car le calcul place toujours la couleur claire au numérateur.

Qu'est-ce que WCAG AA et AAA ?

Les WCAG (règles pour l'accessibilité des contenus web) définissent deux niveaux de conformité pour la lisibilité. Le niveau AA demande un contraste de 4,5:1 pour le texte normal et de 3:1 pour le grand texte ; c'est la base visée par les organismes publics et la plupart des produits professionnels. Le niveau AAA monte la barre à 7:1 pour le texte normal et 4,5:1 pour le grand texte, et il est difficile à tenir sur une page entière. Les logos, les boutons désactivés et le texte décoratif sont exclus de la règle.

Qu'est-ce que Luminance relative ?

La luminance relative dit combien de lumière une couleur envoie de l'écran vers votre œil, sur une échelle de 0 (noir) à 1 (blanc). Le calcul se fait en deux temps : chaque canal est d'abord linéarisé, c'est-à-dire que la courbe gamma de l'écran est annulée ; puis les canaux sont additionnés avec les poids 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Ces poids traduisent la sensibilité de l'œil, très forte au vert et presque nulle au bleu — c'est pourquoi éclaircir le bleu n'améliore presque jamais un contraste.

Quelle différence entre AA et AAA ?

Les deux niveaux utilisent le même rapport de contraste ; seule la note de passage change : pour le texte normal, AA demande 4,5:1 et AAA 7:1. L'écart est plus grand qu'il n'y paraît — sur fond blanc, le gris le plus clair qui passe AA est #767676, tandis que le plus clair qui passe AAA est #595959 : il faut donc assombrir nettement le texte courant. En pratique, AA se vise pour toute la page ; AAA se réserve aux écrans de lecture longue, utilisés en plein air ou destinés à un public âgé.

Pourquoi un gris qui vous semble lisible échoue-t-il au test ?

Le rapport de contraste se calcule à partir de la luminance des deux couleurs à l'écran ; or cette luminance n'est pas la lecture directe des nombres du code HEX. Les canaux sont d'abord linéarisés, puis le vert reçoit trois fois plus de poids que le rouge et dix fois plus que le bleu — parce que l'œil voit beaucoup le vert et très peu le bleu.

La conséquence pratique : deux couleurs qui paraissent aussi sombres l'une que l'autre ne donnent pas le même rapport. Sur fond blanc, le bleu pur #0000FF sort à 8,59:1, tandis que le vert foncé #008000 ne fait que 5,14:1. C'est pourquoi la décision se prend au chiffre et non à l'œil ; la luminosité de votre écran fausse d'ailleurs votre jugement.

Quel seuil viser ?

AA est le niveau de base attendu pour la plupart des services ouverts au public ; AAA est réellement exigeant et ne s'applique généralement pas à l'ensemble du texte courant.

• Texte courant, étiquette de formulaire, message d'erreur → au moins AA texte normal (4,5:1)
• Grand titre (18 pt ou 14 pt gras) → 3:1 suffit
• Public âgé ou écran lu en plein air → visez AAA (7:1)
• Texte d'aide en gris pâle → le point d'échec le plus fréquent ; ne descendez pas sous 4,5:1

Questions fréquentes

Comment le rapport de contraste est-il calculé ?

La luminance relative de chaque couleur est calculée séparément, puis on prend le rapport (claire + 0,05) / (foncée + 0,05). Le résultat va de 1:1 au minimum (deux couleurs identiques) à 21:1 au maximum (noir sur blanc).

Le grand texte, c'est combien de points exactement ?

Les WCAG définissent le grand texte à partir de 18 points, ou de 14 points s'il est en gras. Sur le web, cela correspond à peu près à 24 pixels en graisse normale et 18,66 pixels en gras.

L'ordre des couleurs compte-t-il ? Si j'échange texte et fond, le résultat change-t-il ?

Non. La formule regarde d'abord laquelle des deux couleurs est la plus claire, donc échanger le texte et le fond ne change pas le rapport. La seule chose qui change est votre impression de lisibilité.

Les couleurs sont-elles envoyées quelque part ?

Non. Le calcul se fait entièrement dans votre navigateur ; les codes couleur que vous écrivez ne partent vers aucun serveur ni aucun tiers.