Uma explicação completa da fórmula de luminância relativa, os limites AA/AAA, e conselhos práticos para escolher cores acessíveis.
O contraste de cor é uma medida numérica de quão «distinguível» é um texto (primeiro plano) em relação ao seu fundo. As Web Content Accessibility Guidelines (WCAG) 2.x normalizam esta medida para que o texto continue legível mesmo para pessoas com deficiência visual, perda de visão relacionada com a idade, ou más condições de iluminação. O resultado é um único número entre 1:1 (cores idênticas, sem contraste) e 21:1 (preto/branco puro, contraste máximo).
Como se calcula o contraste de cor? (a fórmula de luminância relativa)
Resposta rápidaPrimeiro, os canais R, G, B de cada cor são normalizados entre 0 e 1 e convertidos para valor linear com correção gama. Estes três valores lineares somam-se com os pesos 0,2126×R + 0,7152×G + 0,0722×B para obter a luminância relativa (L). O rácio de contraste calcula-se com (L_mais_clara + 0,05) / (L_mais_escura + 0,05).
- Passo 1 — normalização sRGB: para cada canal c, c' = c/255.
- Passo 2 — correção gama: se c' ≤ 0,03928, c_lin = c'/12,92; senão, c_lin = ((c'+0,055)/1,055)^2,4.
- Passo 3 — luminância relativa: L = 0,2126·R_lin + 0,7152·G_lin + 0,0722·B_lin.
- Passo 4 — rácio: soma 0,05 à L mais alta e à mais baixa, e depois divide: (L1+0,05)/(L2+0,05), com L1>L2.
O canal verde tem o peso mais alto (0,7152) porque o olho humano é mais sensível ao verde; o canal azul (0,0722) tem o peso mais baixo. Por isso o vermelho, o verde e o azul puros com o mesmo «brilho» produzem rácios de contraste diferentes.
Qual é a diferença entre acessibilidade AA e AAA?
Resposta rápidaAA é o nível mínimo (e mais comummente exigido) do WCAG: o texto normal precisa de 4,5:1, o texto grande e os componentes de interface precisam de 3:1. AAA é o nível reforçado: o texto normal precisa de 7:1, o texto grande precisa de 4,5:1. AAA nem sempre é prático para todos os designs, mas é preferido para conteúdo crítico (ex. informação de saúde, formulários oficiais).
Resumo dos limites de contraste WCAG 2.x
| Tipo de conteúdo | AA (mínimo) | AAA (reforçado) |
|---|
| Texto normal (menos de 14pt/18,66px, exceto negrito) | 4,5:1 | 7:1 |
| Texto grande (18pt/24px+ ou 14pt/18,66px+ negrito) | 3:1 | 4,5:1 |
| Componente de interface / limite de elemento gráfico | 3:1 | não definido |
| Elementos decorativos / desativados | não exigido | não exigido |
O que significa um rácio de contraste de 4,5:1?
Resposta rápida4,5:1 é o rácio mínimo que o WCAG AA exige para o texto de tamanho normal. Por exemplo, o cinzento médio #767676 sobre branco (#FFFFFF) ultrapassa mesmo esta barreira com aproximadamente 4,54:1 — um exemplo clássico «limite» citado frequentemente na documentação WCAG. Um cinzento ligeiramente mais claro (ex. #999) costuma ficar abaixo de 4,5:1 e não passa AA.
Como escolher cores acessíveis?
Resposta rápidaVisa no mínimo AA (4,5:1 texto normal / 3:1 texto grande) em cada par texto/fundo; não contes apenas com a cor para o significado (ex. adiciona um ícone ou texto a negrito junto ao vermelho para uma mensagem de erro); escurece ou clareia a luminosidade da tua cor de marca para aumentar o contraste; e verifica os pares de cores que podem confundir-se, como vermelho-verde, com uma simulação de daltonismo.
Dica prática: a cor principal de uma marca (ex. roxo #7c3aed) normalmente não tem contraste suficiente como texto sobre branco, mas pode funcionar bem como fundo com texto branco — por isso é útil testar a mesma cor tanto como texto como como fundo.
Como verificar o contraste de um site?
Resposta rápidaIntroduz cada par texto/fundo e botão/ícone do teu site na ferramenta acima e verifica o resultado AA/AAA; para comparar várias cores de marca de uma vez, usa o separador Verificação de paleta — mostra cada combinação por pares de 4 cores numa única tabela.