O que é Contraste?
Contraste, também chamado de contraste de cores ou taxa de contraste, é a medida de quanto uma cor se destaca de outra em luminosidade. Em sites, o cálculo compara a cor do texto com a do fundo e devolve um número no formato de razão, como 4,5:1.
A escala vai de 1:1 a 21:1. Texto branco sobre fundo branco resulta em 1:1, invisível. Texto preto sobre fundo branco chega a 21:1, o máximo possível.
O contraste decide se a pessoa com baixa visão consegue ler seu conteúdo, se o cliente enxerga o botão de compra no celular sob o sol do meio-dia e se o visitante idoso preenche seu formulário sem esforço. As diretrizes WCAG estabelecem os valores mínimos usados como referência técnica no mundo inteiro.
Como funciona na prática?
O cálculo usa a luminosidade relativa de cada cor, não o tom. Um amarelo vibrante e um branco têm cores bem diferentes, mas luminosidade parecida, e o contraste entre eles fica baixo. É por isso que texto amarelo sobre branco fica ilegível mesmo parecendo “colorido o suficiente”.
As WCAG definem valores mínimos por situação:
| Situação | Nível AA | Nível AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (18pt ou 14pt em negrito) | 3:1 | 4,5:1 |
| Componentes de interface e gráficos | 3:1 | 3:1 |
O fluxo é direto. Você pega o código hexadecimal do texto e o do fundo, calcula a taxa em um verificador de contraste, compara com o mínimo da situação e ajusta a cor até atingir o valor. O ajuste costuma ser pequeno: escurecer um cinza em dois ou três pontos já resolve boa parte dos casos.
Exemplos de uso
- Uma clínica usa texto cinza-claro sobre fundo branco no formulário de agendamento. A taxa fica abaixo de 3:1, e pacientes idosos não enxergam os rótulos dos campos.
- Um site institucional escolhe o azul da marca para botões. O time testa o azul com texto branco, encontra 3,2:1 e escurece o tom até passar de 4,5:1, mantendo a identidade visual.
Erros comuns
- Escolher cinza-claro para texto secundário porque “fica elegante”, sem verificar a taxa.
- Colocar texto sobre foto sem uma camada escura por trás, deixando o contraste variar conforme a região da imagem.
- Usar apenas cor para indicar erro em formulário, o que exclui quem não distingue vermelho e verde.
- Esquecer o modo escuro, onde o mesmo par de cores produz outra taxa.
Perguntas frequentes sobre Contraste
Como calcular o contraste entre duas cores?
O cálculo compara a luminosidade relativa das duas cores em uma fórmula definida pelas WCAG. Na prática, você não faz a conta na mão: verificadores de contraste online e ferramentas de design recebem os dois códigos hexadecimais e devolvem a taxa pronta, já indicando se ela atende aos níveis AA e AAA.
Qual o contraste mínimo para texto em um site?
Para texto normal, o mínimo é 4,5:1 no nível AA das WCAG. Texto grande, a partir de 18pt ou 14pt em negrito, pode ficar em 3:1. Botões, bordas de campo e ícones informativos precisam de pelo menos 3:1 em relação ao que estiver ao redor.
Contraste alto demais atrapalha a leitura?
Preto puro sobre branco puro pode causar desconforto em textos longos para parte dos leitores, especialmente em telas muito brilhantes. Uma escolha comum é usar um cinza bem escuro no lugar do preto absoluto, mantendo a taxa acima de 4,5:1 e reduzindo o cansaço visual.