Vérificateur de contraste WCAG

Saisissez ou choisissez deux couleurs et obtenez le ratio de contraste WCAG instantanément, avec les seuils AA/AAA pour texte normal et grand.

Comment fonctionne Vérificateur de contraste

Le vérificateur de contraste calcule le ratio de contraste WCAG 2.x entre une couleur de premier plan et une couleur de fond, et indique si la paire atteint le niveau AA ou AAA pour le texte normal, le texte grand, et les éléments non textuels comme les icônes ou les contours de focus. Saisissez une valeur hexadécimale ou rgb() pour chaque couleur, ou choisissez-les avec les pastilles, et le ratio ainsi qu'un aperçu de texte en direct se mettent à jour instantanément.

Le calcul reprend la même formule de luminance relative que la section contraste déjà intégrée à l'outil convertisseur de couleur : linéariser chaque canal sRGB, les pondérer à 0,2126/0,7152/0,0722 pour le rouge, le vert et le bleu, puis prendre le ratio entre la luminance la plus claire et la plus sombre. Tout s'exécute dans votre navigateur, une palette de marque non publiée ou une charte protégée par mot de passe ne quitte donc jamais votre appareil.

Rédigé par Bastien Sulyan

Comment utiliser Vérificateur de contraste, étape par étape

Saisissez ou choisissez la couleur de texte (premier plan).
Saisissez ou choisissez la couleur de fond.
Lisez le ratio de contraste et les badges AA/AAA pour le texte normal, le texte grand et les éléments non textuels.
Utilisez Inverser les couleurs pour vérifier la paire dans l'autre sens.

Cas d'utilisation courants

Vérifier la couleur principale d'une marque sur fond blanc ou noir avant de livrer un composant bouton.
Vérifier qu'un texte gris atténué reste conforme AA sur un fond de carte clair.
Confirmer qu'une couleur de lien dans un paragraphe atteint le seuil de 4,5:1 pour le texte normal.
Tester si un grand titre en graisse plus légère passe le seuil assoupli de 3:1 pour le texte grand.

Questions fréquentes

Le vérificateur de contraste envoie-t-il mes couleurs à un serveur ?

Non. Le calcul de luminance et de ratio s'exécute en JavaScript dans votre onglet de navigateur. Les deux couleurs saisies ou choisies ne sont jamais transmises, une palette de marque non publiée reste donc privée.

Quel ratio faut-il pour passer AA ou AAA ?

WCAG 2.x fixe quatre seuils : 4,5:1 pour l'AA en texte normal, 7:1 pour l'AAA en texte normal, 3:1 pour l'AA en texte grand, et 4,5:1 pour l'AAA en texte grand. Un seuil distinct de 3:1 (WCAG 1.4.11) s'applique aux éléments non textuels comme les icônes, bordures et contours de focus ; il est affiché sur sa propre ligne ici.

Qu'est-ce qu'un « texte grand » selon WCAG ?

Au moins 24px (18pt) en graisse normale, ou environ 18,7px (14pt) si le texte est en gras. Tout ce qui est plus petit est traité comme du texte normal et demande le ratio le plus strict.

Pourquoi inverser premier plan et fond ne change-t-il pas le ratio ?

La formule du ratio est symétrique : elle compare seulement la luminance la plus claire et la plus sombre, pas le rôle de chaque couleur. Inverser reste utile pour vérifier que la paire fonctionne aussi avec les rôles inversés, par exemple texte foncé sur puce claire contre texte clair sur puce foncée.

Passer l'AA garantit-il que mon design est accessible ?

Non. Le contraste n'est qu'un critère de succès WCAG parmi d'autres. Le choix des couleurs pour les personnes daltoniennes, la visibilité du focus, le redimensionnement du texte et la navigation au clavier sont des vérifications distinctes ; le simulateur de daltonisme du site couvre l'un de ces points.

Est-ce un outil officiel du W3C ou de WebAIM ?

Non. Il met en œuvre indépendamment la formule de contraste publique WCAG 2.x et n'est affilié ni au W3C ni à aucune autre organisation d'accessibilité.

Outils liés

Tout reste local, explorez des outils complémentaires.

Tous les outils développeur