Vérificateur du contraste des couleurs
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the Accessibility Tester uses, filtered to just contrast findings.
Les contrôles sont exécutés depuis notre serveur ; nous récupérons l’URL saisie et ne conservons pas les résultats. This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. Des compteurs anonymes de résultats par exécution peuvent servir à la recherche agrégée ; les URL, domaines, adresses IP et identifiants ne sont jamais inclus, et aucune statistique issue de moins de 100 exécutions n’est publiée.
S’exécute entièrement dans votre navigateur : rien de ce que vous collez n’est envoyé ni stocké. Des compteurs anonymes de résultats par exécution peuvent servir à la recherche agrégée ; les URL, domaines, adresses IP et identifiants ne sont jamais inclus, et aucune statistique issue de moins de 100 exécutions n’est publiée.
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
Passeport du site Contexte local de ce site enregistré
Données locales
Les cibles enregistrées, les listes nommées et les résumés des vérifications récentes restent uniquement dans ce navigateur.
Évaluer cet outil
À propos de cet outil
Vérifiez le contraste WCAG 2.2 d’une palette ou d’une URL rendue, trouvez des couleurs de premier plan proches qui passent et auditez les jetons CSS dans votre navigateur.
Fonctionnalités
- Calcul exact du contraste pour chaque paire de couleurs collée.
- Alternatives hexadécimales proches qui respectent les seuils AA et AAA.
- Mode URL avec styles réellement calculés dans un navigateur headless.
- Matrice de palette et constats de contraste non textuel.
Fonctionnement
Le mode palette calcule la luminance relative et les rapports WCAG localement. Le mode URL charge la page dans un navigateur mesuré, lit les styles calculés et exécute la règle de contraste axe-core sur le rendu réel.
Limites
- Le mode palette ne rend pas la page et ne voit pas les états focus, survol ou désactivé.
- Le verdict dépend du rendu réel, de l’opacité, de l’héritage et des variables CSS.
- Un contraste correct ne prouve pas à lui seul l’accessibilité de toute l’interface.
Questions fréquentes
Ce contrôle prouve-t-il que ma page est accessible ?
Non. Il vérifie les paires de couleurs, mais pas la typographie, le focus, les images de texte ni tous les parcours clavier.
Quel rapport de contraste faut-il ?
AA demande 4,5:1 pour le texte normal et 3:1 pour le grand texte et les composants non textuels ; AAA demande respectivement 7:1 et 4,5:1.
Où va ma gamme de couleurs ?
Les couleurs collées restent dans le navigateur. Seul le fonctionnement URL envoie l’adresse publique saisie au serveur de rendu.
Comment le fonctionnement URL diffère-t-il du collage ?
Il lit les couleurs réellement calculées après enchaînement, héritage et opacité, au lieu d’estimer un rendu HTML statique.
Problèmes courants et solutions
- Erreur La paire de couleurs échoue au niveau WCAG AA pour le texte habituel Solution : Modifiez le premier plan ou l’arrière-plan jusqu’à atteindre au moins 4,5:1 pour le texte habituel, puis retestez les états survol, priorité, désactivé et visité.
- Erreur La paire de couleurs échoue au niveau WCAG AA pour le grand texte Solution : Modifiez la paire jusqu’à atteindre 3:1 pour un texte normal d’au moins 24 px ou gras d’au moins 18,66 px.
- Avertissement La paire de couleurs échoue au niveau WCAG AAA pour le texte habituel Solution : Ajustez la paire jusqu’à atteindre 7:1 pour le texte habituel lorsque l’AAA est requis.
- Avertissement La paire de couleurs échoue au niveau WCAG AAA pour le grand texte Solution : Ajustez la paire jusqu’à atteindre 4,5:1 pour le grand texte admissible lorsque l’AAA est requis.
- Avertissement La paire de couleurs échoue aux recommandations de contraste non textuel Solution : Augmentez le contraste des icônes essentielles, indicateurs de priorité, contours de contrôles et objets graphiques à au moins 3:1 avec les couleurs voisines.