Por Que o Contraste É Critério, Não Preferência
O contraste entre o texto e o fundo determina se uma pessoa consegue ler o conteúdo. Para quem tem visão perfeita e olha uma tela calibrada em ambiente sem reflexo, quase qualquer combinação funciona. Mas o seu usuário real pode ter baixa visão, daltonismo, presbiopia relacionada à idade, ou simplesmente estar lendo a tela do celular sob o sol forte. Para todos esses casos, o contraste insuficiente transforma o texto em uma mancha ilegível.
A WCAG (Web Content Accessibility Guidelines) transforma essa percepção subjetiva em um número objetivo: a razão de contraste, calculada a partir da luminância relativa das duas cores. A razão vai de 1:1 (cores idênticas, contraste zero) a 21:1 (preto puro sobre branco puro). Em vez de discutir se "está legível", você mede e compara contra um limiar definido.
Os Limiares da WCAG 2.2
A WCAG define níveis de conformidade, sendo AA o exigido pela maioria das legislações e contratos, e AAA o padrão de excelência:
- AA — texto normal: razão mínima de 4,5:1. Vale para a grande maioria do texto de corpo.
- AA — texto grande: razão mínima de 3:1. Texto grande é definido como 18pt (24px) normal ou 14pt (18,66px) em negrito.
- AAA — texto normal: razão mínima de 7:1, para o nível mais alto de acessibilidade.
- AAA — texto grande: razão mínima de 4,5:1.
- Componentes de interface e gráficos: a WCAG 2.1 e 2.2 exigem 3:1 para elementos não textuais essenciais — bordas de campos, ícones funcionais, estados de foco. A WCAG 2.2 reforçou especialmente os requisitos de foco visível, tornando esse ponto ainda mais relevante.
O critério-chave a memorizar é o 4,5:1 para texto normal AA — é o limiar que cobre a maior parte das auditorias e o que mais frequentemente é violado por escolhas estéticas de texto claro demais.
O Que Mudou (e o Que Continua) na WCAG 2.2
Publicada como recomendação oficial, a WCAG 2.2 manteve os limiares numéricos de contraste de texto da versão anterior — 4,5:1 e 3:1 continuam valendo. A principal novidade relevante para contraste está no reforço do foco visível: o novo critério "Focus Appearance" estabelece requisitos mais rígidos sobre como o indicador de foco (a moldura que aparece ao navegar por teclado) deve contrastar com o entorno. Na prática, isso significa que não basta o texto ter bom contraste; os elementos interativos precisam mostrar claramente onde está o foco, com contraste adequado em relação ao estado não focado.
Como Testar o Contraste na Prática
O teste é direto: você precisa das duas cores envolvidas — a cor do texto (frente) e a cor do fundo — e de uma ferramenta que calcule a razão. Pegue os valores hexadecimais no seu CSS ou no arquivo de design, insira-os no verificador, e leia o resultado: a ferramenta informa a razão exata e indica se ela passa em AA, AAA, para texto normal e grande.
Use o Verificador de Contraste WCAG para isso: informe a cor do texto e a cor do fundo, e a ferramenta calcula a razão de contraste e mostra de imediato em quais níveis a combinação é aprovada ou reprovada. Quando a combinação falha, ajuste — escureça o texto ou clareie o fundo — e teste novamente até atingir pelo menos 4,5:1 para o corpo de texto. É um ciclo de segundos que evita uma falha de acessibilidade que afetaria todos os usuários da página.
Erros Comuns que Reprovam em Contraste
Os padrões que mais derrubam auditorias são previsíveis. Texto cinza-claro sobre branco (a estética "minimalista" que sacrifica legibilidade). Texto branco sobre imagens de fundo sem overlay — onde o contraste muda conforme a parte da imagem e fica ilegível em trechos claros. Placeholder de campo de formulário cinza demais, tratado como se não fosse conteúdo (mas é). Texto sobre gradientes, onde uma ponta passa e a outra reprova. E links que se distinguem apenas pela cor, sem sublinhado nem outro indicador — problema duplo, porque falha tanto em contraste quanto em depender exclusivamente de cor para transmitir informação.
Contraste Como Decisão de Design, Não Remendo
A forma mais barata de garantir contraste é embuti-lo no sistema de design desde o início. Defina sua paleta de cores já validando as combinações texto-fundo que serão usadas: cor primária sobre branco, branco sobre primária, texto de corpo sobre os fundos de seção. Documente essas combinações aprovadas como tokens reutilizáveis. Assim, qualquer pessoa que monte uma tela usando o sistema herda automaticamente o contraste correto, em vez de corrigir reprovações uma a uma depois que a interface já está construída. Acessibilidade projetada na origem é incomparavelmente mais barata que acessibilidade remendada na auditoria.
Onde o Contraste Importa Além do Texto
A discussão de contraste costuma se concentrar no texto, mas a WCAG 2.1 e 2.2 estenderam o requisito a elementos não textuais essenciais, e ignorar isso é um erro comum. Bordas de campos de formulário precisam de contraste suficiente (3:1) em relação ao fundo, ou o usuário não percebe onde clicar. Ícones funcionais — uma lupa de busca, um ícone de menu — que transmitem significado precisam ser distinguíveis. Estados de componentes, como um botão desabilitado versus ativo ou um checkbox marcado versus desmarcado, devem ser perceptíveis sem depender apenas de uma diferença sutil de cor. Gráficos e infográficos que codificam dados por cor precisam de contraste entre as séries e, idealmente, de um segundo sinal (padrão, rótulo) para quem não distingue as cores.
Pensar em contraste apenas como "texto sobre fundo" deixa metade da interface vulnerável. Um formulário com campos de borda cinza-claríssima sobre fundo branco pode ter texto perfeitamente legível e, ainda assim, ser inutilizável para quem não enxerga onde os campos começam e terminam. A régua de 3:1 para elementos de interface cobre justamente esses casos.
Incorporando o Teste ao Fluxo de Trabalho
O contraste só deixa de ser um problema recorrente quando vira hábito de produção. Na prática, isso significa testar em três momentos: ao definir o sistema de design (validando as combinações da paleta antes que qualquer tela seja construída), ao implementar cada componente novo (conferindo as cores reais aplicadas no CSS, não as do mockup), e na revisão final antes de publicar (passando pelas telas com olhar de auditoria). Quanto mais cedo no fluxo o teste acontece, mais barato é corrigir — ajustar um token de cor na origem propaga a correção para toda a interface, enquanto descobrir o problema na auditoria final significa caçar e corrigir cada ocorrência individualmente. Contraste testado cedo é contraste que não vira retrabalho.
Perguntas Frequentes
Qual é a razão de contraste mínima que preciso atingir?
Para conformidade AA, que é o nível exigido pela maioria das legislações e contratos, a razão mínima é 4,5:1 para texto normal e 3:1 para texto grande (18pt normal ou 14pt em negrito). Se você busca o nível AAA, de excelência, os limiares sobem para 7:1 e 4,5:1 respectivamente. Na prática, mire sempre em pelo menos 4,5:1 para o corpo de texto, que é o caso que cobre a maioria das situações.
O contraste resolve o daltonismo?
Contraste de luminância ajuda muito, mas não resolve tudo sozinho. Pessoas com daltonismo distinguem mal certas combinações de matiz (como vermelho e verde) mesmo quando há diferença de cor. A regra complementar da WCAG é nunca usar a cor como único meio de transmitir informação: um link deve ter sublinhado além da cor, um erro de formulário deve ter ícone ou texto além do vermelho. Contraste adequado e não depender exclusivamente de cor trabalham juntos.
Texto sobre imagem precisa atender ao contraste?
Sim, e é um dos casos mais difíceis, porque o fundo varia ao longo da imagem. A solução padrão é aplicar um overlay semitransparente (escuro sob texto claro, ou claro sob texto escuro) que garanta contraste uniforme independentemente da parte da imagem. Teste o contraste considerando o trecho de pior caso da imagem — aquele onde o texto fica mais próximo da cor do fundo. Se passar ali, passa em toda a área.
