Links devem ser distinguíveis sem depender da cor

Por que isso importa

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 na visão de 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 parece ter aproximadamente 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 detectar que determinado texto é interativo. Isto pode fazer com que percam navegação, ações ou informações importantes completamente.

Esta regra relaciona-se com o Critério de Sucesso 1.4.1 das WCAG 2.0/2.1/2.2: Uso de Cor (Nível A), que exige 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 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 o rácio de contraste entre a cor do texto do link e a cor do texto circundante é inferior a 3:1, a regra falha.

3. Sem distinção não baseada em cor mas contraste de 3:1 ou superior → Necessita 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 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 — 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 sutil na 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 circundante), você também deve garantir que o link ganhe um estilo distinto não baseado em cor 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 clara não baseada em cor, tornando o link identificável independentemente da perceção de 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 perguntas 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, pois 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 os nossos
  <a href="/blog">posts mais recentes do blog</a>
  para atualizações.
</p>

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

Learn more:

Deque Reference

Deque University - How To Fix

→