Distinguer trois raisons de ne pas repérer un lien
Un lien peut être difficile à lire parce que sa couleur se confond avec le fond. Il peut aussi être lisible mais impossible à distinguer du texte courant, ou devenir introuvable lorsque le clavier le sélectionne. Ces trois problèmes demandent des vérifications distinctes : contraste du texte, repère de lien et indicateur de focus.
Le résultat recherché est un lien lisible et reconnaissable avant interaction, dont l’état au clavier reste visible. Une nouvelle couleur ne résout pas automatiquement l’absence de soulignement ou un contour supprimé. Inversement, un soulignement ne rend pas lisible un texte trop pâle sur son fond.
Choisissez quelques exemples concrets : lien dans un paragraphe, lien de pied de page, navigation sur fond sombre et lien dans un bloc coloré. Notez les états concernés : normal, survol, focus au clavier et éventuel état visité. Un seul exemple sur fond blanc ne représente pas tout le site.
Conservez les couleurs et règles initiales avant de commencer. Les styles globaux peuvent affecter beaucoup de pages, tandis qu’un bloc peut avoir sa propre surcharge. Préparez une copie pour les modifications partagées et gardez une page témoin correcte. Vous pourrez ainsi corriger la bonne portée et annuler le changement sans remettre toute l’apparence à zéro.
Comprendre les mesures sans les confondre
Le contraste compare la luminosité de deux couleurs. Pour le texte courant, le repère WCAG de contraste minimal est 4,5 pour 1 entre le texte et son fond ; une exception de 3 pour 1 concerne le texte de grande taille. Utilisez le cas adapté au texte réellement affiché plutôt que qualifier de grand un petit lien simplement parce qu’il est important.
La reconnaissance d’un lien est une autre question. Dans un paragraphe, un soulignement permanent fournit un repère autre que la couleur. Un effet qui apparaît seulement au survol n’aide pas une personne qui cherche d’abord où cliquer ou qui utilise un écran tactile. Gardez aussi des libellés compréhensibles.
Le focus indique l’élément prêt à recevoir l’action du clavier. Son contour doit rester visible dans ce parcours. Pour un indicateur personnalisé, le contraste avec les couleurs adjacentes fait partie de la vérification ; le repère de contraste non textuel de 3 pour 1 ne remplace pas celui du texte.
Ces critères ne sont pas un score global interchangeable. Réussir une comparaison de deux couleurs ne prouve ni le parcours clavier ni l’accessibilité complète de la page. Vous allez donc mesurer les couleurs, vérifier les repères et effectuer une séquence au clavier, puis conserver la correction qui répond au défaut constaté.
Mesurer les couleurs réellement affichées sans installer d’extension
Dans Chrome, faites un clic droit sur le lien public puis choisissez Inspecter. Dans Styles, cliquez sur le carré de couleur de sa propriété color pour ouvrir le sélecteur. La rubrique de contraste, lorsqu’elle est disponible, compare cette couleur au fond correspondant. Les valeurs calculées aident à retrouver la règle effectivement appliquée.
Relevez les deux couleurs et le rapport indiqué. Une transparence, une image de fond ou un dégradé demande une vérification du fond réel derrière le texte ; une simple paire de valeurs choisies dans l’éditeur peut ne pas représenter cette composition. Testez plusieurs positions si le fond varie sous le lien.
Vous pouvez essayer une autre couleur dans le sélecteur pour vérifier une hypothèse. Cette modification reste temporaire dans le navigateur et disparaît au rechargement. Notez la valeur qui convient, puis appliquez-la dans son réglage WordPress d’origine plutôt que considérer l’essai comme enregistré.
Le sélecteur de texte n’est pas un contrôle automatique de tous les contours et états du site. Reprenez le test au clavier pour vérifier spécifiquement l’indicateur de focus.
- Sélectionnez le texte du lien concerné et son état normal.
- Relevez la couleur gagnante, le fond et le rapport disponible.
- Comparez une couleur candidate sur ce même fond.
- Vérifiez aussi les autres fonds où ce style est utilisé.
- Gardez les valeurs de départ pour annuler la correction enregistrée ensuite.
Corriger la couleur globale des liens dans les styles natifs
Avec un thème de blocs, ouvrez Apparence → Éditeur → Styles → Couleurs. Dans les éléments, choisissez Liens. Relevez la couleur actuelle puis appliquez la valeur vérifiée sur le fond concerné. Le panneau permet également de régler le survol lorsque cette option est disponible. Contrôlez cet état sans le confondre avec le focus clavier.
Cette modification concerne les liens qui héritent de ce style global. Elle peut donc changer des pages que vous n’aviez pas ouvertes. Vérifiez au moins le contenu courant, le pied et un bloc à fond différent avant d’enregistrer durablement. Un style local ou une règle plus précise peut encore prendre le dessus sur la valeur globale.
Enregistrez les changements puis contrôlez la page publique déconnectée. Le résultat attendu est une couleur lisible dans les zones visées, sans dégrader les autres fonds. Pour annuler, remettez les valeurs initiales, y compris le survol si vous l’avez changé. Une remise à zéro de tous les styles dépasserait cette correction.
Avec un thème classique, cherchez le contrôle de couleur des liens réellement fourni dans Apparence → Personnaliser ou dans les options documentées du thème. Son nom n’est pas universel. Si aucun réglage pertinent n’existe, utilisez le CSS d’origine identifié ou une correction ciblée, sans changer de thème pour cette seule couleur.
Corriger une surcharge locale sur un bloc ou un groupe
Si un seul encadré reste illisible après la correction globale, sélectionnez ce bloc ou son groupe parent dans l’éditeur. Relevez son fond et les couleurs qu’il impose à ses liens. Un choix adapté au texte sur fond blanc peut devenir inadapté dans un panneau sombre, et une valeur héritée ne vient pas forcément du réglage global.
Dans l’interface WordPress 7.1, le panneau Éléments permet notamment de personnaliser les couleurs des liens imbriqués dans certains conteneurs comme Groupe. Sélectionnez le conteneur dans la Vue en liste, ouvrez sa barre latérale et cherchez ce panneau, puis le réglage des liens proposé. Les contrôles dépendent du bloc et de l’environnement.
Remettez une couleur locale vérifiée sur le fond local, ou retirez seulement la surcharge si l’héritage global est approprié. Gardez les valeurs initiales pour revenir en arrière. Un avertissement de contraste dans l’éditeur est une aide, mais l’absence d’avertissement ne valide pas toutes les compositions et tous les états.
Après sauvegarde, examinez le groupe sur le site public et les autres usages de cette structure si elle est partagée. Le résultat doit être lisible dans son contexte réel. Si la couleur ne change pas, identifiez la règle gagnante dans les styles calculés plutôt que multiplier des valeurs contradictoires dans plusieurs niveaux de réglages.
Ajouter un soulignement ciblé aux liens de texte
Lorsque les liens d’un paragraphe restent difficiles à reconnaître, un soulignement permanent fournit un repère direct. Il complète une couleur lisible ; il ne compense pas un contraste de texte insuffisant. Vérifiez d’abord si un réglage de décoration propre aux liens est déjà disponible dans votre thème.
Si le contrôle nécessaire manque, sélectionnez le paragraphe ou un groupe contenant seulement les textes concernés. Dans Avancé → Classe(s) CSS additionnelle(s), ajoutez liens-lisibles, sans point et sans retirer les autres classes. La règle ci-dessous vise les liens descendants de ce bloc. Évitez de placer la classe sur un groupe comprenant aussi une navigation ou des boutons si vous ne voulez pas les souligner.
Placez la règle complète dans le CSS additionnel du site : Apparence → Personnaliser → CSS additionnel pour un thème classique, ou Apparence → Éditeur → Styles → menu à trois points → CSS additionnel pour un thème de blocs. Ne la collez pas dans un champ qui attend uniquement les propriétés d’un type de bloc.
Vérifiez le soulignement au repos, au survol et au clavier, puis assurez-vous qu’aucun texte non lié n’a reçu la même décoration par erreur. Le résultat est un repère de lien visible avant interaction. Pour annuler, retirez cette seule règle et la classe ajoutée. Si une règle plus prioritaire annule le soulignement, corrigez sa source après identification au lieu d’ajouter des exceptions générales.
.liens-lisibles a {
text-decoration: underline;
}Rétablir un contour de focus visible sur la zone concernée
Parcourez les liens avec Tab sans utiliser la souris. Si aucun indicateur n’apparaît, recherchez une règle personnalisée qui retire outline ou remplace le focus par un effet invisible. Désactivez-la temporairement dans l’inspecteur pour vérifier si le contour prévu par le thème revient. Corriger cette source peut suffire.
Pour un contour spécifique, ajoutez focus-lisible dans les classes CSS additionnelles du bloc ou du groupe concerné. La règle ci-dessous vise ses liens lorsque le navigateur détermine qu’un indicateur de focus doit être montré. Le bleu est un exemple pour un fond clair ; vérifiez son contraste avec les couleurs réellement adjacentes et adaptez-le si nécessaire.
Placez la règle dans le CSS additionnel du site indiqué précédemment. Elle ne doit pas remplacer une logique d’ouverture ou de fermeture de menu. Elle ne rend pas non plus un élément non interactif utilisable au clavier : vous devez cibler les vrais liens déjà présents dans le parcours.
Testez le contour sur chaque fond de la zone, au début et à la fin d’une ligne de texte et dans une liste. Vérifiez qu’un parent ne le coupe pas. Si une règle prioritaire l’annule, corrigez cette règle identifiée plutôt que supprimer les styles de focus du reste du site. Pour annuler, retirez cette seule règle et la classe ajoutée.
.focus-lisible a:focus-visible {
outline: 3px solid #174ea6;
outline-offset: 3px;
}Contrôler les fonds variables et les états du lien
Un lien peut traverser plusieurs contextes : texte blanc dans le pied, encadré coloré, image de couverture ou panneau de navigation. Testez sa couleur sur le fond le moins favorable rencontré, pas seulement sur celui qui rend la capture la plus lisible. Un dégradé ou une image peut demander un fond de texte plus stable plutôt qu’une couleur de lien unique supposée convenir partout.
Comparez l’état normal, le survol et le focus. Un changement de couleur au survol ne doit pas faire disparaître le texte. Un contour ne doit pas se confondre avec la bordure déjà présente. Vérifiez également les liens visités lorsque votre thème leur donne une apparence particulière, sans compter sur une seule lecture automatique de styles pour valider tous les états.
Si une zone emploie une variante sombre volontaire, conservez un réglage local adapté plutôt qu’imposer la couleur claire globale. Relevez la valeur initiale et vérifiez les autres éléments qui héritent du même groupe. La correction doit rester lisible à chaque état prévu.
Le résultat attendu est un ensemble de repères cohérents dans les contextes réels. Pour annuler un essai, remettez la couleur, le fond ou l’état conservé. Une photographie qui change régulièrement sous les liens doit être traitée comme un contexte variable à maintenir, pas comme un fond fixe déjà validé pour toujours.
Option : mesurer des couleurs avec WP Accessibility
WP Accessibility, par Joe Dolson, propose un test de contraste entre deux couleurs ainsi que d’autres outils et correctifs. La version 2.4.5 vérifiée demande WordPress 6.4 et PHP 7.4 minimum et déclare un test jusqu’à WordPress 7.1.4. Cette extension gratuite ne garantit pas l’accessibilité générale d’un site.
Elle peut être utile si vous souhaitez tester des paires de couleurs dans l’administration. Les outils du navigateur restent la voie sans installation. Avant d’ajouter l’extension, conservez l’état du site et essayez sur une copie ; examinez ses réglages existants et par défaut, car ses fonctions ne se limitent pas à ce test.
Le test de deux valeurs ne reconstitue pas automatiquement une transparence ou une image de fond. L’extension possède aussi une option de contour de focus à portée générale ; ne l’activez pas comme substitut à l’examen des zones et des styles existants. Si vous n’utilisez pas les autres fonctions, la désactivation de la seule nouvelle extension permet d’annuler l’essai, puis vérifiez le retour au comportement initial.
- Dans Extensions → Ajouter une extension, recherchez WP Accessibility et vérifiez l’auteur.
- Installez et activez l’extension sur la copie.
- Ouvrez WP Accessibility → Testing & Admin.
- Dans le testeur de contraste, saisissez la couleur du texte et celle du fond sous forme hexadécimale.
- Lancez Check Color Contrast et relevez le rapport pour cette paire.
- Vérifiez que ces deux valeurs correspondent bien à l’affichage réel avant de retenir une couleur.
Vérifier que le focus n’est pas coupé ou recouvert
Un contour bien contrasté peut rester inutilisable s’il est coupé par un groupe ou caché derrière un en-tête fixe. Parcourez la page au clavier et observez l’élément réellement atteint, y compris près du haut de l’écran, dans les encadrés et dans les panneaux ouverts.
Si un parent coupe l’indicateur avec une règle de débordement, confirmez cette cause par un essai temporaire dans l’inspecteur. Corrigez ensuite le réglage ou la règle d’origine, en conservant sa valeur. Retirer toutes les limites de débordement du site pourrait dévoiler d’autres éléments volontairement masqués ; visez le conteneur concerné et vérifiez ses autres fonctions.
Si un bandeau recouvre l’élément atteint, ajustez la disposition ou le comportement fixe de ce bandeau sur une copie. Le critère minimal de focus non masqué traite notamment le cas d’un composant entièrement caché par un contenu créé par le site. Votre contrôle pratique doit permettre de repérer et d’actionner le lien, pas seulement de constater quelques pixels visibles.
Le résultat attendu est un focus lisible et une cible atteignable dans son contexte. Vérifiez l’ouverture et la fermeture des menus après la correction. Pour revenir en arrière, remettez le réglage du conteneur ou du bandeau conservé ; un nouveau masque global ne constitue pas une solution de retour arrière fiable.
Valider les liens en visiteur et au clavier
Après enregistrement, rechargez la page publique déconnecté et reprenez les exemples choisis au départ. Vérifiez le texte sur son fond réel, le repère de lien avant interaction et le contour au clavier. Un état correct dans l’éditeur ne suffit pas si une règle publique différente s’applique.
Utilisez Tab et Majuscule + Tab, puis activez quelques destinations. Sur téléphone, vérifiez la reconnaissance des liens sans dépendre d’un survol. Augmentez le zoom et contrôlez que le repère reste perceptible sans recouvrir les lettres ou sortir d’une zone coupée.
Si un ancien rendu persiste, confirmez le bon objet enregistré avant d’actualiser le cache concerné. Gardez les mesures et les étapes réellement effectuées. Ces vérifications portent sur les liens et états examinés ; elles ne permettent pas d’annoncer un audit complet, un score universel ou une conformité générale du site.
- Comparez le contraste du texte dans chaque fond représentatif.
- Repérez les liens de paragraphes avant de les survoler.
- Parcourez les liens et les commandes avec le clavier seul.
- Vérifiez les panneaux, le pied et les zones à fond sombre.
- Contrôlez que les styles corrects restent en place sur les pages témoins.
- Rétablissez la valeur ou la règle conservée si une modification globale dégrade un autre contexte.
Conserver une palette et des règles faciles à maintenir
Notez les paires de couleurs utilisées, leur fond, leur état et l’emplacement du réglage. Un nom de palette seul ne décrit pas toutes les combinaisons : une même couleur peut convenir sur un fond et échouer sur un autre. Conservez les valeurs initiales et les règles ciblées jusqu’à la validation de la correction.
Définissez une règle éditoriale simple pour les liens de texte, par exemple un soulignement permanent associé à une couleur lisible. Gardez les décorations des textes ordinaires distinctes pour éviter de créer de faux liens visuels. Pour le focus, conservez un indicateur cohérent qui reste perceptible dans les zones claires et sombres.
Reprenez les pages témoins après un changement de thème, de palette ou de constructeur. Contrôlez les nouveaux encadrés et les images placées sous du texte lié. Un changement de fond peut invalider une paire auparavant satisfaisante sans modifier la couleur du lien.
Si une intervention supplémentaire est nécessaire, transmettez la page, l’état concerné, les couleurs mesurées et la source du style. Précisez si le problème est la lecture du texte, la reconnaissance du lien ou le focus. Ce diagnostic permet de corriger le bon repère sans remplacer toute l’apparence ni attribuer à une extension une garantie qu’elle ne peut pas fournir.
Refaire le parcours au clavier sur deux largeurs
Sur une copie WordPress, deux liens gris sur fond blanc présentaient un contraste de 1,91 pour 1. Ils recevaient le focus, mais leur contour était absent. Un bleu mesuré à 7,85 pour 1 sur ce fond, le soulignement et le contour de 3 pixels ont rendu le parcours visible. La couleur du lien situé hors de la zone est restée identique.
La paire de couleurs de la recette convient au fond blanc utilisé pendant l’essai. Mesurez de nouveau les couleurs sur un fond sombre, une image ou un encadré coloré. Un rapport mesuré sur blanc ne décrit que cette combinaison.
- À 320 pixels CSS, puis sur ordinateur, parcourez la zone avec Tab. Le soulignement doit être visible avant interaction. Le contour doit indiquer le lien qui reçoit le focus et rester lisible autour du texte, y compris près du bord d’un groupe.
- Passez au deuxième lien, revenez au premier avec Maj + Tab, puis ouvrez sa destination avec Entrée. Comparez ce parcours sur les autres fonds utilisés par le thème et lorsqu’une barre fixe est affichée.
- Désactivez temporairement les règles ajoutées et vérifiez que l’état d’origine revient. Si le contour est toujours coupé, inspectez la hauteur, le débordement et les marges du parent avant d’ajouter une règle supplémentaire.
