Couleur des liens : pourquoi #0000FF échoue et les 8 couleurs de liens à utiliser à la place
Le bleu pur est la première couleur de lien que tout le monde choisit, et la mauvaise à côté du texte courant et sur les écrans sombres. Soulignez-le, éclaircissez-le en sombre, montrez les liens visités, gardez l'anneau de focus. Huit codes inclus.
La bonne couleur de lien est un bleu un peu plus doux que vous soulignez aussi, pas #0000FF tout seul. Le bleu pur est la première couleur de lien que tout le monde choisit, et il échoue à deux endroits : à côté du texte noir du corps de page, et sur les écrans sombres. Voici les quatre corrections et les huit couleurs à remettre à votre développeur.
Pourquoi #0000FF échoue
Personne ne décide d'utiliser #0000FF. Il arrive tout seul. C'est le mot-clé blue en CSS et le premier bleu saturé de tous les sélecteurs de couleur.
Les navigateurs eux-mêmes livrent un défaut légèrement différent, #0000EE pour un lien et #551A8B pour un lien visité, et ils soulignent les deux. Le soulignement fait partie du contrat d'origine. Les designers le retirent pour faire propre et gardent le bleu.
Le bleu doit alors faire le travail seul. Le bleu pur est très sombre. Placez-le dans un paragraphe de texte quasi noir et les deux se lisent presque pareil pour quiconque distingue mal les couleurs. Sur un écran sombre, c'est pire : #0000FF s'enfonce dans le fond.
Un lien, c'est trois choses : une couleur, un trait et un état.
Correction 1 : soulignez-le
Couleur seule
Souligné
La règle derrière tout cela est WCAG 1.4.1, utilisation de la couleur.
Un lien marqué par la seule couleur doit se détacher nettement du texte autour. Le bleu pur à côté du noir pur n'y arrive pas, alors que #0F62FE à côté de #161616, la couleur de texte utilisée ici, y arrive. Un soulignement règle complètement le problème, car le lien ne dépend plus de la couleur.
Soulignez les liens dans le texte courant. Les barres de navigation, boutons et cartes sont différents : leur position et leur forme disent déjà « cliquable », donc le soulignement y est facultatif.
Couleur seule, niveaux de gris
Souligné, niveaux de gris
Correction 2 : éclaircissez-le en sombre
#0000FF en sombre
#78A9FF en sombre
Ce n'est même pas serré. #0000FF sur #161616 est trop sombre pour être lu en taille de texte courant, et #78A9FF sur le même fond se lit sans effort. Les couleurs saturées qui marchent sur blanc deviennent plus claires et plus douces en sombre, le même geste que pour les couleurs d'erreur.
Gardez deux bleus et alternez-les avec le thème : #0F62FE sur écran clair, #78A9FF sur écran sombre. Le survol va un cran plus loin : #0043CE en clair, #A6C8FF en sombre.
Correction 3 : montrez où les gens sont déjà passés
Tous les liens semblent neufs
Le visité passe au violet
Nielsen Norman Group le soutient depuis 2004 : les gens se perdent et tournent en rond quand liens visités et nouveaux partagent une seule couleur. Le violet est la convention, et les navigateurs l'utilisent depuis le début. Utilisez #8A3FFC sur écran clair et #BE95FF sur écran sombre. Cela coûte une règle CSS : a:visited.
Correction 4 : gardez l'anneau de focus
outline: none
Anneau 2px #0F62FE
Les utilisateurs du clavier, les utilisateurs de contacteurs et quiconque a la main fatiguée par la souris dépendent de l'anneau de focus.
Le supprimer avec outline: none sans rien mettre à la place échoue au critère WCAG 2.4.7, focus visible. Si l'anneau par défaut du navigateur jure avec votre design, remplacez-le. Ne le supprimez pas.
Un anneau de 2px dans la couleur du lien, avec un léger décalage, est la version sûre. WCAG 2.2 décrit la forme la plus robuste comme un périmètre d'au moins 2 pixels CSS.
Les 8 couleurs de liens, clair et sombre
Touchez une pastille pour copier son code.
| Rôle | Clair | Sombre | À utiliser pour |
|---|---|---|---|
| Texte | #161616 | #F4F4F4 | Le texte autour du lien |
| Lien | #0F62FE | #78A9FF | Chaque lien à l'état de repos |
| Survol | #0043CE | #A6C8FF | Pointeur sur le lien |
| Visité | #8A3FFC | #BE95FF | Liens déjà ouverts |
Ce sont les tokens de lien d'IBM Carbon, relevés dans les valeurs publiées de son thème.
Remettez ceci à votre développeur
:root {
--color-text: #161616;
--color-link: #0F62FE;
--color-link-hover: #0043CE;
--color-link-visited: #8A3FFC;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #F4F4F4;
--color-link: #78A9FF;
--color-link-hover: #A6C8FF;
--color-link-visited: #BE95FF;
}
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
L'ordre compte : :link, :visited, :hover, :focus, :active est la séquence classique, et une règle de survol placée avant la règle visité ne gagne jamais sur un lien visité. Le sélecteur :focus-visible affiche l'anneau pour les utilisateurs du clavier et l'ignore pour les clics de souris, donc personne n'a de raison de le supprimer.
Les chiffres derrière « facile à lire »
| Paire | Contraste |
|---|---|
| #0000FF sur blanc | 8,6 à 1, réussit, et reste trop proche du texte noir |
| #0000FF sur #161616 | 2,1 à 1, échoue |
| #0F62FE sur blanc | 5,0 à 1 |
| #0043CE sur blanc | 7,8 à 1 |
| #8A3FFC sur blanc | 5,0 à 1 |
| #78A9FF sur #161616 | 7,7 à 1 |
| #A6C8FF sur #161616 | 10,6 à 1 |
| #BE95FF sur #161616 | 7,7 à 1 |
La première ligne explique pourquoi un vérificateur ne suffit pas. Le bleu pur sur blanc passe selon le chiffre. Il échoue au vrai test, qui est de savoir si un lien paraît différent du texte noir à côté.
FAQ
De quelle couleur doivent être les liens ?
Un bleu moyen comme #0F62FE sur fond clair et un bleu plus clair comme #78A9FF sur fond sombre, avec un soulignement dans le texte courant.
#0000FF est-il une bonne couleur de lien ?
Pas tout seul. Il se lit bien sur blanc, mais il est trop proche du texte noir pour les personnes qui ne voient pas le bleu, et sur fond sombre il disparaît presque.
Faut-il souligner les liens ?
Oui, dans les paragraphes. WCAG 1.4.1 dit que la couleur seule ne peut pas marquer un lien, sauf s'il se détache nettement du texte autour, et un soulignement supprime cette dépendance.
De quelle couleur doivent être les liens visités ?
Violet. Les navigateurs utilisent #551A8B par défaut, et des design systems comme IBM Carbon emploient #8A3FFC sur écran clair et #BE95FF sur écran sombre.
Quelle couleur de lien fonctionne en mode sombre ?
Un bleu plus clair. #78A9FF se lit sans effort sur #161616, là où #0000FF est trop sombre pour être lu en taille de texte courant.
Puis-je supprimer le contour de focus des liens ?
Seulement si vous le remplacez par un autre indicateur visible. Le supprimer sans rien mettre à la place échoue au critère WCAG 2.4.7, focus visible.
Sources
- HTML Living Standard, Rendering : la feuille de style par défaut fixe
:linkà #0000EE,:visitedà #551A8B et souligne les liens. #0000FF est la couleur nommée CSSblue. - IBM Carbon color tokens, lus dans @carbon/themes 11.40.0 : link-primary #0F62FE, survol #0043CE, visité #8A3FFC sur le thème white ; #78A9FF, #A6C8FF, #BE95FF sur le thème g100.
- WCAG 2, 1.4.1 Use of Color et technique G183.
- WCAG 2.4.7 Focus Visible et 2.4.13 Focus Appearance.
- Nielsen Norman Group, Change the Color of Visited Links (Jakob Nielsen, 2004).
- Ratios de contraste calculés avec la formule de luminance relative WCAG. Le texte d'exemple est inventé pour cette page.
- Publié d'abord sous forme de carrousel sur UX Brainy.
Want links, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
