Vérificateur de contraste

Vérifier la conformité WCAG 2.1 pour l'accessibilité

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

Pourquoi vérifier le contraste ?

Environ 8 % des hommes et 0,5 % des femmes présentent une forme de daltonisme. Un faible contraste rend le texte difficile à lire — surtout en petite taille et sur écrans médiocres. Les normes WCAG définissent des minima obligatoires dans de nombreux pays (UE EN 301 549, États-Unis ADA).

Seuils WCAG 2.1

Le niveau AA exige 4,5:1 pour le texte normal (moins de 24 px ou 18,66 px gras) et 3:1 pour le texte grand. AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte grand. Les composants UI et graphiques ont besoin d'au moins 3:1. Ces valeurs se basent sur la luminance relative selon la formule WCAG.