Contrast Checker calcule le rapport de contraste WCAG 2.1 entre deux couleurs et les évalue par rapport aux seuils AA/AAA pour le texte normal et le texte large. Un aperçu en direct affiche le texte rendu dans les couleurs choisies, et un bouton "prélever l'arrière-plan de la page" échantillonne la page actuelle.
L'accessibilité est de plus en plus exigée — la conformité WCAG est une obligation légale dans de nombreuses juridictions, et même si ce n'est pas le cas, un mauvais contraste repousse les utilisateurs. Contrast Checker vous indique instantanément si deux couleurs respectent les normes WCAG. Choisissez un premier plan et un arrière-plan via le sélecteur de couleurs ou collez des valeurs hexadécimales ; l'outil calcule le rapport de contraste à l'aide de la formule officielle de luminance WCAG et l'évalue par rapport à quatre seuils : AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1) et AAA large (≥4.5:1). Chaque seuil affiche un badge clair Réussite/Échec. Un aperçu en direct affiche du texte large et normal dans les couleurs choisies pour voir l'impact visuel réel. Un bouton pratique échantillonne la couleur d'arrière-plan du corps de la page actuelle. Tout s'exécute localement dans votre navigateur, sans téléchargement.
Utilise la formule officielle de luminance WCAG pour calculer le rapport de contraste. Le résultat est exact et correspond à tout vérificateur d'accessibilité conforme.
Réussite/échec pour AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), AAA large (≥4.5:1) — tous affichés sous forme de grille.
Rendu du texte large et normal réel dans les couleurs choisies pour voir l'impact visuel à côté du rapport numérique.
Échantillonne en un clic la couleur d'arrière-plan calculée du corps de la page actuelle — utile pour tester des combinaisons réelles.
Tapez une valeur hexadécimale ou utilisez le sélecteur de couleurs natif. Les valeurs se synchronisent de manière bidirectionnelle lors de l'édition.
Inverse en un clic les couleurs de premier plan et d'arrière-plan — utile pour vérifier les thèmes inversés ou les états de survol.
Avant de finaliser une palette de couleurs, vérifiez chaque couleur de texte par rapport à son arrière-plan pour garantir la conformité WCAG AA — évite les retouches ultérieures.
Utilisez "prélever l'arrière-plan" sur un site en direct, puis collez la couleur réelle du texte — trouvez les violations d'accessibilité en quelques minutes.
Lorsqu'une marque choisit une couleur qui ne respecte pas l'accessibilité, utilisez le vérificateur pour trouver la variante conforme la plus proche.
Vérifiez que les couleurs des états de survol/actifs/désactivés respectent toujours les exigences de contraste, pas seulement l'état par défaut.
Les thèmes sombres échouent souvent sur le contraste pour le texte gris sur gris. Vérifiez vos gris les plus sombres contre vos fonds les plus sombres.
Cliquez sur l'icône Contrast dans le dock DevSuite Pro. Un panneau s'ouvre avec les champs de couleur de premier plan et d'arrière-plan.
Utilisez le sélecteur de couleurs ou collez une valeur hexadécimale pour chacun. L'aperçu en direct se met à jour à mesure que vous changez les couleurs.
Le grand nombre (ex. 4.8:1) est le rapport de contraste. Plus il est élevé, mieux c'est. 3 est le minimum absolu ; 4.5 est la cible pour le texte normal.
Des badges Réussite/Échec pour AA et AAA, tailles de texte normal et large, montrent en un coup d'œil ce que votre combinaison qualifie.
En cas d'échec, ajustez les couleurs. Assombrissez le premier plan ou éclaircissez l'arrière-plan (ou vice versa) jusqu'à ce que le niveau cible affiche Réussite.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
