Contraste insuficiente entre texto e fundo é um dos problemas que mais aparece em verificações de acessibilidade e, ao mesmo tempo, um dos erros mais fáceis de evitar. O problema surge quando texto cinza claro aparece sobre fundo branco, quando botões são visíveis apenas por uma mudança sutil de cor, ou quando texto de placeholder num campo de formulário serve como única indicação do que deve ser preenchido. Para pessoas com deficiência visual, mas também para qualquer um que use um ecrã sob luz solar intensa, o texto torna-se literalmente ilegível.
WCAG 2.1, a norma à qual EN 301 549 faz referência, prescreve para o nível AA uma proporção de contraste mínima entre texto e o fundo em que aparece: geralmente 4,5 para 1 para texto comum e 3 para 1 para texto grande e para elementos de interface como botões e bordas de formulários. Parece técnico, mas a ideia por trás é simples: contraste não é uma escolha estética, é uma condição para transmitir informação.
Onde dá errado na prática
Problemas de contraste raramente surgem intencionalmente. Infiltram-se através de escolhas de identidade visual que parecem ótimas num ecrã grande e nítido num estúdio de design, mas num ecrã médio com um utilizador médio ficam ligeiramente abaixo da norma. Texto de botão cinza claro sobre um fundo de cor pastel é um exemplo clássico. O mesmo vale para links que são reconhecíveis apenas por uma diferença de cor, sem sublinhado ou outro sinal visual, o que torna impossível às pessoas com daltonismo vê-los como clicáveis.
Outro padrão recorrente é o estado ao pairar: um botão que em repouso cumpre bem, mas ao mover o rato muda para uma combinação de cores que não foi testada. Mensagens de erro em formulários também são um erro frequente: texto vermelho sobre fundo vermelho claro parece consistente com a identidade visual, mas muitas vezes não atinge a proporção necessária. Quem quiser saber como este tipo de problemas se parecem no seu próprio ambiente pode ver em poucas perguntas em que ponto está o seu site sem precisar de criar uma conta primeiro.
Por que uma verificação automática resolve isto parcialmente, mas não completamente
Proporções de contraste são fáceis de medir automaticamente: um scanner lê os valores de cor do texto e do fundo e calcula a proporção. Por isso é um dos poucos critérios WCAG que uma ferramenta pode testar com confiabilidade. O que uma verificação não vê é contraste que surge apenas após uma interação, como um menu expansível, uma dica que aparece ao ganhar foco, ou um estado que apenas fica visível após uma ação do utilizador. É exatamente por isso que cada relatório menciona qual parte foi testada automaticamente e qual requer avaliação manual; contraste é um ponto forte do teste automático, mas não é a imagem completa.
Como evitá-lo estruturalmente
A forma mais comum de evitar permanentemente este problema é estabelecer contraste ao nível do sistema de design em vez de página por página. Quando as cores base da identidade visual já são testadas face à norma no momento da sua definição, um redator ou programador não precisa verificar isso repetidamente. Isto também evita que uma página nova, um banner de ação temporário ou um componente adquirido externamente comprometa a proporção de contraste sem ser detectado.
É também aconselhável incluir o contraste explicitamente em cada modificação visual do site, não apenas na entrega inicial. Uma renovação de identidade corporativa, um novo tema sazonal ou um estilo de botão alterado pode introduzir um problema que não existia na versão anterior. A acessibilidade, nesse sentido, não é uma caixa de seleção que você marca uma única vez, mas um ponto de atenção que acompanha a manutenção. Saiba mais sobre como funciona essa verificação contínua na prática em uma explicação de onde vem a avaliação.
Por fim, vale a pena não apenas olhar para a norma mínima, mas para a intenção por trás dela: todos conseguem, mesmo em condições de iluminação menos ideais ou em uma tela mais antiga, realmente distinguir o texto e os botões. Casos de dúvida frequentes, como se um logótipo ou uma imagem decorativa também deve cumprir a exigência de contraste, estão explicados em detalhe na página com respostas para perguntas que surgem com frequência.
Gostaria de saber se o contraste e os outros pontos críticos recorrentes também ocorrem no seu próprio ambiente? A quick-scan gratuita oferece uma primeira indicação, e a base de conhecimento com tópicos selecionados para cada situação mostra como essa questão se relaciona com o resto das obrigações da Directiva Europeia sobre Acessibilidade.