← Toutes les règles

Couleur et contraste

Les liens dans le texte demandent plus que la couleur

• Règle: link-in-text-block
• Gravité: Sérieux
• Niveau WCAG A

Pourquoi c’est important

Environ un homme sur douze a une déficience de la vision des couleurs. Si un lien dans un paragraphe ne se distingue du texte que par la couleur, il lui est invisible.

Comment corriger

1. Soulignez les liens dans le corps de texte, au moins à l’état par défaut.
2. Ou portez le contraste entre le lien et le texte environnant à 3:1 et ajoutez un indice non coloré au survol et au focus.
3. L’indice retenu doit rester visible sans survol : le survol n’existe pas sur écran tactile.

Dans le balisage

a { color: #4a7dff; text-decoration: none; } /* colour only */

a { color: #4a7dff; text-decoration: underline; }

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.1 Utilisation de la couleur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur link-in-text-block (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.