Assurez-vous que votre texte est lisible par tous
Du texte gris clair sur fond blanc, du texte blanc sur un bouton pastel ou des liens bleus sur fond sombre peuvent sembler élégants sur une maquette, mais s'avérer illisibles pour vos utilisateurs. Ce vérificateur de contraste mesure le ratio de contraste entre n'importe quelle couleur de texte et de fond. Il vous indique instantanément si votre combinaison respecte les règles d'accessibilité du Web (WCAG) aux niveaux AA et AAA — et si ce n'est pas le cas, il vous suggère la couleur conforme la plus proche.
Fonctionnalités
- Ratio de contraste de 1:1 à 21:1.
- Résultats WCAG 2 AA et AAA pour le texte normal, le grand texte et les composants d'interface (UI).
- Tous les formats de couleur : HEX, RGB, HSL ou noms de couleurs CSS.
- Aperçu en direct avec titre, corps de texte et petit texte.
- Suggestions de couleurs accessibles qui conservent votre teinte.
- Bouton d'inversion pour tester les versions clair sur sombre.
Les exigences WCAG en un coup d'œil
| Contenu | AA | AAA |
|---|---|---|
| Texte normal | 4.5:1 | 7:1 |
| Grand texte (≥ 24 px, ou ≥ 19 px en gras) | 3:1 | 4.5:1 |
| Composants d'interface (UI) et graphiques | 3:1 | — |
| Logos et texte décoratif | Aucune exigence | Aucune exigence |
Combinaisons courantes
| Texte | Fond | Ratio | Texte normal AA |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Conforme |
| #767676 | #FFFFFF | 4.54:1 | Conforme (le gris le plus clair accepté) |
| #999999 | #FFFFFF | 2.85:1 | Non conforme |
| #FFFFFF | #0EA5E9 | 2.77:1 | Non conforme |
| #FFFFFF | #0369A1 | 5.93:1 | Conforme |
Outils associés
Convertissez des couleurs entre différents formats avec le Convertisseur de couleurs, créez une palette complète avec le Générateur de palette de couleurs, ou prélevez des couleurs exactes sur une capture d'écran avec le Sélecteur de couleurs d'image.