Vérificateur de contraste des couleurs

Qu'est-ce que Vérificateur de contraste des couleurs ?

Le Vérificateur de contraste des couleurs est un outil en ligne gratuit de rapport de contraste WCAG pour les designers, les développeurs et les testeurs d'accessibilité. Il prend une couleur de premier plan (texte) et une couleur de fond, calcule la luminance relative de chacune et indique le rapport de contraste sous forme de valeur de 1:1 à 21:1. Il vous dit ensuite si ce rapport atteint le niveau AA de WCAG 2.1 (4.5:1 normal, 3:1 grand) et le niveau AAA (7:1 normal, 4.5:1 grand), et affiche les deux couleurs dans un aperçu en direct avec un texte d'exemple pour que vous puissiez juger la lisibilité d'un coup d'œil. Utilisez-le pour vérifier que le corps de texte, les boutons, les liens et les libellés sont lisibles avant de publier un design.

Comment utiliser Vérificateur de contraste des couleurs

1. Tapez ou collez la couleur de premier plan (texte) sous forme de valeur HEX, ou cliquez sur son sélecteur de couleur natif pour la choisir visuellement.
2. Faites de même pour la couleur de fond sur laquelle repose le texte.
3. Lisez la sortie du rapport de contraste, affichée sous forme de valeur comme 4.5:1 (1:1 correspond à des couleurs identiques, 21:1 à du noir pur sur du blanc).
4. Vérifiez les badges AA et AAA pour le texte normal et pour le grand texte (18pt / 14pt en gras et plus) afin de voir quels niveaux sont satisfaits.
5. Regardez l'aperçu avec le texte d'exemple rendu avec vos deux couleurs pour confirmer que le texte est confortablement lisible.
6. Ajustez l'une ou l'autre couleur jusqu'à atteindre le niveau de contraste dont votre design a besoin.

Exemples

Premier plan #595959, Fond #ffffff

Rapport 7.00:1 — satisfait AA et AAA pour le texte normal et le grand texte

Premier plan #999999, Fond #ffffff

Rapport 2.85:1 — échoue à AA normal et AAA, ne satisfait rien de ce qui est requis pour le corps de texte

Premier plan #767676, Fond #ffffff

Rapport 4.54:1 — satisfait AA normal et AA grand, mais échoue à AAA normal

Questions fréquentes

Quels rapports de contraste WCAG exige-t-il ?

Le niveau AA de WCAG 2.1 nécessite au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA est plus strict : 7:1 pour le texte normal et 4.5:1 pour le grand texte. Ce vérificateur affiche un badge réussite/échec pour chacun de ces quatre seuils.

Qu'est-ce qui compte comme grand texte ?

WCAG définit le grand texte comme 18pt (environ 24px) et plus, ou 14pt (environ 18.66px) et plus en gras. Le grand texte a une exigence de contraste moindre car les glyphes plus grands sont plus faciles à lire, c'est pourquoi les badges de grand texte peuvent réussir alors que ceux du texte normal échouent.

Comment le rapport de contraste est-il calculé ?

Il utilise la formule officielle WCAG : la luminance relative de chaque couleur est calculée à partir de ses canaux sRGB linéarisés, et le rapport est (plus clair + 0.05) / (plus sombre + 0.05). Le résultat va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).

Prend-il en charge l'alpha, le RGB ou les couleurs nommées ?

L'entrée est uniquement en HEX (#rgb abrégé ou #rrggbb), avec un sélecteur de couleur natif pour chaque champ. Il ne tient pas compte de l'alpha/opacité ni de la transparence partielle — fusionnez d'abord les calques semi-transparents en une couleur unie, puis vérifiez-la.

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

Non. Les calculs de luminance et de rapport s'exécutent entièrement dans votre navigateur avec JavaScript — aucune couleur n'est envoyée et rien n'est transmis à un serveur, il fonctionne donc en toute confidentialité et même hors ligne une fois la page chargée.