← Todas as regras

Cor e contraste

Links no meio do texto precisam de mais do que cor

• Regra: link-in-text-block
• Gravidade: Grave
• Nível WCAG A

Por que isso importa

Cerca de um homem em cada doze tem alguma deficiência na visão de cores. Se um link dentro do parágrafo se diferencia do texto apenas pela cor, ele é invisível para essa pessoa.

Como corrigir

1. Sublinhe os links no corpo do texto, ao menos no estado padrão.
2. Ou eleve o contraste entre o link e o texto ao redor para 3:1 e acrescente uma pista sem cor no hover e no foco.
3. A pista escolhida precisa aparecer sem hover — em telas de toque não existe hover.

Na marcação

a { color: #4a7dff; text-decoration: none; } /* colour only */

a { color: #4a7dff; text-decoration: underline; }

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

• 1.4.1 Uso da cor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre link-in-text-block (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.