Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
O contraste é o fundamento da legibilidade. Uma letra pode ser lindamente desenhada, generosamente espaçada e composta em um corpo confortável, e ainda assim falhar se não se separar com nitidez do fundo. Em 2005, pouco mais podíamos dizer além de "texto escuro sobre fundo claro, e bastante diferença entre eles". Hoje o contraste é mensurável, testável e previsto em lei em muitas jurisdições — e a própria medição tornou-se objeto de pesquisa séria.
O modelo de contraste das WCAG 2.x
As Web Content Accessibility Guidelines 2.x definem contraste como uma razão entre a luminância relativa de duas cores, indo de 1:1 (idênticas) a 21:1 (preto puro sobre branco puro). Três critérios de sucesso a aplicam:
- 1.4.3 Contraste (Mínimo), nível AA — o texto corrido deve atingir 4,5:1; texto grande (cerca de 24 pixels, ou 19 pixels em negrito) pode descer a 3:1.
- 1.4.6 Contraste (Aprimorado), nível AAA — 7:1 para texto corrido, 4,5:1 para texto grande, pensado para leitores com baixa visão moderada.
- 1.4.11 Contraste não textual, nível AA — 3:1 para componentes de interface e gráficos significativos: bordas de campos, indicadores de foco, ícones, elementos de gráficos.
Onde a matemática fica aquém
A fórmula das WCAG 2.x é uma medida física, não perceptual, e suas limitações já estão bem documentadas pelo próprio grupo de trabalho. A razão trata a polaridade como simétrica: pontua branco-sobre-preto de forma idêntica a preto-sobre-branco, embora o olho não os experimente da mesma maneira. Ela lida com peso e corpo da fonte apenas por meio de um único limiar grosseiro de "texto grande", embora um tipo fino e leve a 16 pixels e um negrito na mesma razão sejam lidos de modos muito diferentes. E, perto do extremo escuro da escala, a fórmula pode aprovar pares de cores que observadores humanos julgam fracos, enquanto reprova pares que se leem de forma aceitável.
A direção de pesquisa do APCA
O trabalho preliminar rumo às WCAG 3.0 inclui um candidato a substituto, o Accessible Perceptual Contrast Algorithm (APCA), desenvolvido a partir da pesquisa de contraste visual do W3C. Ele difere do modelo 2.x em três aspectos importantes: tem base perceptual, e não puramente luminância; é sensível à polaridade, pontuando claro-sobre-escuro e escuro-sobre-claro de formas diferentes; e seus limiares escalam com o corpo e o peso da fonte, de modo que um tipo delicado de hastes finíssimas é submetido a um padrão mais rigoroso do que um tipo de texto robusto.
O APCA continua sendo uma direção em rascunho, não um padrão de conformidade. Por ora, a posição prática é: esteja em conformidade com as WCAG 2.x e use o modo de pensar do APCA — peso e corpo importam, polaridade importa — como julgamento de design sobreposto a isso.
Mais contraste nem sempre é melhor
É tentador tratar o contraste como um botão a ser girado até o máximo. Para muitos leitores com baixa visão, o contraste máximo ajuda de fato. Mas, para uma minoria significativa, ele prejudica. O contraste muito alto — especialmente texto branco puro sobre preto puro — produz halação, um brilho ou borrão em torno das letras, sobretudo para leitores com astigmatismo ou sensibilidade à luz. Alguns leitores com dislexia ou estresse visual relatam que o preto-sobre-branco absoluto parece agressivo e preferem um fundo levemente suavizado, como texto quase preto sobre uma superfície off-white.
A lição não é baixar o contraste para menos que os mínimos. É que os requisitos de contraste definem um piso, e a boa tipografia trabalha na faixa acima desse piso sem correr para o teto. Um quase-preto, como um cinza muito escuro sobre um off-white quente, passa no AAA com folga e se lê com mais calma do que #000 sobre #FFF. Melhor ainda, os sistemas podem deixar o leitor escolher: a media query prefers-contrast informa quando um usuário pediu ao sistema operacional mais (ou menos) contraste, e uma folha de estilo pode responder reforçando a cor do texto, engrossando bordas e removendo translucidez decorativa. No Windows, o modo forced-colors vai além e substitui pela paleta do próprio usuário; os designs devem tolerá-lo em vez de combatê-lo.
Nunca codifique significado apenas no matiz
Cerca de um em cada doze homens, e uma parcela bem menor de mulheres, tem alguma forma de deficiência de visão de cores, mais comumente na distinção entre vermelhos e verdes. O critério WCAG 1.4.1 (Uso de cor) existe para essas pessoas: a cor pode reforçar o significado, mas nunca deve carregá-lo sozinha. Um link que se distingue do texto corrido apenas pelo matiz é invisível para muitos leitores — acompanhe-o de um sublinhado. Um estado de erro indicado apenas por uma borda vermelha precisa também de um ícone ou mensagem. Um gráfico cujas séries diferem apenas no matiz precisa de rótulos, padrões ou anotação direta.
Trata-se de um velho princípio do impresso com roupas novas. Os designers de informação do século XX sabiam que um mapa legível em fotocópia era um mapa mais forte. Projete como se sua página pudesse ser vista em escala de cinza, porque para alguns leitores ela efetivamente é.
Por que este capítulo é novo
Quando a primeira edição destas diretrizes foi escrita, as WCAG 2.0 ainda não haviam sido publicadas; não havia requisito numérico de contraste a citar, nem ferramentas de navegador para testá-lo, nem media query pela qual um leitor pudesse expressar uma preferência de contraste. As duas décadas seguintes produziram o padrão de 4,5:1, sua adoção legal, um corpo de críticas à sua fórmula e um sucessor perceptual que agora toma forma no rascunho das WCAG 3.0. O contraste passou do gosto à medição — e depois, de forma útil, a um debate sobre o que a medição deveria ser.
Em CSS
:root {
--ink: #1f1a13;
--paper: #f6f1e7; /* ≥ 4.5:1 against ink (WCAG 1.4.3) */
--accent: #b03a10; /* check at the size and weight it's used */
}
@media (prefers-contrast: more) {
:root { --ink: #000; --paper: #fff; }
}Recomendações
- Cumpra o WCAG 1.4.3 (4,5:1 para texto corrido) como piso absoluto; mire o 1.4.6 (7:1) quando o público tender a ser mais velho ou de baixa visão.
- Aplique o 1.4.11: indicadores de foco, bordas de campos e ícones significativos precisam de 3:1 em relação ao entorno.
- Julgue tipos finos e leves com mais rigor do que a razão sozinha sugere; peso e corpo alteram o contraste efetivo.
- Evite preto puro sobre branco puro em leitura longa; um cinza muito escuro sobre um off-white suave reduz a halação sem sacrificar a conformidade.
- Nunca deixe o matiz carregar o significado sozinho — sublinhe links, rotule estados, anote gráficos.
- Dê suporte a
prefers-contraste tolere o modo forced-colors em vez de sobrescrevê-lo. - Acompanhe o trabalho do APCA no rascunho das WCAG 3.0, mas esteja em conformidade com as 2.x hoje.