Les liens dans vos textes se distinguent-ils du texte qui les entoure par autre chose que leur seule couleur ?
Critère officiel 10.6 — Dans chaque page web, chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?
Pourquoi c'est important
Les personnes daltoniennes ne perçoivent pas certaines différences de couleur. Si un lien dans un paragraphe est identifié uniquement par sa couleur bleue — sans soulignement ni autre indicateur visuel — une personne daltonienne ne peut pas le distinguer du texte ordinaire et ignore qu'une action est possible à cet endroit.
Exemples concrets
Ce qui est conforme
Les liens dans les articles sont soulignés. Au survol et au focus clavier, leur apparence change (couleur et soulignement s'intensifient). Un lecteur daltonien ou utilisant un écran en niveaux de gris repère les liens grâce au soulignement, indépendamment de leur couleur.
Ce qui pose problème
Le site a été personnalisé pour afficher les liens sans soulignement — « ça fait plus propre visuellement ». Dans les comptes-rendus du conseil municipal, les liens vers les délibérations PDF sont visuellement indistinguables des titres de sections pour une personne daltonienne.
Comment agir
Dans WordPress, conservez le soulignement des liens dans les textes de contenu. Si votre charte impose des liens sans soulignement, demandez à votre prestataire de s'assurer qu'un indicateur visuel autre que la couleur apparaît au survol et au focus, et que le contraste entre la couleur du lien et le texte environnant est suffisant.
Règles clés
- Option 1 (recommandée) : conserver le soulignement permanent sur les liens en corps de texte.
- Option 2 : si text-decoration: none, le ratio de contraste entre la couleur du lien et la couleur du texte doit être >= 3:1, ET un indicateur visuel doit apparaître au survol ET au focus (soulignement, bordure, icône…).
- Ce critère s'applique aux liens dans le corps de texte courant — pas aux liens de navigation (menu, fil d'Ariane) dont le contexte (position, structure) signale déjà leur nature.
- Tester avec un simulateur daltonisme ou en passant en niveaux de gris.
Erreurs fréquentes
- text-decoration: none sur les liens dans le corps de texte sans autre différenciateur non-couleur
- Différence de couleur entre lien et texte inférieure à 3:1 (ratio WCAG requis si pas de soulignement)
- Soulignement uniquement au survol — l'état par défaut reste indiscernable par couleur seule
- Liens dans des zones de couleur (boutons) : non concernés par ce critère — la forme du bouton est déjà un différenciateur
Exemples de code
lien non souligné sans ratio suffisant
✗ Non conformep { color: #555555; }
p a {
color: #0077cc; /* ratio vs #555555 : ~2.8:1 — insuffisant */
text-decoration: none;
}Ni soulignement, ni ratio suffisant entre la couleur du lien et du texte. Indiscernable en affichage monochrome et pour de nombreux daltoniens.
lien souligné — conforme
✓ Conformep a {
color: #0066cc;
text-decoration: underline; /* soulignement permanent */
}Le soulignement est un vecteur non-couleur suffisant et robuste. C'est la solution la plus simple et la plus universellement comprise.
lien non souligné avec ratio >= 3:1 + indicateur hover
✓ Conformep { color: #555555; }
p a {
color: #0044aa; /* ratio vs #555555 : ~3.4:1 — suffisant */
text-decoration: none;
}
p a:hover,
p a:focus {
text-decoration: underline;
}Le ratio 3.4:1 entre la couleur du lien (#0044aa) et le texte environnant (#555555) dépasse le seuil de 3:1. Le soulignement apparaît au survol et au focus — deux indicateurs non-couleur complémentaires.
Référence WCAG : 1.4.1