Vérifiez la conformité WCAG AA et AAA de vos combinaisons de couleurs. Calculez le ratio de contraste et testez l'accessibilité de votre texte. 100% gratuit et sans inscription.
Grand texte (18px+)
Texte normal — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verifiez la lisibilite de votre combinaison de couleurs.
17.06:1
Ratio de contraste
Niveau
Texte normal
Grand texte (18px+)
WCAG AA
Valide
Valide
WCAG AAA
Valide
Valide
AA requis : 4.5:1 normal / 3:1 grand — AAA requis : 7:1 normal / 4.5:1 grand
Pourquoi vérifier le contraste de vos couleurs ?
L'accessibilité web n'est pas seulement une bonne pratique : c'est une obligation légale pour
de nombreux acteurs (services publics, grandes entreprises) et un facteur de qualité pour tous.
Les normes WCAG (Web Content Accessibility Guidelines) définissent des ratios de contraste minimum
pour garantir que le contenu est lisible par le plus grand nombre.
Notre calculateur utilise la formule officielle de luminance relative du W3C pour calculer le ratio
exact entre vos couleurs de texte et de fond, et vous indique si vous êtes conformes aux niveaux
AA et AAA pour le texte normal et le grand texte.
Fonctionnalités
Calcul précis — Utilise la formule de luminance relative officielle du W3C.
Double conformité — Vérification simultanee WCAG AA et AAA pour texte normal et grand texte.
Aperçu live — Visualisez vos couleurs en situation réelle avec du vrai texte.
Selecteur de couleur — Entrez en HEX ou utilisez le color picker natif du navigateur.
Inversion rapide — Echangez texte et fond en un clic pour tester les deux sens.
Export du rapport — Copiez les résultats pour votre documentation d'accessibilité.
Questions fréquentes
Qu'est-ce que le ratio de contraste WCAG ?
Le ratio de contraste WCAG mesure la différence de luminosite entre deux couleurs. Il va de 1:1 (identique) à 21:1 (noir sur blanc). Les normes WCAG 2.1 exigent un minimum de 4.5:1 pour le texte normal (AA) et 7:1 pour le niveau AAA. Pour le grand texte (18px+ ou 14px+ en gras), les seuils sont abaisses à 3:1 et 4.5:1.
Quelle est la différence entre WCAG AA et AAA ?
WCAG AA est le niveau de conformité minimal recommande pour la majorité des sites. WCAG AAA est le niveau le plus exigeant, requis pour les services publics et certains contextes légaux. AA garantit une lisibilité correcte pour la plupart des utilisateurs, y compris ceux souffrant de deficiences visuelles moderees.
Comment corriger un contraste insuffisant ?
Pour augmenter le contraste, assombrissez la couleur du texte ou eclaircissez la couleur de fond (ou les deux). En HSL, réduisez la luminosite du texte ou augmentez-la pour le fond. Des combinaisons comme noir sur blanc, blanc sur bleu fonce, ou texte sombre sur fond clair passent facilement les critères WCAG.
Pourquoi l'accessibilite des couleurs est-elle importante ?
Environ 8% des hommes et 0.5% des femmes souffrent de daltonisme. De nombreuses autres personnes ont des deficiences visuelles partielles. Un contraste suffisant beneficie aussi aux utilisateurs en plein soleil, sur des ecrans de faible qualite, ou simplement en vieillissant. C'est une exigence legale pour les services publics en France.
Le ratio de contraste s'applique-t-il aux images et icones ?
Oui, les elements graphiques porteurs d'information (icones, graphiques, boutons iconiques) doivent aussi respecter un ratio de 3:1 contre leur environnement (WCAG 1.4.11). Ce calculateur se concentre sur le contraste texte/fond, mais le principe s'applique a tous les elements visuels fonctionnels.
Chaque semaine, le meilleur de la tech française
Tendances, salaires, outils et opportunités — directement dans votre boîte mail.
