Cor de link: por que #0000FF falha e as 8 cores de link para usar no lugar
Azul puro é a primeira cor de link que todo mundo escolhe e a errada ao lado do texto e em telas escuras. Sublinhe, clareie no escuro, mostre links visitados, mantenha o anel de foco. Oito códigos incluídos.
A cor certa de link é um azul um pouco mais suave que você também sublinha, e não o #0000FF sozinho. Azul puro é a primeira cor de link que todo mundo escolhe, e ele falha em dois lugares: ao lado de texto preto e em telas escuras. Aqui estão as quatro correções e as oito cores para entregar ao seu dev.
Por que #0000FF falha
Ninguém decide usar #0000FF. Ele simplesmente aparece. É a palavra-chave blue no CSS e o primeiro azul saturado de qualquer seletor de cores.
Os próprios navegadores usam um padrão um pouco diferente, #0000EE para link e #551A8B para visitado, e sublinham os dois. O sublinhado faz parte do acordo original. Designers o removem para ficar com visual limpo e mantêm o azul.
Aí o azul precisa fazer o trabalho sozinho. Azul puro é muito escuro. Coloque-o dentro de um parágrafo de texto quase preto e os dois parecem quase iguais para quem tem dificuldade de distinguir cores. Em tela escura é pior: o #0000FF afunda no fundo.
Um link é três coisas: uma cor, uma linha e um estado.
Correção 1: sublinhe
Só cor
Sublinhado
A regra por trás disso é a WCAG 1.4.1, uso de cor.
Um link marcado só pela cor precisa se destacar claramente do texto ao redor. Azul puro ao lado de preto puro não se destaca, e #0F62FE ao lado de #161616, a cor de texto que usamos aqui, se destaca. O sublinhado elimina o problema por completo, porque o link deixa de depender da cor.
Sublinhe links dentro de texto corrido. Barras de navegação, botões e cards são diferentes: posição e forma já dizem "clicável", então o sublinhado ali é opcional.
Só cor, em escala de cinza
Sublinhado, em escala de cinza
Correção 2: clareie no escuro
#0000FF no escuro
#78A9FF no escuro
Nem se compara. #0000FF sobre #161616 é escuro demais para ler em tamanho de texto, e #78A9FF no mesmo fundo lê fácil. As cores saturadas que funcionam no branco ficam mais claras e suaves no escuro, o mesmo movimento que fazemos nas cores de erro.
Mantenha dois azuis e troque conforme o tema: #0F62FE em telas claras, #78A9FF nas escuras. O hover avança mais um passo: #0043CE no claro, #A6C8FF no escuro.
Correção 3: mostre por onde as pessoas já passaram
Todo link parece novo
Visitado vira roxo
O Nielsen Norman Group defende isso desde 2004: as pessoas se perdem e andam em círculos quando links visitados e novos dividem uma cor. O roxo é a convenção, e os navegadores o usam desde o começo. Use #8A3FFC em telas claras e #BE95FF nas escuras. Custa uma regra de CSS: a:visited.
Correção 4: mantenha o anel de foco
outline: none
Anel de 2px #0F62FE
Usuários de teclado, usuários de acionadores e qualquer pessoa com a mão do mouse cansada dependem do anel de foco.
Removê-lo com outline: none sem colocar nada no lugar falha na WCAG 2.4.7, foco visível. Se o anel padrão do navegador briga com seu design, substitua. Não apague.
Um anel de 2px na cor do link, com um pequeno deslocamento, é a versão segura. A WCAG 2.2 descreve a forma mais forte como um perímetro de pelo menos 2 pixels CSS.
As 8 cores de link, claro e escuro
Toque em qualquer chip para copiar o código.
| Papel | Claro | Escuro | Use para |
|---|---|---|---|
| Texto | #161616 | #F4F4F4 | Texto corrido ao redor do link |
| Link | #0F62FE | #78A9FF | Todo link em estado de repouso |
| Hover | #0043CE | #A6C8FF | Ponteiro sobre o link |
| Visitado | #8A3FFC | #BE95FF | Links já abertos |
Estes são os tokens de link do IBM Carbon, lidos dos valores publicados do tema.
Entregue isto ao seu dev
: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; }
A ordem importa: :link, :visited, :hover, :focus, :active é a sequência clássica, e uma regra de hover colocada antes da regra de visitado nunca vence em um link visitado. O seletor :focus-visible mostra o anel para usuários de teclado e o pula em cliques do mouse, então ninguém tem motivo para removê-lo.
Os números por trás de "fácil de ler"
| Par | Contraste |
|---|---|
| #0000FF sobre branco | 8,6 para 1, passa, e ainda assim é próximo demais do texto preto |
| #0000FF sobre #161616 | 2,1 para 1, falha |
| #0F62FE sobre branco | 5,0 para 1 |
| #0043CE sobre branco | 7,8 para 1 |
| #8A3FFC sobre branco | 5,0 para 1 |
| #78A9FF sobre #161616 | 7,7 para 1 |
| #A6C8FF sobre #161616 | 10,6 para 1 |
| #BE95FF sobre #161616 | 7,7 para 1 |
A primeira linha é o motivo pelo qual um verificador não basta. Azul puro sobre branco passa pelo número. Ele falha no teste real, que é se o link parece diferente do texto preto ao lado.
FAQ
Que cor os links devem ter?
Um azul médio como #0F62FE em fundos claros e um azul mais claro como #78A9FF em fundos escuros, com sublinhado no texto corrido.
#0000FF é uma boa cor de link?
Não sozinho. Ele lê bem no branco, mas é próximo demais do texto preto para quem não enxerga o azul, e em fundos escuros quase desaparece.
Links devem ser sublinhados?
Sim, dentro de parágrafos. A WCAG 1.4.1 diz que só a cor não pode marcar um link, a menos que ele se destaque claramente do texto ao redor, e o sublinhado remove essa dependência.
Que cor devem ter os links visitados?
Roxo. Os navegadores usam #551A8B por padrão, e design systems como o IBM Carbon usam #8A3FFC em telas claras e #BE95FF nas escuras.
Que cor de link funciona no modo escuro?
Um azul mais claro. #78A9FF lê fácil sobre #161616, onde #0000FF é escuro demais para ler em tamanho de texto.
Posso remover o contorno de foco dos links?
Só se você o substituir por outro indicador visível. Removê-lo sem nada no lugar falha na WCAG 2.4.7, foco visível.
Fontes
- HTML Living Standard, Rendering: a folha de estilo padrão define
:linkcomo #0000EE,:visitedcomo #551A8B e sublinha os links. #0000FF é a cor nomeada do CSSblue. - IBM Carbon color tokens, lidos de @carbon/themes 11.40.0: link-primary #0F62FE, hover #0043CE, visitado #8A3FFC no tema white; #78A9FF, #A6C8FF, #BE95FF no tema g100.
- WCAG 2, 1.4.1 Use of Color e a técnica G183.
- WCAG 2.4.7 Focus Visible e 2.4.13 Focus Appearance.
- Nielsen Norman Group, Change the Color of Visited Links (Jakob Nielsen, 2004).
- Razões de contraste calculadas com a fórmula de luminância relativa da WCAG. O texto de exemplo foi inventado para esta página.
- Publicado originalmente como carrossel no 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
