Entenda a relação de contraste entre texto e fundo, os níveis AA e AAA e por que tamanho e peso da fonte mudam o requisito.
Resumo: este guia explica o conceito, mostra como interpretar o resultado e aponta os limites da ferramenta antes de você aplicá-la em conteúdo real.
Contraste melhora legibilidade
Texto com pouca diferença de luminância em relação ao fundo pode ser difícil de ler para pessoas com baixa visão e também em telas ou ambientes desfavoráveis.
A relação de contraste
A WCAG calcula uma razão entre luminância relativa das duas cores. A escala vai de 1:1, sem contraste, até 21:1, contraste máximo entre preto e branco.
Texto normal e texto grande
Critérios de conformidade usam limites diferentes conforme o tamanho e o peso do texto. Não trate qualquer fonte visualmente grande como “texto grande” sem conferir a definição do critério.
AA e AAA
AA é um nível comum de conformidade em projetos. AAA exige contraste mais alto, mas acessibilidade não se resume a uma única razão de cores.
Estados de interação também importam
Botões, links, foco, hover, erros e componentes precisam continuar perceptíveis. Teste o sistema visual inteiro, não só o par de cores do texto principal.
Exemplo prático
Um cinza claro sobre branco pode parecer elegante em um monitor bom, mas falhar no contraste mínimo. Escurecer o texto sem mudar o fundo pode resolver mantendo a identidade visual.
Erros comuns e como evitar
- avaliar contraste apenas a olho.
- testar só o estado normal do botão.
- confundir contraste de texto com todos os critérios de acessibilidade.
- usar tamanho CSS sem considerar peso e definição do critério.
Revise a documentação do sistema de destino e valide o resultado antes de publicar ou automatizar uma rotina.
Leitura relacionada
Dúvidas frequentes
Passar no contraste torna a página acessível?
Não. Contraste é apenas um dos vários requisitos e boas práticas de acessibilidade.
Preto no branco sempre passa?
A razão é muito alta, mas ainda é necessário avaliar tamanho, layout, foco, semântica e outros aspectos.
Preciso testar hover e foco?
Sim. Estados interativos também precisam continuar distinguíveis e utilizáveis.
Fontes e referências
Documentação técnica e referências usadas para aprofundar este guia: