Vérificateur de Contraste de Couleurs
| AA | AAA | |
|---|---|---|
| Texte normal | ||
| Grand texte | ||
| Composants UI | — |
Aperçu
Petit texte (16px): Voici à quoi ressemble votre texte. The quick brown fox jumps over the lazy dog. 0123456789
Grand texte (24px): Voici à quoi ressemble votre texte.
Comment l'utiliser
- Choisissez les couleurs — Définissez les couleurs du texte et de l'arrière-plan via le sélecteur ou la saisie HEX.
- Lisez le ratio — Le ratio de contraste se met à jour instantanément. Vert = bon, rouge = insuffisant.
- Vérifiez les niveaux WCAG — Voyez réussi/échec pour AA et AAA en texte normal et grand.
- Inversez les couleurs — Échangez rapidement texte et arrière-plan pour tester les deux sens.
Qu'est-ce que le contraste de couleurs ?
Le contraste de couleurs est la différence de luminance entre les couleurs du texte et de l'arrière-plan. WCAG 2.1 définit des ratios minimaux pour garantir la lisibilité du texte aux personnes malvoyantes.
AA exige 4,5:1 pour le texte normal, 3:1 pour le grand texte. AAA exige 7:1 pour le texte normal, 4,5:1 pour le grand texte. Le grand texte est 18pt+ ou 14pt+ gras.
Les niveaux WCAG en un coup d'œil
Conseils & bonnes pratiques
La plupart des lois sur l'accessibilité exigent la conformité WCAG AA. Le niveau AAA est idéal mais pas toujours obligatoire.
Utilisez des icônes, soulignements ou graisses en plus de la couleur pour transmettre le sens aux daltoniens.
Vérifiez le contraste avec vos tailles et graisses de police réelles — les polices fines nécessitent un contraste plus élevé.
Le texte clair sur fond sombre nécessite souvent des ratios différents du sombre sur clair. Testez les deux.
Questions fréquentes
De quel ratio de contraste ai-je besoin ?
Au minimum 4,5:1 pour le texte normal (WCAG AA). Pour le grand texte (18px+ gras ou 24px+), 3:1 suffit. Le niveau AAA exige 7:1.
Qu'est-ce qui compte comme « grand texte » ?
18pt (24px) en graisse normale, ou 14pt (18,66px) en gras. Ces seuils sont définis par WCAG 2.1.
La conformité WCAG est-elle légalement obligatoire ?
Dans de nombreux pays, oui — surtout pour les sites gouvernementaux et publics. L'ADA (USA), l'EAA (UE) et des lois similaires font référence à WCAG.
Ce contrôle fonctionne-t-il pour les daltoniens ?
Le ratio de contraste mesure la différence de luminance, ce qui aide tous les utilisateurs, y compris ceux ayant une déficience de la vision des couleurs. Mais testez aussi avec des outils de simulation du daltonisme.