Scan gratuit

Corriger « Lien non distinguable du texte autour » en HTML

Pourquoi c'est un problème

Un lien signalé par la seule couleur disparaît pour les personnes daltoniennes ou en cas de faible contraste : rien n'indique qu'il s'agit d'un lien. Le RGAA impose une distinction qui ne repose pas uniquement sur la couleur.

Comment corriger — HTML

Soulignez le lien, ou donnez-lui un autre repère visuel permanent (graisse, bordure). Si vous tenez à ne pas souligner, le contraste entre la couleur du lien et celle du texte doit atteindre 3:1, ET une distinction supplémentaire doit apparaître au survol et au focus.

À éviter
<p>Consultez <a href="/tarifs" style="color:#2f6fd0;text-decoration:none">nos tarifs</a>.</p>
Correct
<p>Consultez <a href="/tarifs" class="lien">nos tarifs</a>.</p>

<style>
/* Le soulignement est le repère le plus sûr : il ne dépend d'aucune perception de couleur. */
.lien { text-decoration: underline; text-underline-offset: 2px; }
.lien:hover, .lien:focus-visible { text-decoration-thickness: 2px; }
</style>

Vérifiez votre site en 30 secondes

Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.

Scan gratuit

Autres corrections