Vérificateur de contraste

Vérifiez le rapport de contraste WCAG entre deux couleurs et voyez les résultats AA et AAA.

Premier plan (texte)

Arrière-plan

Texte d'exemple — Portez ce vieux whisky au juge blond qui fume

18.88:1Rapport de contraste (formule WCAG)

Texte normal AA (≥ 4,5:1)Réussi

Texte normal AAA (≥ 7:1)Réussi

Grand texte AA (≥ 3:1)Réussi

Grand texte AAA (≥ 4,5:1)Réussi

Cet outil ne fait que rapporter le résultat brut de la formule de contraste WCAG et la réussite/l'échec face aux quatre seuils ; il ne signifie pas que « cette page est conforme aux WCAG ». La conformité réelle dépend aussi de la taille et de la graisse de la police et du reste de votre design.

CSS ET DESIGN SIMILAIRES

Tout voir

Code en image

Transformez vos extraits de code en captures d'écran soignées.

Ouvrir →

Générateur de dégradés CSS

Créez des dégradés linéaires, radiaux et coniques et copiez le CSS aussitôt.

Ouvrir →

Glassmorphism CSS

💬 Commentaires

Aucun commentaire pour le moment. Soyez le premier !

QU'EST-CE QUE Vérificateur de contraste ?

Le vérificateur de contraste des couleurs calcule le rapport de contraste entre les couleurs de premier plan et d'arrière-plan avec la formule WCAG, en signalant la réussite AA/AAA pour le texte normal et le grand texte.

Important

La réussite/l'échec est toujours indiqué par du texte et une icône — jamais par la couleur seule.
Cet outil ne vérifie qu'une seule paire de couleurs — réussir ne signifie pas qu'une page entière est conforme aux WCAG.

Comment l'utiliser ?

Choisissez les couleurs de premier plan et d'arrière-plan (échantillon ou saisie hexadécimale).
Examinez l'aperçu en direct et le résultat du contraste.

Questions fréquentes

Réussir le niveau AA signifie-t-il que ma page est conforme aux WCAG ?

Pas nécessairement. Cet outil ne fournit que le calcul brut du rapport de contraste et la réussite/l'échec par rapport aux quatre seuils — la véritable conformité WCAG dépend aussi de la taille et de la graisse de la police ainsi que de l'ensemble de votre design.

Pourquoi la réussite/l'échec n'est-il pas indiqué par la couleur seule ?

La couleur seule (p. ex. un point vert ou rouge) est inaccessible aux personnes daltoniennes ; chaque seuil affiche donc toujours une icône et une étiquette textuelle (Réussite/Échec).

Comment un arrière-plan semi-transparent est-il géré ?

Un arrière-plan transparent nécessite une couleur de « fond de canevas » opaque supplémentaire — l'outil utilise la logique de composition existante du noyau pour calculer la couleur opaque résultante avant de calculer le contraste.