Razões de contraste WCAG no design de produto real — casos e armadilhas
O que uma razão de contraste realmente mede
Uma razão de contraste WCAG compara a luminância relativa de duas cores — o texto e seu fundo — numa escala de 1:1 (idênticas) a 21:1 (preto puro sobre branco puro). A fórmula é (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara e L2 a da mais escura. A palavra-chave é luminância, não matiz: o contraste é sobre quão claras ou escuras as cores são, não quão diferentes parecem.
É por isso que duas cores vivas e obviamente diferentes ainda podem falhar. Um vermelho médio e um verde médio podem ter quase a mesma luminância, dando uma razão perto de 1:1 — texto em uma sobre fundo da outra é quase ilegível, mesmo sendo 'cores diferentes'. Contraste e colorido não são a mesma coisa.
Os limiares, com precisão
O nível AA do WCAG 2 exige 4.5:1 para texto normal e 3:1 para texto grande. Grande é definido como ao menos 24px (18pt), ou 18.66px (14pt) em negrito — um tamanho de pixel menor só conta como 'grande' se for negrito. O nível AAA eleva isso para 7:1 normal e 4.5:1 grande.
Há uma regra à parte que as pessoas esquecem: o critério de sucesso 1.4.11 (contraste não textual) exige 3:1 para componentes de interface e gráficos com significado — bordas de botão, contornos de campo, ícones, indicadores de foco — contra suas cores adjacentes. Controles desabilitados são isentos dos mínimos de contraste, mas essa isenção é muito abusada para justificar estados inativos difíceis de ver.
Onde os designs reais falham
A falha mais comum é texto cinza claro sobre branco em nome da 'elegância'. Um cinza médio como #999999 sobre branco é só cerca de 2.8:1 — falha AA de cara. O texto de placeholder costuma ser ainda mais claro e quase nunca passa, e mesmo assim as equipes rotineiramente colocam instruções reais nele.
Cores de marca são outra armadilha: muitas paletas de marca de meio-tom falham AA para o rótulo de um botão sobre um campo branco, então o rótulo precisa escurecer ou o botão também. Texto sobre uma imagem de destaque ou gradiente é o caso mais sutil — a razão de contraste muda pixel a pixel, então uma legenda pode passar sobre a parte escura de uma foto e falhar sobre a clara. O modo escuro também é esquecido: um cinza escuro de baixo contraste sobre preto falha igual ao seu primo no modo claro.
As armadilhas que um verificador não pega
Um verificador de contraste compara duas cores chapadas, mas o texto real não é chapado. Uma razão que passa com peso normal pode ler mal numa fonte fina ou capilar, porque a matemática ignora a espessura do traço — glifos finos põem menos tinta na tela do que a razão sugere. Texto pequeno com anti-serrilhado também baixa o contraste nas bordas.
Mais duas armadilhas: aplicar a isenção de texto grande a texto que é negrito mas ainda pequeno (ele precisa atingir o limiar de tamanho), e tratar uma razão que passa como acessibilidade completa. Contraste (1.4.3) e não depender só da cor (1.4.1) são requisitos separados — um link que passa no contraste mas se distingue do texto só pela cor ainda falha. Sempre teste texto sobre imagens e gradientes no pixel do pior caso, não na média.
WCAG 2 hoje, APCA amanhã
A razão do WCAG 2 é útil mas imperfeita. Porque não modela tamanho de fonte, peso, nem como a visão humana de fato percebe claro-sobre-escuro versus escuro-sobre-claro, ela pode ser estrita demais com algumas combinações de texto claro e leniente demais com algumas escuras. Designers sentem isso quando uma combinação 'parece boa' mas falha, ou 'parece fina' mas passa.
O substituto proposto é o APCA (Accessible Perceptual Contrast Algorithm), explorado para o futuro WCAG 3. O APCA pondera tamanho, peso e polaridade do contraste, buscando se ajustar melhor à percepção. Ele ainda não é normativo — você não pode reivindicar conformidade contra ele. A postura pragmática: entregue em WCAG 2 AA hoje, e fique de olho no APCA para onde o padrão está indo.
Conclusões
Memorize dois números: 4.5:1 para texto de corpo, 3:1 para texto grande e componentes de interface. A maioria das decisões volta a eles.
Não confie na 'elegância' do cinza sobre branco — #999 sobre branco falha AA; verifique antes de entregar.
Teste texto sobre imagens e gradientes no pior pixel, não na média, porque a razão varia pela área.
Uma razão que passa com uma fonte capilar ainda falha com leitores reais — considere peso e tamanho, não só o número.
Contraste e independência de cor são requisitos separados — nunca use a cor como único sinal. O verificador de contraste de cor deste site calcula a razão WCAG 2 e o resultado AA/AAA para qualquer par.