Razão de contraste e texto legível

O cinza #767676 sobre branco tem razão de contraste de 4.54:1 e atende ao mínimo da WCAG para texto corrido; um tom um pouco mais claro, #777777, dá 4.48:1 e não atende ao requisito.

Luminância relativa

Para decidir se um texto pode ser lido, as Diretrizes de Acessibilidade para Conteúdo Web não usam o matiz nem a luminosidade HSL. Elas usam a luminância relativa, um número de 0 para o preto a 1 para o branco que acompanha quanta luz uma cor envia ao olho. A WCAG 2.2 a define em duas etapas. Primeiro, cada canal vira um número de 0 a 1: divide-se por 255 e depois desfaz-se a curva sRGB. Se o valor for no máximo 0.04045, divide-se por 12.92; caso contrário, calcula-se ((valor + 0.055) / 1.055) elevado a 2.4. Segundo, os três resultados são ponderados e somados: L = 0.2126 R + 0.7152 G + 0.0722 B.

Os pesos explicam muita coisa. O verde responde por mais de 70% do total, e o azul por apenas 7%. Por isso o azul puro #0000ff tem luminância de apenas 0.0722 e o amarelo puro, vermelho mais verde, tem 0.9278. A especificação registra também um pequeno episódio: antes de maio de 2021, o limite era escrito 0.03928, copiado de um documento mais antigo. Foi corrigido para 0.04045, e a WCAG observa que isso não tem efeito prático sobre os resultados.

Razão de contraste

A razão de contraste compara duas luminâncias: (L1 + 0.05) / (L2 + 0.05), em que L1 é a cor mais clara e L2 a mais escura. O 0.05 representa um pouco de luz difusa que sempre chega ao olho e mantém a razão finita para o preto. As razões vão de 1:1, uma cor contra ela mesma, a 21:1, preto contra branco: (1 + 0.05) / (0 + 0.05) = 21. Para #767676 sobre branco, a luminância é 0.1812, então a razão é 1.05 / 0.2312 = 4.54.

Eis o cálculo inteiro para o azul #2273c3 usado na unidade 2, rgb(34 115 195). Divididos por 255, os canais são 0.1333, 0.4510 e 0.7647. Os três estão acima de 0.04045, então cada um passa pela fórmula da potência e dá 0.0160, 0.1714 e 0.5457. Ponderados, viram 0.0034 do vermelho, 0.1226 do verde e 0.0394 do azul, e a soma é uma luminância de 0.1654. Contra o branco, a razão é 1.05 / 0.2154 = 4.87, então esse azul passa no AA para texto corrido numa página branca. Contra o preto, é 0.2154 / 0.05 = 4.31, por pouco insuficiente.

Os limites

A WCAG 2.2 transforma a razão em indicações “Passa” ou “Falha”. O critério de sucesso 1.4.3, no nível AA, pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande. Texto grande é de pelo menos 18 pontos, ou 14 pontos em negrito; a WCAG observa que isso equivale a cerca de 1.5 em, ou 1.2 em em negrito, nas fontes comuns de texto corrido. O critério 1.4.6, no nível AAA, sobe a exigência para 7:1 e 4.5:1. O critério 1.4.11 pede 3:1 para as partes de botões, campos de formulário e ícones que as pessoas precisam ver. O vermelho puro #ff0000 sobre branco dá 4.00:1, o que serve para um título grande, mas reprova para texto corrido. O azul #0000ff sobre branco dá 8.59:1 e passa em tudo.

Outro fato útil sai da fórmula. Uma cor com luminância de cerca de 0.179 tem o mesmo contraste contra o branco e contra o preto, cerca de 4.58:1. Mais escura que isso, o texto branco se lê melhor sobre ela; mais clara, o texto preto. O painel sob o modelo mostra as duas razões e indica a melhor escolha.