Vérificateur de contraste de couleur

Vérifiez le contraste de couleurs WCAG dans votre navigateur

Ce vérificateur de contraste de couleurs mesure le ratio de contraste WCAG entre une couleur de texte et une couleur de fond, et vous indique instantanément si la paire passe les niveaux AA et AAA pour le texte normal, le grand texte et les composants d'interface. Saisissez une valeur hexadécimale, modifiez les champs RGB ou HSL, faites glisser le curseur de luminosité ou utilisez la pipette pour capturer n'importe quelle couleur de votre écran — le ratio, la matrice de résultats et l'aperçu en direct se mettent à jour à la saisie.

Il fonctionne comme les outils auxquels les designers font déjà confiance — la même formule WCAG que WebAIM et Adobe Color — mais ajoute un aperçu lisible en temps réel, un score APCA (WCAG 3) et une correction automatique pour les paires échouées. Tout s'exécute localement en JavaScript : vos couleurs ne quittent jamais votre appareil et aucun compte n'est requis.

Seuils WCAG AA et AAA expliqués

Le ratio de contraste WCAG va de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc). Le niveau AA — le standard requis par la plupart des lois comme l'ADA et la Section 508 — nécessite 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA élève ces valeurs à 7:1 et 4,5:1. Le grand texte désigne 18pt (24px) et plus, ou 14pt (environ 18,66px) et plus en gras.

La matrice de résultats détaille chaque seuil séparément, pour que vous voyiez d'un coup d'œil qu'un gris comme #767676 sur blanc passe AA pour le texte courant à 4,54:1 mais n'atteint pas les 7:1 requis pour AAA. Si votre équipe doit satisfaire à la conformité légale (ADA, EN 301 549, Section 508), AA est le niveau à atteindre. AAA vaut la peine d'être visé dans les interfaces à forte lecture où les utilisateurs malvoyants sont prioritaires.

Prévisualisez, corrigez et déployez des paires de couleurs accessibles

Les chiffres ne racontent que la moitié de l'histoire, c'est pourquoi l'aperçu en direct affiche de vrais titres, du texte courant, du petit texte et un bouton et une puce d'exemple dans vos couleurs exactes — observez la lisibilité plutôt que de simplement lire le ratio. Quand une paire échoue, le suggéreur 'Faire passer' conserve votre teinte et saturation et ajuste la luminosité vers la couleur la plus proche qui dépasse le niveau choisi (AA, AA grand texte ou AAA), puis l'applique en un seul clic. Vous pouvez ajuster le texte ou le fond, selon votre préférence.

La grille de paires accepte une palette complète et montre quelles combinaisons de couleurs passent d'un coup d'œil — utile lors de la construction d'un système de design où chaque association de premier plan et d'arrière-plan doit être sûre. Au lieu de tester des dizaines de paires une par une, vous collez votre palette une fois et voyez la matrice complète instantanément.

APCA : un aperçu du contraste WCAG 3

En plus du ratio classique, ce vérificateur affiche un score APCA Lc — la métrique de contraste perceptuel proposée pour WCAG 3. L'APCA modélise la façon dont l'œil lit réellement le texte clair sur fond sombre et sombre sur fond clair, et tient compte du poids typographique, détectant ainsi des problèmes de lisibilité que le ratio WCAG 2 manque parfois. Valeurs de référence : Lc 75+ pour le texte courant, Lc 60+ pour le grand texte, Lc 45+ pour les grands titres.

WCAG 3 est encore en brouillon et n'a pas remplacé WCAG 2.2, donc la conformité aujourd'hui signifie respecter les seuils de 4,5:1 et 3:1. Afficher l'APCA à côté des ratios actuels vous permet de préparer votre palette pour l'avenir sans attendre la finalisation de la spécification.

Contraste non textuel pour les icônes et composants d'interface

Le contraste ne concerne pas uniquement le texte. WCAG 2.1 SC 1.4.11 exige 3:1 de contraste pour les contours des composants interactifs — bordures de champs, indicateurs de focus, états de bascule — et pour les icônes et graphiques significatifs. La matrice inclut une vérification dédiée interface et graphiques à 3:1 pour confirmer qu'un contour de bouton ou une icône est visible.

C'est un domaine où beaucoup d'équipes échouent aux audits sans s'en rendre compte. Une bordure de champ gris clair (#D1D1D1 sur blanc donne 1,4:1) est une violation courante de WCAG 2.1 même quand tout le texte de la page passe. Vérifier vos composants d'interface ici prend quelques secondes et évite des surprises lors d'un audit formel.

Comparaison avec WebAIM, Adobe Color et Chrome DevTools

Le vérificateur de contraste de WebAIM sur webaim.org est l'outil d'accessibilité gratuit le plus cité et utilise la même formule WCAG 2 que celui-ci. Il n'affiche pas l'APCA, n'a pas d'aperçu de texte en direct, ne peut pas corriger automatiquement les paires échouées et n'a pas de grille de palette par paires.

Les outils d'accessibilité d'Adobe Color affichent les résultats AA/AAA et incluent un simulateur de daltonisme, mais nécessitent un compte Adobe gratuit pour sauvegarder votre travail et ne peuvent pas suggérer automatiquement une couleur qui passe.

Chrome DevTools dispose d'un badge de ratio de contraste dans le sélecteur de couleur du panneau Éléments qui fonctionne pour les vérifications en navigateur — mais uniquement à l'intérieur de DevTools.

Ce vérificateur fonctionne sans connexion, affiche à la fois les ratios WCAG 2 et le score APCA Lc, présente un aperçu en direct dans vos couleurs et permet de tester une grille de palette complète en une seule vue. Tous les calculs s'exécutent localement en JavaScript.