Exemple de texte normal - Le vif renard brun.
Exemple de grand texte (18pt+)
–
Rapport de contraste
| Norme | Niveau | Ratio minimum | Résultat |
|---|---|---|---|
| Texte normal | WCAG AA | 4.5:1 | – |
| Grand texte (≥18pt / ≥14pt gras) | WCAG AA | 3:1 | – |
| Texte normal | WCAG AAA | 7:1 | – |
| Grand texte (≥18pt / ≥14pt gras) | WCAG AAA | 4.5:1 | – |
Comment utiliser le vérificateur de contraste
- Utilisez les pipettes ou saisissez des codes HEX pour les couleurs de premier plan (texte) et d'arrière-plan.
- Le rapport de contraste et les résultats de conformité WCAG se mettent à jour instantanément.
- Utilisez Inverser pour intervertir premier plan et arrière-plan.
Exigences de contraste WCAG
| Norme | Type de texte | Ratio minimum |
|---|---|---|
| WCAG AA | Texte normal | 4,5:1 |
| WCAG AA | Grand texte (≥18pt ou ≥14pt gras) | 3:1 |
| WCAG AAA | Texte normal | 7:1 |
| WCAG AAA | Grand texte | 4,5:1 |
WCAG 2.1 niveau AA est le minimum légal pour la plupart des réglementations d'accessibilité (EU, UK, USA).
Calcul du rapport de contraste
La luminance relative (L) est calculée à partir des canaux RVB sRGB après linéarisation gamma : L = 0,2126R + 0,7152G + 0,0722B. Le rapport est (L1 + 0,05) / (L2 + 0,05) où L1 est la couleur la plus claire.
Pourquoi le contraste est important
Environ 300 millions de personnes dans le monde ont une déficience de la vision des couleurs. Un contraste suffisant garantit la lisibilité dans toutes les conditions : déficiences visuelles, lumière vive, écrans de faible qualité.
Conseils pour satisfaire WCAG AA
- Bleu foncé (
#003087) ou gris très sombre (#333333) sur blanc passent facilement 4,5:1 - Si votre couleur de marque est claire, utilisez-la en arrière-plan avec du texte sombre
- N'utilisez jamais la couleur seule pour transmettre une information, ajoutez des icônes ou des motifs