Acessibilidade · 11 min de leitura
Todo desenvolvedor frontend já passou por isso: você escolhe um cinza para o placeholder de um input, acha que está legível, e semanas depois alguém na equipe reclama que não consegue ler. Ou pior — um usuário com baixa visão parcial não consegue navegar pelo seu formulário.
O problema é estrutural: o olho humano é péssimo avaliador absoluto de contraste. Somos bons em comparação relativa — percebemos que A é mais escuro que B quando estão lado a lado — mas terríveis em avaliar se a diferença entre A e B é suficiente para garantir legibilidade para a maioria das pessoas, incluindo idosos, pessoas com baixa visão e usuários em telas de baixa qualidade ou sob luz solar direta.
Mais especificamente, o "olhômetro" falha porque:
A solução não é treinar melhor o seu olho — é parar de usá-lo como único critério.
As Web Content Accessibility Guidelines (WCAG), mantidas pelo W3C, definem o contraste através de um conceito matemático preciso: a luminância relativa. Diferente do brilho percebido (que é subjetivo), a luminância relativa é uma medida objetiva de quanta luz um canal de cor emite em escala linear.
Telas de computador usam o espaço sRGB, que aplica uma correção gamma (curva de potência) para compensar a forma não-linear como o olho humano percebe brilho. Antes de calcular luminância, precisamos desfazer essa correção:
O limiar 0.04045 existe porque para valores muito baixos (próximos ao preto), a correção gamma seria matematicamente instável. Abaixo desse valor, uma divisão simples é suficientemente precisa.
Cada canal de cor contribui de forma diferente para a luminância percebida. O canal verde tem peso muito maior que o azul, porque o olho humano tem mais fotorreceptores de pico de sensibilidade na faixa do verde (~555nm):
Esses coeficientes (0.2126, 0.7152, 0.0722) não são arbitrários — derivam da curva de sensibilidade fotópica do olho humano padrão definida pela CIE (Comissão Internacional de Iluminação). Note que o verde responde por 71,52% da luminância percebida, enquanto o azul contribui com apenas 7,22%.
Isso explica um fenômeno contraintuitivo: o azul puro #0000FF tem luminância relativa de apenas 0,0722, enquanto o amarelo puro #FFFF00 tem luminância de 0,9278. Sobre branco, o azul puro (contraste ~2:1) pode reprovar no WCAG AA, enquanto o preto sobre amarelo passa com folga.
Com as luminâncias das duas cores (L1 para a mais clara, L2 para a mais escura):
O +0.05 representa a luminância mínima de uma tela completamente preta — o "preto absoluto" não existe em displays reais. O resultado é um número de 1:1 (sem contraste) até 21:1 (preto sobre branco).
O WCAG 2.1 define dois níveis de conformidade para contraste:
A distinção entre "texto normal" e "texto grande" é frequentemente mal interpretada. "Texto grande" significa:
font-weight: 700 ou superior)Botões de CTA com fonte de 16px em peso 400? Texto normal — exige 4,5:1. O mesmo botão com font-weight 700? Ainda texto normal. Precisa ter pelo menos 18.67px em bold para se qualificar como "texto grande".
O caso mais comum de falha silenciosa é o placeholder de input. Em praticamente todo design system que não foi rigorosamente auditado, o placeholder tem texto cinza que parece legível no design mas falha no WCAG AA:
#9E9E9E
2,85:1 — Reprovado
#888888
3,54:1 — Reprovado
#767676
4,54:1 ✓ WCAG AA
#6B7280
4,62:1 ✓ WCAG AA
#4A5568
7,54:1 ✓ WCAG AAA
A diferença entre #9E9E9E e #767676 é imperceptível no olhômetro de um designer com visão normal em tela calibrada. Para um usuário idoso com visão reduzida, pode ser a diferença entre conseguir ou não preencher um formulário.
Para testar se o texto do seu design passa nos critérios WCAG AA, use nossa Ferramenta de Texto Seguro — ela automaticamente sugere a cor de texto mais próxima que garante conformidade com AA no fundo escolhido. O usuário visita a ferramenta, percebe o impacto prático e normalmente continua para o Teste de Contraste para entender o número exato do ratio.
A boa notícia é que não é preciso calcular luminância manualmente em produção. Existem camadas de automação que podem detectar falhas antes do deploy:
Use o Teste de Contraste WCAG para verificar qualquer par de cores. Prefere encontrar o texto ideal para um fundo específico? A Ferramenta de Texto Seguro sugere a cor de texto com maior contraste automaticamente. Para uma revisão completa de acessibilidade da sua paleta, use o Checklist de Acessibilidade.