Aller au contenu
A11ySignal
graveWCAG 1.4.3 · AA

Les éléments doivent avoir un contraste de couleurs suffisant

color-contrast

Vérifier que les contrastes entre le premier plan et l’arrière-plan rencontrent les seuils de contrastes exigés par les WCAG 2 AA

Le critère derrière

1.4.3 Contraste (minimum)

Le texte a besoin d'un contraste d'au moins 4,5:1 avec son fond — 3:1 s'il est grand.

Niveau AA · EN 301 549 § 9.1.4.3

Pourquoi cette vérification existe

C'est de loin l'échec le plus fréquent du web, sur plus de quatre pages d'accueil sur cinq. Il touche toutes les personnes dont la sensibilité au contraste a baissé, c'est-à-dire à terme la plupart des gens après soixante ans.

Ce qui la déclenche habituellement

  • échoueDu texte indicatif ou d'aide en gris sur blanc — le classique #999 sur #fff donne 2,8:1.
  • échoueDu texte blanc sur une couleur de marque choisie pour un logo, pas pour du corps de texte.
  • échoueDu texte sur une photo sans voile assombrissant.
  • échoueUn état désactivé si délavé que personne ne lit ce qui est désactivé.

Comment corriger

  • à faireMesurez avant de livrer. Le grand texte, c'est 18,66 px en gras ou 24 px en normal — tout le reste demande 4,5:1.
  • à faireAssombrissez plutôt le texte que d'éclaircir le fond ; cela préserve mieux la conception.
  • à faireSur les images, ajoutez un voile opaque ou une ombre de texte qui atteint elle-même le ratio.
  • à fairePour les contrôles désactivés, gardez le texte lisible et signalez l'état par des mots.

Comment c'est signalé

A11ySignal le signale avec un impact grave. Chaque élément en échec arrive avec son sélecteur CSS et le balisage fautif, pour aller droit à la ligne plutôt que de la chercher. Deque publie le détail au niveau du moteur :

https://dequeuniversity.com/rules/axe/4.13/color-contrast

Vérification implémentée par axe-core 4.13.0, © Deque Systems, MPL-2.0.