Vérificateur de contraste
Calculez le ratio de contraste WCAG entre deux couleurs avec les verdicts AA et AAA pour texte normal et texte grand, ainsi qu'un aperçu en direct. Tout se passe dans votre navigateur.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
Cet outil s'exécute entièrement dans votre navigateur. Vos données ne quittent jamais votre appareil — elles ne sont envoyées à aucun serveur.
Mode d'emploi
- 1Saisissez une valeur hex ou rgb(), ou utilisez la pipette, pour le premier plan.
- 2Faites de même pour la couleur de fond.
- 3Lisez le ratio et les verdicts AA / AAA, ou touchez un préréglage.
- 4Jugez l'ensemble à l'œil grâce au bloc d'aperçu.
Vérificateur de contraste
Saisissez une couleur de premier plan et une couleur de fond — hex comme #333 ou #1F2937, ou rgb()/rgba() — et lisez le ratio de contraste WCAG à deux décimales, avec immédiatement les verdicts des quatre seuils qui comptent : AA et AAA, pour texte normal et texte grand. Un aperçu montre un paragraphe et un titre dans les couleurs réelles.
Le calcul suit la formule officielle de luminance relative de WCAG 2.x, la même que celle du vérificateur du W3C : un 4,5 ici est un 4,5 partout. Parmi les préréglages, une paire grise à 4,54:1 vous fait mesurer à quel point le seuil AA est serré.
Questions fréquentes
Quel ratio de contraste faut-il pour passer ?
Selon WCAG 2.x : le texte courant exige 4,5:1 pour le niveau AA et 7:1 pour l'AAA. Le texte grand — au moins 24 px, ou 18,7 px en gras — exige 3:1 en AA et 4,5:1 en AAA. Les composants d'interface et les graphiques exigent 3:1.
Comment le ratio est-il calculé ?
Chaque couleur est linéarisée depuis sRGB puis combinée en une luminance relative L = 0,2126·R + 0,7152·G + 0,0722·B ; le ratio vaut (L clair + 0,05) / (L sombre + 0,05). C'est la formule exacte de la spécification WCAG 2.x. Un alpha rgba() inférieur à 1 est aplati sur blanc avant le calcul.
Outils associés
Convertisseur de couleurs
Collez une couleur en hex, rgb() ou hsl() et obtenez les trois formats plus une rangée prête à l'emploi de teintes et nuances pour votre design system.
Tous les outils →
Sélecteur de couleurs
Choisissez une couleur dans l'échantillon ou capturez-en une directement à l'écran avec l'API EyeDropper — hex, RGB et HSL copiés en un clic.
Tous les outils →
Calculateur de notes
Calculateur de notes pondérées ou par points : ajoutez vos devoirs, suivez votre moyenne et votre lettre en direct, et découvrez exactement la note à viser à l'examen final.
Tous les outils →
Intégrer cet outil
Ajoutez cet outil à votre site en une ligne — il s'exécute dans le navigateur du visiteur.
<iframe src="https://zoyku.com/fr/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>