Razão de contraste de cores e WCAG explicados

Os números que você precisa

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1 e 2.2 usam as mesmas regras de contraste) definem três critérios de sucesso para contraste. A maioria das leis e regras de compras públicas aponta para o nível AA, então esse é o alvo prático para sites e aplicativos.

Para testar um par, digite a cor do texto na ferramenta abaixo (qualquer cor CSS funciona: código hex, rgb(), hsl() ou um nome), informe a cor de Fundo e leia o resultado de cada linha. Inverter troca as duas, o que ajuda no modo escuro.

Como a razão de contraste é calculada

A razão compara a luminância relativa, que é o quanto uma cor parece clara numa tela sRGB padrão, de 0 para o preto a 1 para o branco. Cada canal vermelho, verde e azul é primeiro convertido da escala de 0 a 255 para 0 a 1 e linearizado (os valores são elevados mais ou menos à potência 2,4, porque os valores de tela têm codificação gama). Depois os canais recebem pesos: a luminância é igual a 0,2126 vezes o vermelho mais 0,7152 vezes o verde mais 0,0722 vezes o azul.

Os pesos explicam muitas surpresas. O verde é o que mais contribui para o brilho percebido e o azul muito pouco, então texto azul puro sobre preto vai muito mal, enquanto amarelo sobre branco fica quase invisível (cerca de 1,07:1). A razão em si é (luminância mais clara mais 0,05) dividida por (luminância mais escura mais 0,05). O 0,05 representa o reflexo da tela e impede que a fórmula divida por zero.

O matiz não aparece em nenhum lugar da fórmula. Duas cores podem parecer bem diferentes, como vermelho e verde, e ainda assim ter quase a mesma luminância, que é justamente a combinação que pessoas com daltonismo vermelho verde não conseguem distinguir.

Pares de cores reais e suas razões

Texto cinza é onde a maioria dos layouts falha. O limite fica em torno de #767676 sobre branco: um passo mais claro e o texto normal já não passa no AA.

Qual elemento precisa de qual razão

• Corpo do texto, rótulos de formulário, texto de links, placeholder que traz informação, mensagens de erro: 4,5:1.
• Títulos e outros textos a partir de 24 px, ou texto em negrito a partir de cerca de 19 px (18,66 px, que equivale a 14 pt): 3:1.
• Texto sobre imagens ou degradês: verifique o pior ponto atrás das letras, não a média. Acrescente uma camada sólida ou semitransparente se precisar.
• Bordas de campos, contornos de checkbox, estados de chaves liga e desliga, ícones sem texto, indicadores de foco e linhas de gráficos: 3:1 em relação à cor vizinha (critério 1.4.11, Contraste não textual).
• Botões desativados, controles inativos, logos e elementos puramente decorativos estão isentos. Isento não quer dizer invisível: as pessoas ainda precisam ver que o botão desativado existe.
• Links dentro do texto identificados só pela cor também precisam de 3:1 em relação ao texto ao redor, ou de um sublinhado.

Como corrigir cores que não passam

Mudar o matiz raramente ajuda; mudar a luminosidade sim. Mantenha o matiz da marca e deixe o texto mais escuro (em fundos claros) ou mais claro (em fundos escuros) até passar. A linha Tons abaixo do verificador mostra nove versões mais claras e mais escuras da sua cor, geradas em OKLCH para que os passos pareçam uniformes; escolha a primeira que passa e cole no seu layout.

Se a cor da marca precisa ficar exatamente como está, use-a em títulos grandes, bordas ou fundos de botões com texto branco ou preto, e use uma variante mais escura para texto pequeno. Muitos design systems mantêm duas versões de cada cor da marca por esse motivo: uma para preenchimentos e outra para texto.

Texto semitransparente, como branco com 60 por cento de opacidade, é primeiro misturado com o fundo. O verificador faz essa mistura, então a razão mostrada corresponde ao que as pessoas realmente veem. Uma surpresa comum: texto cinza com opacidade reduzida sobre um card cinza não passa, mesmo que as duas cores passem separadamente contra o branco.

Modo escuro, APCA e a lei

Temas escuros precisam de verificação própria. Branco puro sobre preto puro (21:1) é tecnicamente perfeito, mas pode causar efeito de halo para alguns leitores; texto quase branco como #E6E6E6 sobre um fundo cinza escuro costuma ser mais confortável e ainda passa no AAA. Não suponha que uma paleta que funciona no modo claro passa no modo escuro: cores de destaque suaves muitas vezes caem abaixo de 3:1 em superfícies escuras.

Talvez você leia sobre o APCA, um modelo de contraste mais novo proposto para um futuro WCAG 3. Ele considera o peso da fonte e a polaridade, mas ainda é um rascunho. A conformidade hoje é medida com a razão do WCAG 2, que é o que este verificador calcula.

O WCAG 2.1 nível AA é a referência de leis e normas de acessibilidade em muitos lugares, incluindo a norma europeia EN 301 549, usada para o Ato Europeu de Acessibilidade e para as regras do setor público, e costuma servir de parâmetro em processos ligados à ADA nos Estados Unidos. No Brasil, a Lei Brasileira de Inclusão exige acessibilidade em sites, e o modelo eMAG do governo federal segue as recomendações do WCAG. Se você vende para o público pela internet, o contraste é um dos requisitos mais fáceis de cumprir e uma das falhas mais apontadas em auditorias automáticas.