Cinq résultats explicites
Le vérificateur de contraste des couleurs distingue AA normal, AAA normal, AA grand, AAA grand et la référence UI 3:1. Chaque seuil garde son bon usage.
Outil de design WCAG 2.2 gratuit
Vérificateur de contraste des couleurs WCAG
Utilisez ce vérificateur de contraste des couleurs pour mesurer premier plan et arrière-plan, lire les seuils, voir un composant réel et trouver une couleur proche conforme sans envoyer votre palette.
Mis à jour le 25 juillet 2026
vérificateur de contraste des couleurs
Que teste ce vérificateur de contraste des couleurs ?
Ce vérificateur de contraste des couleurs calcule le rapport WCAG entre deux HEX. Il sépare AA et AAA pour texte normal et grand, la référence 3:1 des composants visibles, un aperçu et une matrice. Le vérificateur de contraste des couleurs cherche aussi un premier plan HSB proche atteignant 4.5:1 ou 7:1. Un rapport conforme ne certifie pas une page entière.
Du rapport à une décision exploitable
Le vérificateur de contraste des couleurs réunit nombre, contexte visuel et correction.
Aperçu proche d’une interface
Le vérificateur de contraste des couleurs applique la paire à un titre, un texte, un bouton et un badge avant son entrée dans le système de composants.
Matrice de palette complète
Ajoutez deux à huit couleurs : le vérificateur de contraste des couleurs mesure chaque paire et révèle des combinaisons qu’un calcul isolé laisserait cachées.
WCAG 2.2 · HEX · HSB
Utiliser le vérificateur de contraste des couleurs
Saisissez deux couleurs HEX. Tous les calculs restent instantanés et locaux.
Conforme · AA texte normal
Aperçu d’interface lisible
Le premier plan colore texte, bordures et contrôles sur le fond choisi.
Trouver un premier plan proche conforme
La recherche conserve la teinte si possible, puis ajuste au minimum saturation et luminosité HSB.
Tous les calculs restent dans ce navigateur.
:root {
--accessible-foreground: #1F2937;
--accessible-background: #F9FAFB;
}
.your-component {
color: var(--accessible-foreground);
background: var(--accessible-background);
}Matrice de contraste de palette
Ajoutez deux à huit couleurs. Chaque cellule compare ligne et colonne.
| Couleur | 1#1F2937 | 2#F9FAFB | 3#2563EB | 4#F59E0B |
|---|---|---|---|---|
1#1F2937 | — | 14.05:1AA | 2.84:1Sous 3:1 | 6.83:1AA |
2#F9FAFB | 14.05:1AA | — | 4.95:1AA | 2.06:1Sous 3:1 |
3#2563EB | 2.84:1Sous 3:1 | 4.95:1AA | — | 2.41:1Sous 3:1 |
4#F59E0B | 6.83:1AA | 2.06:1Sous 3:1 | 2.41:1Sous 3:1 | — |
Seuils de contraste WCAG 2.2
Le vérificateur de contraste des couleurs sépare les seuils texte de la référence non textuelle 3:1.
| Usage | Niveau | Rapport minimal | Sens |
|---|---|---|---|
| Texte normal | AA | 4.5:1 | Texte sous la définition WCAG du grand texte. |
| Grand texte | AA | 3:1 | 24 CSS px normal ou environ 18.5 CSS px gras. |
| Texte normal | AAA | 7:1 | Objectif renforcé pour petit texte. |
| Grand texte | AAA | 4.5:1 | Objectif renforcé pour grand texte. |
| UI et graphiques | AA | 3:1 | Information visuelle nécessaire face aux couleurs voisines. |
Revue du contraste en trois étapes
Utilisez le vérificateur de contraste des couleurs comme une revue répétable.
1. Tester les couleurs de production
Collez les vrais jetons dans le vérificateur de contraste des couleurs. N’échantillonnez pas une capture compressée si le HEX source existe. Testez séparément les états défaut, survol, actif, focus, erreur, sélection et désactivation.
2. Choisir le seuil adapté
Employez 4.5:1 pour le texte AA ordinaire et 7:1 pour AAA. Le seuil réduit du grand texte ne vaut que si taille et graisse répondent à la définition. Bordures, icônes et états essentiels relèvent plutôt du 3:1 non textuel.
3. Vérifier le composant fini
Après le vérificateur de contraste des couleurs, examinez zoom, thèmes et vrai contenu. Confirmez focus visible, indices sans couleur et tous les états. Le calcul trouve un rapport ; l’examen humain trouve le contexte.
Calcul du vérificateur de contraste des couleurs
Le vérificateur de contraste des couleurs linéarise chaque canal sRGB et applique les poids WCAG de luminance relative : 0.2126 rouge, 0.7152 vert et 0.0722 bleu. Il calcule (L1 + 0.05) / (L2 + 0.05), L1 étant la valeur claire. Deux couleurs identiques donnent 1:1 ; noir et blanc donnent 21:1.
Inverser premier plan et fond ne change pas le nombre, mais le contexte reste important. Transparence, dégradés, images, mélanges et ombres créent d’autres pixels. Composez la transparence sur le fond réel puis testez le résultat solide dans le vérificateur de contraste des couleurs.
Pourquoi un résultat conforme n’est pas un certificat
La conformité WCAG vise des pages et parcours complets. Un vérificateur de contraste des couleurs ignore si le texte est vraiment grand, si une icône porte une information ou si la couleur est le seul indice. Clavier, noms, rôles, ordre du focus et contenu restent à tester.
Gardez le vérificateur de contraste des couleurs comme une étape de l’audit. Notez composant, état, jetons, seuil, date et résultat. Cette trace explique les corrections et sécurise les changements de thème.
Liste de livraison du vérificateur de contraste des couleurs
Validez ces points avant d’utiliser le résultat comme preuve.
- 01
vérificateur de contraste des couleurs: Utiliser les HEX sources plutôt qu’une capture compressée.
- 02
vérificateur de contraste des couleurs: Tester séparément les thèmes clair et sombre.
- 03
vérificateur de contraste des couleurs: Tester défaut, survol, focus, actif, sélection, erreur et désactivation.
- 04
vérificateur de contraste des couleurs: Appliquer 4.5:1 au texte AA ordinaire hors exception.
- 05
vérificateur de contraste des couleurs: Appliquer 7:1 si le texte normal vise AAA.
- 06
vérificateur de contraste des couleurs: Confirmer taille et graisse avant de classer un texte comme grand.
- 07
vérificateur de contraste des couleurs: Examiner icônes, limites et états essentiels face à 3:1.
- 08
vérificateur de contraste des couleurs: Composer la transparence avant de saisir la couleur visible.
- 09
vérificateur de contraste des couleurs: Mesurer la zone la plus faible d’une image ou d’un dégradé.
- 10
vérificateur de contraste des couleurs: Ajouter un indice non coloré aux erreurs, liens et états.
- 11
vérificateur de contraste des couleurs: Tester le focus contre ses environnements proches.
- 12
vérificateur de contraste des couleurs: Zoomer et confirmer contenu et fonctions.
- 13
vérificateur de contraste des couleurs: Essayer le vrai texte, pas seulement un exemple court.
- 14
vérificateur de contraste des couleurs: Noter composant, état, jetons, seuil, résultat et date.
- 15
vérificateur de contraste des couleurs: Choisir des paires approuvées sans imposer toutes les combinaisons.
- 16
vérificateur de contraste des couleurs: Recommencer après tout changement de jeton partagé.
- 17
vérificateur de contraste des couleurs: Vérifier les couleurs forcées si elles sont prises en charge.
- 18
vérificateur de contraste des couleurs: Combiner rapport, clavier, lecteur d’écran et examen visuel.
Sources WCAG primaires
Le vérificateur de contraste des couleurs suit la formule et les seuils publiés ; les documents officiels restent l’autorité.
- WCAG 2.2 1.4.3 fixe 4.5:1 pour le texte AA normal et 3:1 pour le grand texte AA. Critères de contraste WCAG 2.2
- WCAG 2.2 1.4.6 fixe 7:1 pour le texte AAA normal et 4.5:1 pour le grand texte AAA. Critères de contraste WCAG 2.2
- WCAG 2.2 1.4.11 fixe 3:1 pour l’information nécessaire des UI et graphiques face aux couleurs adjacentes. Contraste non textuel WCAG 2.2
Le critère du texte AA indique :
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Sources du vérificateur de contraste des couleurs
Après le vérificateur de contraste des couleurs
Questions sur le contraste
Quel rapport de contraste est bon ?
Pour le texte ordinaire, le vérificateur de contraste des couleurs emploie 4.5:1 pour AA et 7:1 pour AAA. Le grand texte emploie 3:1 et 4.5:1 ; l’information UI nécessaire, généralement 3:1.
3:1 passe-t-il WCAG AA ?
Il peut convenir au grand texte qualifié et à l’information non textuelle, mais pas au texte AA ordinaire. Le vérificateur de contraste des couleurs sépare ces résultats.
Peut-on tester la transparence ?
Le vérificateur de contraste des couleurs accepte des HEX solides. Composez d’abord la transparence sur le vrai fond. Pour une image ou un dégradé, mesurez la zone la plus faible.
Comment fonctionne l’ajustement automatique ?
Le vérificateur de contraste des couleurs explore saturation et luminosité HSB en conservant la teinte si possible. Il propose un premier plan proche, à revoir dans le design.
Un résultat conforme rend-il la page accessible ?
Non. Un vérificateur de contraste des couleurs valide une relation mathématique. Structure, clavier, focus, étiquettes, alternatives et parcours complet demandent aussi des tests.