01
Décrire les deux couches visibles
Entrez trois ou six caractères HEX. L’alpha du texte se règle séparément ; un HEX à huit caractères est signalé au lieu de perdre silencieusement sa transparence.
Color & Accessibility
vérificateur de contrastepour un texte lisible
Saisissez deux couleurs HEX, puis adaptez l’opacité et la typographie avant de lire les cinq résultats WCAG.
vérificateur de contraste
Texte de prévisualisation
Rapport de contraste
4.48:1
Résultat pour ce texte: Échec · AA · Seuil 4.5:1
Condition texte normal · Premier plan après fusion: #777777
Texte normal AA · 4.5:1Échec
Texte normal AAA · 7:1Échec
Grand texte AA · 3:1Réussi
Grand texte AAA · 4.5:1Échec
Interface/graphique AA · 3:1Réussi
Aperçu des couleurs
Cette phrase montre les couleurs et la taille choisies.
Couleurs conseillées conformes
Ajuster le premier plan
#767676 · 4.54:1
Ajuster le fond
#060606 · 4.52:1
Le calcul reste dans le navigateur ; aucune couleur n'est envoyée.
Conditions du texte
Le résultat est à jour.
Un gris choisi dans une maquette peut sembler clair et pourtant manquer de peu le seuil AA sur un formulaire blanc. Le vérificateur de contraste révèle cet écart avant la mise en ligne.
Pour analyser le rapport de contraste texte fond, il faut partir de la couleur réellement affichée. Ce vérificateur de contraste mélange d’abord le premier plan transparent au fond, puis calcule la luminance.
Pourquoi utiliser ce vérificateur de contraste
La couleur affichée guide le calcul, et deux pistes de correction restent visibles.
Mesurer la couleur après transparence
Un texte sombre à moitié transparent devient plus clair sur un fond blanc. Le vérificateur de contraste affiche le HEX composé avant de vérifier les seuils, au lieu de traiter le code initial comme une couleur opaque.
Comparer deux corrections sans écraser la marque
Si le niveau visé échoue, une proposition modifie le texte et une autre le fond. Chaque rapport est visible dans l’aperçu ; l’application reste volontaire et peut être annulée une fois.
Trois réglages pour interpréter le résultat
Le même rapport peut conduire à des verdicts différents selon le texte testé.
02
Choisir taille et graisse réelles
Le grand texte commence à 24px en graisse normale ou vers 18,67px en gras. La vérification automatique attend brièvement la fin des changements ; un mode manuel reste disponible.
03
Lire le verdict sans arrondi trompeur
Le rapport s’affiche avec deux décimales, mais le test utilise sa valeur entière. Tant que le résultat est périmé, la copie et l’application d’une suggestion restent bloquées.
Ce que mesurent les cinq contrôles
Distinguez la valeur de contraste du seuil exigé pour chaque usage.
Fusion du premier plan transparent
L’opacité de 0 à 100 % est appliquée au texte sur un fond opaque. Le HEX final est affiché pour expliquer le contraste des couleurs WCAG mesuré.
Seuil selon la typographie
Un texte courant demande 4,5:1 en AA ; un grand texte peut atteindre AA avec 3:1. Une étiquette régulière de 20px ne devient pas du grand texte.
AA, AAA et éléments graphiques
Les textes courants et grands sont jugés aux deux niveaux, avec un contrôle AA distinct pour les graphiques utiles. Le niveau choisi détermine le verdict principal.
Deux propositions réversibles
La luminosité du texte ou du fond peut être ajustée. Le candidat et son nouveau rapport apparaissent avant toute modification des champs.
Les limites d’une seule paire de couleurs
Un bon chiffre ne remplace ni l’audit du site ni l’examen des autres états.
- Fond uni et opaque uniquement
- Un fond transparent dépend d’une couche inférieure inconnue ; photo et dégradé varient selon les pixels. Deux couleurs ne suffisent pas à les représenter.
- Contrat HEX explicite
- Trois ou six caractères HEX sont acceptés, avec ou sans #. Les noms CSS, rgb(), hsl(), OKLCH et HEX à huit caractères ne sont pas interprétés.
- Pas de conformité globale
- Le vérificateur de contraste contrôle cette paire et cette condition typographique. Navigation clavier, focus, autres couleurs et structure de page demandent leurs propres vérifications.
- Pas de score APCA
- Le test de contraste AA AAA ici suit WCAG 2.x. APCA utilise une autre échelle ; ses valeurs ne figurent pas dans le même tableau de réussite.
Questions sur le vérificateur de contraste
Repères sur les seuils, le grand texte, la transparence et la portée du résultat.
Quel rapport de contraste faut-il pour un texte courant ?
Pour le texte courant, le niveau AA exige 4,5:1 et AAA exige 7:1. Le vérificateur de contraste juge la valeur non arrondie, même si l’écran n’affiche que deux décimales.
Qu'est-ce qu'un grand texte au sens des WCAG ?
Les WCAG considèrent comme grand texte au moins 24px en graisse normale ou environ 18,67px en gras. Le seuil AA descend alors à 3:1.
Quelle différence entre les niveaux AA et AAA ?
AA est le minimum renforcé habituel : 4,5:1 pour le texte courant. AAA demande 7:1 pour le même texte et 4,5:1 pour le grand texte.
Comment vérifier le contraste d'un texte transparent ?
La couleur de texte transparente est mélangée au fond opaque canal par canal avant le calcul. À 0 % d’opacité, le texte prend la couleur du fond et le rapport devient 1:1.
Un bon contraste suffit-il à rendre une page accessible ?
Non. Ce résultat concerne une paire et un usage précis. Les étiquettes, le clavier, le focus et les autres états de l’interface doivent encore être examinés.
Une paire de couleurs semble mal évaluée ?
Essayer le vérificateur de contraste
Gardez ce vérificateur de contraste à portée de main pour tester les libellés et couleurs d’un système de design.
Copiez le rapport actuel ou comparez une correction avant de l’appliquer.
Calcul local d’une paire selon WCAG 2.x.