Os links devem ser distinguíveis sem depender apenas da cor

Porque isto é importante

Muitos utilizadores não conseguem perceber diferenças de cor de forma fiável. Aproximadamente 8% dos homens e 0,4% das mulheres têm alguma forma de deficiência de visão das cores, e há quase três vezes mais pessoas com baixa visão do que aquelas que são totalmente cegas. Para estes utilizadores, se um link dentro de um parágrafo for estilizado apenas com uma cor diferente — por exemplo, texto azul num bloco de texto preto — pode ser completamente invisível como link.

Pessoas com baixa visão frequentemente experimentam sensibilidade reduzida ao contraste, o que significa que tudo aparece com aproximadamente o mesmo brilho. Sem uma pista não-cromática como um sublinhado ou uma diferença suficiente de luminância, estes utilizadores não conseguem detetar que certo texto é interativo. Isto pode fazê-los perder navegação importante, ações ou informações por completo.

Esta regra relaciona-se com o Critério de Sucesso 1.4.1 do WCAG 2.0/2.1/2.2: Uso de Cor (Nível A), que requer que a cor não seja usada como o único meio visual de transmitir informação, indicar uma ação ou distinguir um elemento visual. Links incorporados em texto são um dos locais mais comuns onde este requisito é violado.

Como funciona a regra

A regra axe link-in-text-block verifica links que aparecem dentro de blocos de texto (como parágrafos) e avalia-os em três passos:

1. Distinção não-cromática presente → Passa. Se o link tem um estilo visual que não depende da cor — como um sublinhado, margem, cor de fundo ou peso/estilo de fonte distinto — a regra passa automaticamente.

2. Sem distinção não-cromática e contraste abaixo de 3:1 → Falha. Se o link depende apenas da cor e o rácio de contraste entre a cor do texto do link e a cor do texto envolvente é menor que 3:1, a regra falha.

3. Sem distinção não-cromática mas contraste é 3:1 ou superior → Precisa de revisão. Se o link depende apenas da cor mas atende ao limite de contraste de 3:1, a regra sinaliza-o para teste manual. Você deve verificar que o link recebe um estilo visual distinto (como um sublinhado) nos estados :focus e :hover.

Como corrigir

A correção mais simples e fiável é dar aos links um indicador visual não-cromático. Aqui estão as suas opções, por ordem de recomendação:

• Sublinhar o link — Este é o indicador de link mais universalmente compreendido.
• Adicionar uma margem — Uma border-bottom pode funcionar como alternativa ao text-decoration.
• Usar um estilo de fonte distinto — Negrito ou itálico podem ajudar, embora o sublinhado seja mais convencional para links.
• Adicionar um fundo ou contorno — Uma diferença subtil de cor de fundo pode funcionar se for claramente visível.

Se você escolher depender apenas do contraste de cor (mínimo de 3:1 entre o texto do link e o texto envolvente), você também deve garantir que o link ganha um estilo não-cromático distinto no :hover e :focus. Este requisito de duas partes existe porque o contraste estático sozinho pode não ser suficiente para todos os utilizadores, mas uma mudança visual na interação confirma que o elemento é interativo.

Exemplos

Incorreto: Link distinguido apenas por cor com contraste insuficiente

<style>
  p { color: #333333; }
  a { color: #555555; text-decoration: none; }
</style>

<p>
  Saiba mais sobre os nossos
  <a href="/services">serviços de consultoria</a>
  e como podemos ajudar.
</p>

Neste exemplo, o link não tem sublinhado e o contraste de cor entre #555555 e #333333 está bem abaixo de 3:1. Utilizadores com baixa visão ou daltonismo não conseguem identificar o link.

Correto: Link tem um sublinhado (recomendado)

<style>
  p { color: #333333; }
  a { color: #0056b3; text-decoration: underline; }
</style>

<p>
  Saiba mais sobre os nossos
  <a href="/services">serviços de consultoria</a>
  e como podemos ajudar.
</p>

O sublinhado fornece uma pista visual não-cromática clara, tornando o link identificável independentemente da perceção da cor.

Correto: Link usa uma margem inferior em vez de sublinhado

<style>
  p { color: #333333; }
  a {
    color: #0056b3;
    text-decoration: none;
    border-bottom: 2px solid #0056b3;
  }
</style>

<p>
  Leia o nosso
  <a href="/guide">guia de acessibilidade</a>
  para instruções detalhadas.
</p>

Correto: Link apenas com cor com contraste suficiente mais estilos hover/focus

<style>
  p { color: #333333; }
  a {
    color: #0000ee;
    text-decoration: none;
  }
  a:hover,
  a:focus {
    text-decoration: underline;
  }
</style>

<p>
  Visite o nosso
  <a href="/help">centro de ajuda</a>
  para respostas a questões comuns.
</p>

Aqui o contraste entre #0000ee e #333333 excede 3:1, e o link ganha um sublinhado no hover e focus. Isto satisfaz o requisito, embora note que o axe ainda sinalizará isto para revisão manual uma vez que não pode verificar automaticamente os estilos hover/focus em todos os casos.

Incorreto: Sublinhado removido sem substituição

<style>
  a { color: #1a73e8; text-decoration: none; }
  p { color: #000000; }
</style>

<p>
  Confira as nossas
  <a href="/blog">últimas publicações no blog</a>
  para atualizações.
</p>

Mesmo que a cor azul possa parecer óbvia para utilizadores com visão completa das cores, remover o sublinhado sem fornecer outro indicador não-cromático torna este link invisível para utilizadores com daltonismo ou baixa sensibilidade ao contraste.

Learn more:

Deque Reference

Deque University - How To Fix

→