Choisir des couleurs de lien qui restent distinctes

Séparer lisibilité et identification du lien

Déterminez d’abord si le texte du lien est lisible sur son arrière-plan. Selon le critère 1.4.3 de WCAG 2.2, un texte ordinaire exige généralement un rapport de contraste minimal de 4,5:1, tandis qu’un grand texte répondant aux conditions dispose d’un seuil de 3:1. Cette comparaison ne révèle pas quels mots sont des liens. Le critère 1.4.1 exige aussi que la couleur ne constitue pas le seul moyen visuel de transmettre une information ou de distinguer un élément. Un soulignement permanent apporte une réponse directe : il subsiste en niveaux de gris sans dépendre de la perception d’une teinte. Typographie et position aident également, mais un lien intégré à la prose gagne à posséder une décoration explicite.

• Mesurez chaque couleur de lien sur son fond réel, y compris dans cartes, alertes, lignes de tableau et surfaces sombres.
• Gardez un soulignement ou une autre forme permanente pour les liens dans la prose au lieu de l’afficher au seul survol.
• Ne distinguez pas un lien du texte voisin uniquement par la couleur lorsque taille et graisse sont identiques.
• Rédigez un libellé pertinent afin que le nom accessible décrive la destination sans dépendre de la couleur alentour.

Définir une matrice complète des états

Par défaut, visité, survolé, focalisé et actif sont des états rendus distincts. Chaque premier plan doit rester lisible sur son fond, et le changement d’état ne doit pas supprimer ce qui identifie le lien. L’état visité aide à reconnaître l’historique, mais ne peut devenir si faible qu’il échoue au contraste textuel. Le survol renseigne la personne utilisant un pointeur sans remplacer l’indicateur de focus au clavier. L’état actif peut être bref, mais le texte ne doit pas y disparaître. Documentez la couleur et la décoration admises pour chaque cas, puis testez leur combinaison dans les vrais composants.

Implémenter ensemble couleur et décoration

Le CSS doit exprimer le lien par une combinaison de couleur de premier plan, décoration de texte et traitement du focus. L’exemple conserve le soulignement pour les états par défaut et visité, augmente son épaisseur au survol et ajoute un contour de focus séparé. Ces valeurs restent illustratives et doivent être remesurées sur chaque fond accepté. Le sélecteur focus-visible cible une présentation de type clavier dans les navigateurs compatibles, tandis que le comportement natif doit rester disponible en repli. Évitez outline: none sans remplacement aussi visible. Un code identique dans toutes les langues empêche la copie de variantes divergentes.

a {
  color: #005FCC;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

a:visited {
  color: #6F42C1;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

a:focus-visible {
  outline: 3px solid #6D28D9;
  outline-offset: 3px;
}

Contrôler le contraste avec les deux voisins

Un lien en ligne possède un fond derrière lui et du texte ordinaire à ses côtés. Le contraste textuel concerne la première relation. Lorsqu’une implémentation choisit la couleur comme différenciation, la technique suffisante W3C G183 décrit un rapport de 3:1 entre lien et texte voisin, accompagné d’un indice visuel supplémentaire au survol ou au focus. Un soulignement permanent est plus direct puisqu’il fournit continuellement une différence non chromatique ; il ne supprime pas pour autant la lisibilité sur le fond. Calculez les rapports sur les couleurs sRGB rendues, transparence comprise. Des noms de teinte comme bleu ou violet ne constituent pas une preuve. G183 est une technique suffisante, et non une implémentation obligatoire ni l’unique façon de satisfaire au critère.

• Calculez le contraste lien-fond des premiers plans par défaut, visité, survolé, focalisé et actif.
• Si la couleur différencie les liens en ligne, évaluez aussi le texte voisin et consultez la technique applicable.
• Considérez soulignements, contours, icônes et autres formes comme indices explicites, sans supposer une teinte perceptible.
• Recalculez après opacité, superposition ou mélange, car le jeton source peut différer des pixels finaux.
• Examinez les liens placés dans un conteneur atténué : un vrai lien ne doit pas sembler indisponible.

Préserver la sémantique et le focus visible

Un élément qui réalise une navigation doit rester une ancre dotée d’une destination valide. La sémantique native apporte usage au clavier, comportement du focus et informations aux technologies d’assistance, contrairement à un span coloré. L’indicateur visible doit être évalué dans chaque contexte, en particulier dans une carte, un menu ou une alerte sombre. Un contour peut toucher plusieurs couleurs : inspectez toutes les zones adjacentes. Un simple changement de couleur ne suffit pas pour signaler le focus. Évitez aussi de présenter comme liens les boutons déclenchant une action sur la page ; une sémantique correcte réduit les exceptions visuelles et rend l’interaction prévisible.

Tester contenu, états et environnements

Examinez les liens dans paragraphes, navigation, cartes, tableaux, alertes, pieds de page et messages d’erreur. Parcourez-les au clavier pour contrôler ordre et visibilité du focus, puis visitez plusieurs destinations afin de révéler la couleur visitée. Augmentez le zoom et essayez le contraste élevé ou les couleurs forcées lorsqu’ils sont disponibles. Les tests automatiques vérifient des paires de jetons et la présence du soulignement, mais ne jugent ni la clarté du libellé ni le découpage d’un contour par overflow. Incluez des traductions longues, car le retour à la ligne peut déplacer le lien entre plusieurs fonds. Recommencez lorsque typographie, surfaces ou jetons changent.

• Rendez des liens intégrés, autonomes, de navigation, de carte et de tableau sur chaque surface autorisée.
• Parcourez chaque exemple au clavier et confirmez que le focus apparaît sans imposer le survol du pointeur.
• Ouvrez des destinations pour afficher l’état visité et remesurez-le plutôt que de tester un navigateur neuf.
• Contrôlez zoom, retours à la ligne, couleurs forcées et traductions avant d’approuver la matrice des états.