Cor e Contraste: Informação que Não Depende Só da Cor

Texto cinza-claro em fundo branco pode parecer elegante em uma tela e desaparecer em outra. Contraste é uma relação entre primeiro plano e fundo, não uma propriedade isolada da cor do texto.

cinza #6b7280 sobre branco #ffffff: 4.83:1  -> passa para texto normal
cinza #9ca3af sobre branco #ffffff: 2.54:1  -> não passa para texto normal

No nível AA da WCAG, a referência é 4.5:1 para texto normal e 3:1 para texto grande, dentro das condições definidas pelo critério. Componentes e indicadores visuais importantes, como borda de campo e foco, também precisam ser distinguíveis.

/* Evite uma combinação fraca. */
.ajuda-fraca {
  color: #9ca3af;
  background: #ffffff;
}

/* Uma opção com contraste melhor. */
.ajuda-legivel {
  color: #4b5563;
  background: #ffffff;
}

Cor não pode carregar a informação sozinha

Evite instruções como "campos em vermelho têm erro". Combine cor com texto, ícone, borda ou outra pista perceptível.

<label for="cep">CEP</label>
<input id="cep" aria-invalid="true" aria-describedby="erro-cep" />
<p id="erro-cep"><span aria-hidden="true">!</span> CEP deve ter 8 números.</p>

Agora há quatro pistas: texto específico, estado aria-invalid, símbolo e estilo visual. Mesmo sem perceber o vermelho, a pessoa entende o problema.

Estados também precisam aparecer

Foco, erro, selecionado e desabilitado devem continuar distinguíveis sem depender de uma diferença mínima de tonalidade:

.aba[aria-selected="true"] {
  color: #111827;
  background: #facc15;
  border-bottom: 4px solid currentColor;
  font-weight: 700;
}

A borda e o peso reforçam o estado selecionado. A cor continua ajudando, mas não carrega a informação sozinha.

• Contraste precisa ser suficiente para leitura.
• Cor sozinha não deve transmitir informação essencial.
• Estados visuais precisam ter pistas perceptíveis.

Verifique com ferramenta e com contexto

Use o seletor de cores do DevTools ou um contrast checker para medir a combinação real. Depois confira também hover, foco, erro, tema escuro e conteúdo sobre imagens. Uma variável de design correta pode falhar quando aplicada sobre outro fundo.

Dica: verifique contraste durante o design, não só na auditoria final.

No próximo nó, vamos testar o que acontece quando a pessoa amplia a página ou prefere menos movimento.