Couleur et contraste
Le texte a besoin d’un contraste suffisant avec son fond
- Règle:
color-contrast - Gravité: Sérieux
- Niveau WCAG AA
Pourquoi c’est important
Un texte peu contrasté est illisible pour les personnes malvoyantes, sur un téléphone en plein soleil ou sur un écran bas de gamme. C’est de loin la défaillance la plus répandue sur le web.
Comment corriger
- Portez le texte courant à au moins 4,5:1 sur son fond, et le grand texte (24px, ou 19px en gras) à 3:1.
- Assombrissez le texte plutôt que d’éclaircir le fond quand les couleurs de marque sont figées.
- Vérifiez aussi les couleurs d’état : texte indicatif, éléments qui semblent désactivés mais sont actifs, texte sur image.
Dans le balisage
.note { color: #9a9a9a; background: #ffffff; } /* 2.6:1 */.note { color: #595959; background: #ffffff; } /* 7:1 */Ce que le contrôle ne peut pas juger
Le moteur ignore le texte qu’il ne peut pas mesurer : sur un dégradé, sur une image, ou avec un fond partiellement transparent. Cela demande un œil humain.
L’exigence sous-jacente
Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :
- 1.4.3 Contraste (minimum) (s’ouvre dans un nouvel onglet) — Niveau WCAG AA
Pour aller plus loin
Deque University sur color-contrast (s’ouvre dans un nouvel onglet)
Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.
Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.