Vérificateur de Contraste de Couleurs
Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
Mis à jour mai 2026
Vérifié par Rafael Duarte
Good color contrast ensures text is readable for all users, including those with low vision or color blindness. Aim for WCAG 2.2 AA compliance to meet legal accessibility standards.
Accessibility Fix
Your colors pass AA!
No fix needed for normal text contrast.
Color Blindness Simulation
WCAG 2.2 Reference
| Metric | Current Value | Threshold | Status |
|---|---|---|---|
| Normal Text (AA) | 6.18:1 | 4.5:1 | PASS |
| Normal Text (AAA) | 6.18:1 | 7:1 | FAIL |
| Large Text (AA) | 6.18:1 | 3:1 | PASS |
| Large Text (AAA) | 6.18:1 | 4.5:1 | PASS |
| UI Components (AA) | 6.18:1 | 3:1 | PASS |
Comment utiliser le vérificateur de contraste de couleurs
Deux couleurs, conformité instantanée
1. Définissez le texte et le fond
Cliquez sur la pastille ou saisissez le code HEX à 6 chiffres. "Swap Colors" inverse les deux instantanément.
2. Lisez la conformité
Ratio de contraste et statut AA/AAA pour texte normal, texte large et composants d'interface.
3. Corrigez ou simulez le daltonisme
"Accessibility Fix" suggère la couleur conforme la plus proche ; simulez Deutéranopie, Protanopie et plus.
Ce que fait cet outil
Au-delà du simple calcul de ratio de contraste
Suggestion automatique de correction
Trouve la couleur conforme la plus proche en préservant la teinte d'origine.
Simulation de 5 types de daltonisme
Deutéranopie, Protanopie, Tritanopie et Achromatopsie, en plus de la vision normale.
Aperçu de texte en direct
Voyez comment la combinaison se comporte en texte normal, en texte large et dans des composants d'interface.
100% dans le navigateur
Aucune couleur n'est envoyée à un serveur — sûr pour des palettes de marque non encore lancées.
Copier le ratio au clavier
Appuyez sur Shift+Enter n'importe où sur la page pour copier le ratio de contraste actuel — pratique pour le coller directement dans un rapport d'audit.
Références de contraste
Quand vous allez utiliser ça
Les scénarios les plus courants chez les utilisateurs de l'outil
Revue de design web et mobile
Vérifiez texte, boutons et champs avant publication — évite des corrections coûteuses après coup.
Audits de conformité légale
RGAA, EAA et WCAG — le tableau de référence affiche chaque métrique avec son seuil.
Vérification du mode sombre
Les mêmes ratios WCAG s'appliquent — confirmez fond sombre et texte clair.
Accessibilité des couleurs de marque
Vérifiez si la couleur de marque fonctionne en texte ou en composant d'UI, et trouvez l'alternative la plus proche qui passe.
Sécurité pour les utilisateurs daltoniens
Confirmez qu'une combinaison conforme en luminance reste bien distinguable — lancez les simulations de Deutéranopie et Protanopie avant de valider le design final.
Erreur courante ? Commencez ici
Se fier à la différence visuelle plutôt qu'au chiffre
Des couleurs visuellement distinctes peuvent avoir une luminance presque identique et échouer — vérifiez toujours numériquement.
Ignorer le daltonisme même en passant le WCAG
Le WCAG mesure la luminance, pas la distinction de couleur — un rouge/vert peut passer et rester indistinguable.
Ne pas tenir compte de la taille du texte
Le texte large (18pt+) ne demande que 3:1 au lieu de 4,5:1 — augmenter la taille de police donne plus de flexibilité sur la couleur.
Utiliser le seuil des composants d'UI pour du texte
Les composants d'UI exigent seulement 3:1 et n'ont pas de niveau AAA — appliquer cette règle à du texte normal, qui exige 4,5:1, valide par erreur un texte qui échoue en pratique.
Croire que la correction suggérée passe aussi en AAA
Le panneau "Accessibility Fix" vise le minimum AA (4,5:1), pas AAA (7:1) — si votre projet exige AAA, vérifiez le ratio suggéré dans le tableau avant de l'appliquer.
Pourquoi utiliser cet outil
Le manque de contraste reste la violation d'accessibilité la plus fréquente sur le web, touchant la grande majorité des sites testés chaque année (WebAIM Million). Un correcteur automatique et une simulation du daltonisme vont plus loin qu'un simple calcul de ratio : ils montrent comment résoudre le problème et révèlent des cas qu'un chiffre seul ne capture pas.
En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité, fondé sur l'article 47 de la loi du 11 février 2005) impose le WCAG comme référentiel technique pour les sites du secteur public, et la loi pour une République numérique de 2016 en a précisé la portée. Depuis juin 2025, l'European Accessibility Act (EAA) étend des obligations proches à une large part du secteur privé dans toute l'Union européenne, via la norme technique harmonisée EN 301 549.
Pour les autres marchés francophones, pas d'équivalence automatique : la Belgique relève de l'EAA et d'EN 301 549 comme le reste de l'UE, mais sans texte national strictement identique au RGAA ; la Suisse, hors UE, applique son propre cadre (la LHand, loi sur l'égalité pour les handicapés) et n'est pas liée par l'EAA. Dans les trois cas, viser les ratios WCAG reste la bonne pratique commune — seule la base légale qui l'impose change selon le pays.
Exigences WCAG 2.2
AA (minimum légal) vs. AAA (renforcé)
Questions fréquentes
Il calcule le ratio de contraste entre deux couleurs — généralement texte et fond — et détermine si la combinaison respecte les normes WCAG. Il simule aussi le daltonisme et suggère des alternatives accessibles.
Références
Le référentiel technique officiel français, publié par la DINUM, qui s'appuie sur le WCAG.
Explication en français des critères de contraste WCAG et de leurs seuils.
L'outil de référence historique pour vérifier le contraste selon le WCAG.
Outils connexes
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
- Générateur CSS Flexbox Design Générateur CSS Flexbox gratuit : aperçu live, CSS et Tailwind simultanément, 10 layouts prédéfinis, avertissements contextuels et export React/JSX. Sans inscription.
