Vérifier le contraste

Que fait le vérificateur ?

Le vérificateur de contraste prend deux codes HEX et calcule le ratio de contraste selon la spécification WCAG 2.1. Il indique si la combinaison de couleurs satisfait les niveaux de conformité AA et AAA pour le texte normal et le grand texte. Cela permet de détecter les problèmes d’accessibilité avant qu’un design ne soit mis en ligne.

Quelle est la formule de calcul ?

Le calcul suit deux étapes. D’abord on détermine la luminance relative de chaque couleur. Pour cela, les valeurs des canaux sRGB (0–255) sont transformées dans l’espace linéaire et sommées avec pondération :

L = 0,2126 * R_lin + 0,7152 * G_lin + 0,0722 * B_lin

Pour chaque canal vaut : si la valeur normalisée (0–1) est inférieure à 0,04045, on divise par 12,92. Sinon s’applique la formule gamma ((c + 0,055) / 1,055) ^ 2,4.

À la deuxième étape, le ratio de contraste résulte des deux luminances :

Contraste = (L_clair + 0,05) / (L_sombre + 0,05)

Le résultat se situe entre 1:1 (couleurs identiques) et 21:1 (noir sur blanc). WCAG AA exige au minimum 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige respectivement 7:1 et 4,5:1.

Quels exemples d’usage existent ?

Premier plan	Arrière-plan	Ratio	AA Normal	AAA Normal
#000000	#FFFFFF	21:1	Oui	Oui
#767676	#FFFFFF	4,54:1	Oui	Non
#AAAAAA	#FFFFFF	2,32:1	Non	Non
#333333	#FFFFFF	12,63:1	Oui	Oui
#0000FF	#FFFFFF	8,59:1	Oui	Oui
#FF0000	#FFFFFF	4:1	Non	Non
#FFFFFF	#FFFFFF	1:1	Non	Non

La couleur #767676 est un seuil connu : elle atteint tout juste sur fond blanc le seuil AA pour le texte normal.

Quels sont les domaines d’utilisation ?

Web design et développement UI : avant chaque release, les designers et développeurs vérifient si les couleurs de texte offrent un contraste suffisant sur leur fond. Le vérificateur livre la réponse en secondes, sans outil externe ni extension de navigateur.

Audits de design d’entreprise : les brand guidelines définissent couleurs primaires et secondaires comme codes HEX. Qui prépare des rapports de conformité pour RGAA (Référentiel Général d’Amélioration de l’Accessibilité) ou EN 301 549 a besoin de l’évaluation WCAG pour chaque combinaison de couleurs.

Tests d’accessibilité : les outils d’audit automatiques comme Lighthouse signalent les erreurs de contraste mais n’expliquent pas à quel point une couleur est proche du seuil. Le vérificateur affiche la valeur exacte et rend la décision transparente.

Templates d’e-mail : beaucoup de clients ne rendent que les styles inline. Un contrôle rapide de contraste avant envoi évite que du texte clair sur fond clair soit illisible pour une partie des destinataires.

Questions fréquentes

Qu’est-ce qu’un bon ratio de contraste ?

WCAG AA exige au minimum 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige respectivement 7:1 et 4,5:1. Noir sur blanc atteint le maximum de 21:1.

Comment calcule-t-on le ratio de contraste ?

On détermine la luminance relative des deux couleurs selon la formule WCAG 2.1, puis on met la luminance claire et la sombre en rapport (L1 + 0,05) / (L2 + 0,05) et on obtient une valeur entre 1:1 et 21:1.

Qu’est-ce qui compte comme grand texte ?

Au moins 18 pt (24 px) en graisse normale ou 14 pt (18,66 px) en gras. Pour le grand texte, des exigences de contraste plus basses s’appliquent.

La conformité AA suffit-elle ?

AA est l’exigence minimale courante pour sites et applications. AAA offre une meilleure lisibilité mais est plus difficile à respecter et plus rarement obligatoire.

Les couleurs sont-elles envoyées à un serveur ?

Non. Tout le calcul s’exécute en local dans le navigateur. Aucune donnée n’est transmise.

Quels outils couleur sont liés ?

D’autres outils de l’écosystème kittokit qui correspondent au sujet :

• Convertir HEX en RGB — convertir des codes HEX en RGB, HSL et OKLCH pour le CSS-authoring et les workflows design.