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

Por que isto é importante

Muitos utilizadores não conseguem perceber diferenças de cor de forma confiável. Aproximadamente 8% dos homens e 0,4% das mulheres têm alguma forma de deficiência da 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 é estilizado apenas com uma cor diferente — digamos, texto azul num bloco de texto preto — pode ser completamente invisível como um link.

Pessoas com baixa visão frequentemente experimentam sensibilidade de contraste reduzida, o que significa que tudo aparece aproximadamente com o mesmo brilho. Sem uma pista não baseada em cor como um sublinhado ou uma diferença de luminância suficiente, estes utilizadores não conseguem detetar que determinado texto é interativo. Isto pode fazer com que percam 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 lugares mais comuns onde este requisito é violado.

Como a regra funciona

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 baseada em cor presente → Passa. Se o link tem um estilo visual que não depende da cor — como um sublinhado, uma borda, uma cor de fundo ou um peso/estilo de fonte distinto — a regra passa automaticamente.

2. Sem distinção não baseada em cor e contraste abaixo de 3:1 → Falha. Se o link depende apenas da cor e a proporção de contraste entre a cor do texto do link e a cor do texto envolvente é inferior a 3:1, a regra falha.

3. Sem distinção não baseada em cor mas contraste é 3:1 ou superior → Necessita Revisão. Se o link depende apenas da cor mas atende o limiar 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 mais confiável é dar aos links um indicador visual não baseado em cor. 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 borda — Um border-bottom pode funcionar como alternativa ao text-decoration.
• Usar um estilo de fonte distinto — Negrito ou itálico pode ajudar, embora o sublinhado seja mais convencional para links.
• Adicionar um fundo ou contorno — Uma diferença sutil de cor de fundo pode funcionar se for claramente visível.

Se escolher depender apenas do contraste de cor (mínimo de 3:1 entre o texto do link e o texto envolvente), deve também garantir que o link ganha um estilo distinto não baseado em cor nos estados :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 clara não baseada em cor, tornando o link identificável independentemente da perceção da cor.

Correto: Link usa uma borda 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>
  Veja os nossos
  <a href="/blog">últimos posts do blog</a>
  para atualizações.
</p>

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

Learn more:

Deque Reference

Deque University - How To Fix

→