Contrast Checker
Check the contrast ratio between two colors for WCAG accessibility compliance.
Preview
Large Text (18pt+)
Heading Example
This is an example of large text content to demonstrate contrast.
Normal Text (under 18pt)
Regular paragraph text that users would typically read.
Smaller text that might be used for secondary content.
Vérificateur de Contraste des Couleurs
Assure-toi que tes designs web respectent les normes d'accessibilité grâce à notre vérificateur professionnel de contraste. Teste les combinaisons de couleurs selon les directives WCAG 2.1 pour la conformité AA et AAA.
Pourquoi utiliser notre vérificateur de contraste ?
Notre vérificateur de contraste des couleurs est un outil essentiel pour les designers et développeurs web qui veulent créer des expériences numériques accessibles et inclusives. Cet outil puissant t'aide à garantir que tes combinaisons de couleurs respectent les normes strictes des Règles pour l'accessibilité des contenus Web (WCAG), rendant ton contenu utilisable par les personnes ayant diverses déficiences visuelles.
La conformité en matière d'accessibilité ne se limite pas au respect des réglementations—il s'agit d'atteindre le public le plus large possible. Environ 1 homme sur 12 et 1 femme sur 200 dans le monde présentent une forme de deficiency de la vision des couleurs, et beaucoup d'autres bénéficient d'un contraste élevé en raison de l'âge ou de conditions d'éclairage difficiles.
Notre outil fournit un retour instantané sur tes choix de couleurs, en montrant exactement quelles combinaisons fonctionnent et lesquelles échouent, t'aidant à prendre des décisions éclairées sur les couleurs de ton design system et de ton interface utilisateur.
Avantages clés
- Conformité légale: Respecte les exigences d'accessibilité comme l'ADA, la Section 508 et les normes WCAG
- Meilleure expérience utilisateur: Crée des interfaces faciles à lire et à parcourir pour tous les utilisateurs
- Design professionnel: Garantit que tes choix de couleurs fonctionnent bien dans tous les contextes et conditions d'éclairage
- Gain de temps: Obtiens des résultats instantanés sans calculs manuels ni conjectures
Comprendre les normes WCAG
Les Règles pour l'accessibilité des contenus Web (WCAG) définissent des ratios de contraste spécifiques qui garantissent la lisibilité du texte :
Niveau AA (conformité minimale)
Ratio 4.5:1 pour le texte normal (moins de 18pt ou 14pt gras)
Ratio 3:1 pour le texte large (18pt+ ou 14pt+ gras)
Niveau AAA (conformité renforcée)
Ratio 7:1 pour le texte normal
Ratio 4.5:1 pour le texte large
Ces ratios garantissent que le texte reste lisible pour les utilisateurs présentant des déficiences de la vision des couleurs, une basse vision, ou visualisant le contenu dans de mauvaises conditions d'éclairage.
Qui devrait utiliser cet outil ?
Designers UI/UX
Créent des interfaces accessibles et des design systems
Développeurs web
Implémentent des schémas de couleurs accessibles en code
Créateurs de contenu
Garantissent la lisibilité du texte sur tous les appareils
WCAG AA vs AAA, expliqué
Le contraste des couleurs est la défaillance d'accessibilité la plus courante sur le web — et l'une des plus faciles à corriger. Voici ce que signifient réellement les chiffres et comment les respecter à chaque fois.
AA (minimum)
4.5:1 pour le texte normal · 3:1 pour le texte large (18pt / 14pt gras ou plus) et les composants d'interface comme les boutons, champs et icônes.
AAA (renforcé)
7:1 pour le texte normal · 4.5:1 pour le texte large. Exigence habituelle dans le secteur public, la santé et les chartes graphiques strictes.
Comment le contraste est calculé
C'est le ratio entre la luminance relative de deux couleurs, de 1:1 (blanc sur blanc) à 21:1 (noir sur blanc) :
(L1 + 0.05) / (L2 + 0.05) La luminance relative pondère chaque canal RGB après correction gamma. C'est pourquoi deux couleurs qui semblent différentes en saturation peuvent échouer pareillement : la saturation ne compte pas, la luminance oui.
Défaillances courantes et solutions
Texte gris sur fond blanc
#999999 sur blanc donne 2.8:1 — échoue au AA. Assombris en #767676 (4.54:1) pour un texte courant conforme.
Texte blanc sur couleurs de marque
Le blanc sur ambre #F59E0B donne 2.2:1. Assombris l'arrière-plan, passes à un texte sombre ou réserve cette association aux éléments décoratifs.
Placeholders peu visibles
Les placeholders gris clair échouent souvent — ils ne sont pas exemptés de WCAG, et un indice invisible est aussi un problème d'utilisabilité.
Liens colorés dans du texte coloré
Un lien dans le texte doit atteindre 4.5:1 sur l'arrière-plan et se distinguer par autre chose que la couleur — souligne-le.
| Type de texte | AA | AAA |
|---|---|---|
| Texte courant (< 18pt) | 4.5:1 | 7:1 |
| Texte large (≥ 18pt / 14pt gras) | 3:1 | 4.5:1 |
| Composants UI et graphiques | 3:1 | — |
Utilise le vérificateur ci-dessus pour tester n'importe quelle paire texte/fond en temps réel. Une couleur accessible n'est pas une couleur ennuyeuse — c'est vérifier les relations de luminance dès le début.