Contraste de Cores: Diretrizes WCAG para design acessível

O contraste de cores é um dos requisitos de acessibilidade mais frequentemente violados na web — e um dos mais fáceis de corrigir. Um contraste fraco entre o texto e o seu fundo torna o conteúdo ilegível para utilizadores com baixa visão, daltonismo ou ao visualizar em pleno sol. WCAG 2.1 define limites numéricos precisos para taxas de contraste aceitáveis.

Este guia explica como as taxas de contraste são calculadas, o que os níveis WCAG significam na prática, onde o contraste falha mais comumente em designs reais e como corrigir essas falhas sistematicamente.

O que é taxa de contraste de cores

A taxa de contraste de cores é uma medida numérica da diferença de luminância percebida entre duas cores — tipicamente texto e fundo. A taxa vai de 1:1 (cores idênticas, sem contraste) a 21:1 (preto puro sobre branco puro, contraste máximo). A fórmula compara a luminância relativa da cor mais clara (L1) com a mais escura (L2): contraste = (L1 + 0.05) / (L2 + 0.05). Uma taxa de 4.5:1 significa que a cor mais clara é 4.5 vezes mais luminante que a mais escura.

Níveis WCAG 2.1 (A/AA/AAA)

WCAG 2.1 define três níveis de conformidade. O nível A é o mínimo. O nível AA é o padrão legal e industrial na maioria dos países. O nível AAA é o mais alto. Para contraste de texto: texto normal (abaixo de 18pt ou 14pt negrito) requer 4.5:1 para AA e 7:1 para AAA. Texto grande (18pt+ ou 14pt+ negrito) requer 3:1 para AA e 4.5:1 para AAA. Componentes UI requerem 3:1 para AA.

Como calcular a luminância

A luminância relativa é calculada a partir de valores RGB linearizados. A fórmula contabiliza a resposta não linear do olho humano à luz. São aplicados pesos perceptuais (vermelho=0.2126, verde=0.7152, azul=0.0722). O canal verde contribui mais para o brilho percebido — por isso o verde puro (#00FF00) tem luminância muito maior que o azul puro (#0000FF).

/* Cálculo de luminância (JavaScript) */
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928
      ? c / 12.92
      : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

Falhas de contraste comuns

As falhas de contraste mais frequentes em designs reais: texto cinza claro sobre fundo branco (texto atenuado falha com ~2.5:1), cores de marca de saturação média usadas como texto sobre branco, links de texto colorados sem sublinhado sobre fundos colorados, estados desabilitados com pouca diferença visual, elementos UI só com ícone com contraste insuficiente. Os designs em modo escuro frequentemente introduzem novas falhas.

Corrigir contraste em temas escuro/claro

Ao construir um sistema de design de tema duplo, é essencial testar o contraste em ambos os modos de forma independente. O mesmo par fundo-texto que passa AA no modo claro pode falhar no modo escuro se simplesmente se inverter o tom sem recalcular o contraste. A abordagem prática: definir escalas de cores separadas para cada tema.

Ferramentas e automação

A verificação manual no momento do design não é suficiente. Ferramentas de auditoria de acessibilidade automatizadas (axe, Lighthouse, Pa11y) podem detetar falhas de contraste em tempo de build ou em pipelines CI. A ferramenta Color Contrast do PixCode aceita quaisquer duas cores e devolve a taxa, o nível WCAG e sugestões de alternativas conformes.

Perguntas Frequentes