Dans chaque page web, chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?
Une personne daltonienne consulte votre page. Le seul indice qui distingue vos liens du texte courant ? La couleur. Et pour elle, cette couleur ne signifie rien.
Quand la couleur est le seul indicateur visuel d’un lien, sans soulignement ni icône ni bordure, le rapport de contraste entre la couleur du texte du lien et la couleur du texte environnant doit atteindre au moins 3 :1. Attention : il ne s’agit pas du contraste entre le lien et le fond de page, mais bien entre le lien et le texte qui l’entoure. C’est une mesure différente de celle exigée par le critère 3.3.
Si le lien possède déjà un indicateur non coloré, soulignement, icône ou gras réservé aux liens, sa nature est « évidente » au sens du RGAA. La vérification du 3 :1 ne s’applique pas dans ce cas.
La vérification porte sur chaque état du lien utilisant une couleur distincte : non visité, visité, actif, survolé et en focus. Un lien peut être conforme à l’état normal et échouer à l’état visité.
Un test pour vérifier que les liens restent visuellement distinguables
Contraste lien / texte environnant (3:1)
- Repérez tous les éléments
<a>et les éléments avecrole="link"dans la page. - Pour chaque lien, déterminez s’il possède un indicateur non coloré de sa nature : soulignement, icône, bordure, gras réservé aux liens.
- Si la couleur est le seul indicateur, mesurez le rapport de contraste entre la couleur du texte du lien et la couleur du texte environnant (et non entre le lien et le fond de page).
- Répétez la mesure pour chaque état du lien utilisant une couleur différente : non visité, visité, actif, survolé (
hover) et en focus. - Si le rapport est inférieur à 3 :1 pour l’un de ces états, le test échoue.
Exemples
❌ Non conforme : Lien différencié uniquement par une couleur trop proche du texte
<p style="color: #333333;">
Pour en savoir plus, consultez notre
<a href="/confidentialite" style="color: #666666; text-decoration: none;">politique de confidentialité</a>.
</p>Le texte courant est en #333333 et le lien en #666666. Le rapport de contraste entre ces deux teintes est d’environ 2,2 :1, bien en dessous du seuil de 3 :1. Sans soulignement ni autre indicateur non coloré, un visiteur daltonien ou malvoyant ne distingue pas ce lien du texte qui l’entoure.
✅ Conforme : Lien souligné : indicateur non coloré suffisant
<p style="color: #333333;">
Pour en savoir plus, consultez notre
<a href="/confidentialite" style="color: #666666; text-decoration: underline;">politique de confidentialité</a>.
</p>Le lien est souligné. Sa nature est identifiable sans recourir à la couleur. Le critère 10.6 ne s’applique pas : le soulignement constitue un indicateur non coloré suffisant, indépendamment du rapport de contraste avec le texte environnant.
✅ Conforme : Lien sans soulignement avec contraste suffisant sur tous les états
<style>
.lien-corps:link { color: #2685DC; text-decoration: none; }
.lien-corps:visited { color: #5B4DA0; text-decoration: none; }
.lien-corps:hover,
.lien-corps:focus { color: #2685DC; text-decoration: underline; }
</style>
<p style="color: #333333;">
Pour en savoir plus, consultez notre
<a href="/confidentialite" class="lien-corps">politique de confidentialité</a>.
</p>La couleur est le seul indicateur à l’état normal, mais le rapport de contraste entre #2685DC (lien) et #333333 (texte environnant) est d’environ 3,3 :1. L’état visité (#5B4DA0) a également été vérifié et dépasse 3 :1. Un soulignement est ajouté au survol et au focus pour renforcer l’indication sans modifier la mise en page au repos.
Astuces et pièges
⚠️ Confondre le 3 :1 du 10.6 avec le 4,5 :1 du 3.3
Le critère 3.3 exige un rapport de 4,5 :1 entre le texte et le fond de page. Le critère 10.6 exige un rapport de 3 :1 entre le lien et le texte environnant. Ce sont deux mesures indépendantes sur deux paires de couleurs différentes. En audit, l’erreur la plus fréquente est de ne tester que le contraste sur fond et de passer à côté du 10.6.
⚠️ L’état visité, l’oublié systématique
Les navigateurs appliquent souvent une couleur de visite proche du violet ou du gris, qui peut réduire le contraste avec le texte environnant sous les 3 :1. Vérifiez la valeur CSS de a:visited explicitement. Si elle n’est pas définie, le navigateur applique sa couleur par défaut, qui peut très bien échouer le test selon le contexte typographique de la page.
💡 La solution la plus simple : garder le soulignement
Conserver text-decoration: underline sur les liens dans le corps du texte neutralise entièrement ce critère. Le soulignement est un indicateur non coloré ; la mesure du 3 :1 avec le texte environnant devient inutile. Supprimer le soulignement pour des raisons esthétiques crée une obligation de vérification supplémentaire sur tous les états.
⚠️ Le « texte environnant », c’est le texte adjacent, pas n’importe quel texte de la page
La référence de contraste est la couleur du texte qui entoure directement le lien dans le même bloc. Si un lien se trouve dans une cellule de tableau où le texte est noir, c’est ce noir qui sert de référence — pas la couleur d’un chapeau ou d’un titre situé ailleurs sur la page.
⚠️ Les menus de navigation sont rarement concernés en pratique
Le critère cible les liens « dont la nature n’est pas évidente ». Dans un <nav> structuré, le contexte rend la nature des éléments suffisamment claire pour la majorité des utilisateurs. Les auditeurs RGAA concentrent la vérification du 10.6 sur les liens insérés dans des blocs de texte courant, là où la confusion avec du texte simple est réelle.
Questions fréquentes
Dans quels cas le soulignement par défaut valide-t-il le critère RGAA 10.6 ?
Comment mesurer le contraste entre deux couleurs de texte pour valider l'accessibilité RGAA ?
Utilisez Includdy ou un vérificateur de contraste en ligne. Saisissez la couleur du texte du lien comme couleur « premier plan » et la couleur du texte environnant comme « arrière-plan ». Le seuil à atteindre est 3 :1. Ce n’est pas la même mesure que pour le contraste texte/fond du critère 3.3.
Comment vérifier l'état visité d'un lien pour le critère RGAA 10.6 ?
Absolument. La méthodologie du test 10.6.1 le précise explicitement. Si votre CSS définit a:visited avec une couleur différente de a:link, vérifiez le rapport de contraste pour cet état aussi. Une couleur de visite grisâtre peut facilement descendre sous les 3 :1 avec un texte courant sombre.
Comment distinguer visuellement un lien en gras du texte environnant en RGAA ?
Le gras peut constituer un indicateur non coloré si, et seulement si, il est réservé aux liens dans ce contexte. Si d’autres éléments non-liens utilisent aussi le gras, l’indicateur n’est pas spécifique et ne suffit pas. Dans ce cas, la mesure du 3 :1 reste nécessaire.
Comment le critère RGAA 10.6 s'applique-t-il à un lien sans texte environnant ?
Non. Le critère 10.6 ne s’applique que si le lien coexiste avec du texte courant dont il pourrait ne pas se distinguer. Un lien isolé dans un bloc, un bouton-lien ou un lien constituant le seul contenu de son conteneur ne risquent pas d’être confondus avec du texte ordinaire ; le test 10.6.1 ne les concerne pas.