Verificador de Contraste WCAG

O que são os padrões de contraste WCAG

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem razões de contraste mínimas para que o texto seja legível por pessoas com deficiência visual. Não é burocracia à toa: cerca de 1 em cada 12 homens e 1 em cada 200 mulheres têm algum tipo de daltonismo. Além disso, muita gente tem baixa visão e simplesmente não consegue ler texto com pouco contraste.

Como funcionam as razões de contraste

A razão de contraste compara o brilho relativo de duas cores. A escala vai de 1:1 (sem contraste nenhum, mesma cor) até 21:1 (contraste máximo, preto puro sobre branco puro). Quanto maior o número, mais fácil de ler.

Os níveis WCAG na prática

Nível AA (o padrão mais comum)

É o que a maioria dos sites precisa atingir. Requisitos:

• Texto normal: razão mínima de 4,5:1
• Texto grande (18pt ou mais, ou 14pt em negrito): razão mínima de 3:1

Nível AAA (o nível reforçado)

Exigências mais rígidas para acessibilidade máxima:

• Texto normal: razão mínima de 7:1
• Texto grande: razão mínima de 4,5:1

Erros comuns que essa ferramenta detecta

Texto cinza claro sobre fundo branco

Designers adoram cinza suave pelo visual clean, mas #999999 sobre branco reprova no nível AA. Você precisa de pelo menos #767676 sobre branco para passar. Para o corpo do texto, quanto mais escuro, melhor.

Cores da marca que não funcionam como texto

O amarelo vibrante ou o verde limão do seu branding podem ficar incríveis no logo, mas como texto sobre fundo branco ficam ilegíveis. É um dos erros mais frequentes — e geralmente o último a ser apontado.

Texto sobre imagens

Texto branco em cima de foto perde contraste nas áreas mais claras da imagem. Esta ferramenta ajuda você a escolher uma cor de sobreposição que mantém a leitura fácil em qualquer parte da foto.

Texto de placeholder em formulários

Os placeholders costumam ser de um cinza bem pálido. Ainda existe debate sobre se o WCAG se aplica explicitamente a eles, mas deixá-los legíveis é uma boa prática de UX.

Como corrigir cores que reprovam

Se sua combinação não passou, você tem algumas saídas simples:

• Escureça o texto claro — às vezes poucos pontos de luminosidade já resolvem
• Clareia o fundo escuro — mesmo lógica, direção contrária
• Aumente o tamanho da fonte — texto grande tem exigências menores
• Adicione uma camada de contraste — para texto sobre foto, um fundo semitransparente resolve sem mexer no design

Obrigações legais

Vários países exigem conformidade com o WCAG:

• EUA — a ADA e a Seção 508 fazem referência direta ao WCAG
• UE — a EN 301 549 exige WCAG 2.1 AA
• Reino Unido — sites do setor público precisam atender ao WCAG 2.1 AA

Mesmo sem lei que obrigue, seguir o WCAG reduz seu risco legal e torna o site acessível para muito mais gente. Vale a pena por todos os ângulos.