Contrast Checker
WCAG contrast check
WCAG contrast check S'exécute localement dans votre navigateur
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
Le vérificateur de contraste mesure le rapport de contraste entre une couleur de texte et une couleur d'arrière-plan à l'aide de la formule de luminance WCAG et vous indique les niveaux d'accessibilité que cette paire réussit. Il s'agit du contrôle qui détermine si le corps du texte est réellement lisible : un rapport de 4,5 : 1 est le minimum pour un texte normal, de 3 : 1 pour un texte de grande taille et pour les limites de l'interface, et de 7 : 1 pour une conformité améliorée. Juger le contraste à l'œil nu n'est pas fiable, car l'œil est beaucoup plus sensible au vert qu'au bleu, c'est pourquoi un jaune qui semble brillant et un bleu qui semble sombre peuvent obtenir des résultats presque identiques.
Where people use the
- Vérifier si le corps du texte sur un fond coloré répond aux normes AA.
- Choisir entre le texte noir et blanc pour la couleur d'un bouton.
- Audit d'une palette existante avant une refonte.
- Documenter une décision d’accessibilité dans un ticket.
How to use the
- 1
Définir la couleur du texte
Tapez une valeur hexadécimale telle que 1a1a1a ou utilisez le sélecteur de couleurs. Un raccourci à trois chiffres tel que f0a est accepté.
- 2
Définir la couleur d'arrière-plan
Idem pour le fond. L'aperçu est mis à jour à mesure que vous modifiez l'un ou l'autre.
- 3
Lire le rapport
Le nombre va de 1:1, couleurs identiques, à 21:1, noir sur blanc. Plus haut signifie plus lisible.
- 4
Vérifiez le niveau dont vous avez besoin
Le corps du texte normal a besoin de 4,5 pour 1 pour AA et de 7 pour 1 pour AAA. Les titres en gras 18 pt ou 14 pt et les bordures de l'interface utilisateur doivent être de 3 pour 1.
- 5
Regardez l'aperçu ainsi que le numéro
Une paire peut passer sur papier et néanmoins paraître médiocre sur une petite taille ou sur un écran de mauvaise qualité. Si cela semble difficile à lire, c’est difficile à lire.
Conseils et bonnes pratiques
- Assombrir une couleur pour le texte, conserver la version la plus claire pour les remplissages.
- Vérifiez la taille la plus petite à laquelle le texte sera réellement utilisé.
- Les bordures et les icônes ont également besoin de 3 pour 1, pas seulement du texte.
Questions fréquemment posées
Quelle est la formule du rapport de contraste ?
Chaque couleur est convertie en luminance relative en utilisant les poids standards, 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu, après correction gamma. Le rapport est alors la luminance la plus claire plus 0,05 divisée par la luminance la plus sombre plus 0,05. Le résultat varie de 1:1 à 21:1.
Pourquoi la couleur de ma marque échoue-t-elle ?
Parce que la plupart des couleurs saturées dans les tons moyens ne peuvent pas atteindre 4,5 pour 1 par rapport au blanc. La solution habituelle consiste à assombrir la couleur pour l'utilisation du texte tout en conservant la version plus claire pour les grands remplissages, ce qui est exactement ce que font la plupart des systèmes de conception avec leur couleur primaire.
Est-il suffisant de réussir le ratio pour être accessible ?
C’est nécessaire mais pas suffisant. Le texte très grand ou très petit, les polices de caractères fines, le texte sur les images et certaines formes de déficience de la vision des couleurs affectent tous la lisibilité au-delà du rapport. Testez avec de vrais utilisateurs lorsque vous le pouvez.
La direction est-elle importante, clair sur sombre ou sombre sur clair ?
Non. Le rapport est symétrique, donc noir sur blanc et blanc sur noir obtiennent tous deux un score de 21 : 1. Ce qui diffère dans la pratique, c'est l'éblouissement et le poids perçu, qui relèvent d'un jugement de conception plutôt que d'une question de conformité.
Qu'est-ce qui constitue un texte volumineux ?
En termes WCAG, 18 pts ou plus, ou 14 pts ou plus en gras. En pixels CSS, cela fait environ 24 pixels, ou environ 18,66 pixels en gras.
Où se fait le calcul ?
Entièrement dans votre navigateur. Rien n'est téléchargé, vous pouvez donc vérifier les couleurs à partir d'une directive de marque qui n'est pas encore publique.