Contraste de cores: como escolher combinações legíveis

Escolher cores para um site não é só uma questão de estética — é também uma questão técnica com regras objetivas. A WCAG define proporções mínimas de contraste entre texto e fundo, medidas em uma escala que vai de 1:1 (nenhum contraste, cores idênticas) a 21:1 (contraste máximo, preto sobre branco).

Os números que definem "legível o suficiente"

Para texto normal, a WCAG no nível AA exige proporção mínima de 4.5:1. Para texto grande (a partir de 18pt, ou 14pt em negrito), a exigência cai para 3:1, porque letras maiores são naturalmente mais fáceis de distinguir mesmo com menos contraste. Elementos de interface, como bordas de campos de formulário e ícones informativos, também têm uma exigência mínima de 3:1 no critério 1.4.11 da WCAG.

Esses números não são arbitrários — vêm de estudos sobre percepção visual e simulam a experiência de pessoas com diferentes graus de baixa visão. Um contraste de 3:1, por exemplo, ainda é perceptível por boa parte das pessoas com baixa visão moderada, enquanto proporções abaixo disso tendem a ficar ilegíveis para esse grupo.

Erros comuns de contraste em sites

Cinza claro sobre branco é, disparado, a combinação mais comum de baixo contraste em sites modernos — um estilo visual que ficou popular por parecer "clean", mas que na prática dificulta a leitura para uma parte relevante dos visitantes. Outro erro frequente é texto branco sobre imagens de fundo com áreas claras, sem nenhuma camada escura por trás para garantir legibilidade em qualquer ponto da imagem. Botões com cor de destaque da marca que tecnicamente não atingem 3:1 contra o fundo também são comuns, especialmente em paletas com tons pastel.

Vale lembrar que contraste insuficiente não é só um problema para quem tem baixa visão diagnosticada — afeta qualquer pessoa usando o celular sob luz solar forte, uma tela com brilho baixo, ou simplesmente alguém com cansaço visual no fim do dia.

Como verificar o contraste na prática

Existem ferramentas gratuitas e simples para checar contraste, como o WebAIM Contrast Checker, que basta receber o código hexadecimal das duas cores para calcular a proporção exata e indicar se ela passa nos níveis AA e AAA. Ferramentas de desenvolvedor de navegadores como Chrome e Firefox também mostram a proporção de contraste diretamente ao inspecionar um elemento de texto.

Uma prática recomendada é testar as combinações de cor antes de fechar o design final do site, e não depois — corrigir contraste depois que o layout já está pronto costuma gerar retrabalho maior do que ajustar a paleta desde o início.

Cores com contraste adequado não deixam o site menos bonito — normalmente deixam mais claro e mais fácil de usar para todo mundo, não só para quem tem alguma dificuldade visual.

Contraste também importa fora do texto

Além de texto e botões, vale prestar atenção a gráficos, ícones informativos e bordas de campos de formulário, que também têm exigência mínima de contraste na WCAG (critério 1.4.11, "contraste de conteúdo não textual"). Um campo de formulário com borda quase invisível contra o fundo, por exemplo, pode passar despercebido por quem tem baixa visão, que simplesmente não identifica onde deve clicar para preencher a informação. O mesmo vale para ícones que comunicam estado, como um ícone de erro ao lado de um campo — se o ícone tem baixo contraste, a informação visual que ele deveria transmitir se perde.

Revisar esses elementos junto com o texto principal, e não separadamente, evita que o site pareça bem resolvido em contraste só porque o corpo do texto foi checado, enquanto ícones e bordas de formulário continuam praticamente invisíveis para quem depende desse contraste para identificá-los.

Este conteúdo tem caráter informativo e não substitui uma auditoria técnica de acessibilidade feita por um especialista.