Contraste de cores

Cinza-claro #999999 sobre branco tem razão de contraste de 2.85:1, bem abaixo dos 4.5:1 que a WCAG 2.2 pede para texto corrido.

Por que o contraste importa

Um texto pálido em relação ao fundo é difícil de ler para pessoas com baixa visão, para muitos leitores mais velhos e para qualquer um usando o celular no sol. A WCAG 2.2 não deixa o "pálido" ao gosto de cada um. Ela mede a luminância relativa das duas cores, um número que vai de 0 para o preto a 1 para o branco, e as compara pela razão de contraste (L1 + 0.05) / (L2 + 0.05), em que L1 é a cor mais clara. O resultado vai de 1:1, uma cor sobre ela mesma, a 21:1, preto sobre branco. O curso de teoria das cores trabalha a fórmula passo a passo; aqui nós a usamos.

Os números a cumprir

O critério de sucesso 1.4.3 Contraste (Mínimo), de nível AA, pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande, que a WCAG define como pelo menos 18 pontos, ou 14 pontos em negrito. O critério 1.4.6, de nível AAA, sobe esses valores para 7:1 e 4.5:1. O critério 1.4.11 Contraste Não Textual pede 3:1 para as partes de controles e gráficos que as pessoas precisam ver, como a borda de um campo de texto ou as linhas de um gráfico. Logotipos e textos puramente decorativos ou que fazem parte de um controle inativo estão isentos.

Vale a pena lembrar alguns valores. O cinza #767676 dá 4.54:1 sobre branco e costuma ser citado como o cinza puro mais claro que passa no AA; #777777 dá 4.48:1 e falha. O mais escuro #595959 chega a 7.00:1 e passa no AAA. Cores saturadas podem enganar: o vermelho puro #ff0000 sobre branco dá só 4.00:1, enquanto o vermelho mais fechado #c01c28 chega a 6.11:1. O texto de placeholder dentro de campos de formulário é uma falha frequente, porque os designers muitas vezes o deixam bem claro de propósito.

Conferindo as cores na prática

Você raramente precisa fazer a conta da fórmula à mão. Quando você inspeciona um elemento de texto, o seletor de cores das ferramentas de desenvolvedor dos principais navegadores mostra a razão de contraste em relação ao fundo, muitas vezes com uma linha marcando os limites AA e AAA. Dois casos pedem cuidado extra. Um texto sobre uma foto ou um degradê não tem um fundo único, então confira-o contra a parte mais clara sobre a qual ele fica, ou ponha um painel sólido atrás. E um site com tema escuro precisa ser conferido duas vezes, porque uma cor que passa sobre branco pode falhar sobre um quase preto: o azul #1a5fb4 dá 6.29:1 sobre branco, mas só 3.34:1 sobre preto puro.

Nunca só a cor

O contraste entre texto e fundo é metade da história. O critério 1.4.1 Uso de Cores, de nível A, diz que a cor não pode ser o único jeito de mostrar uma informação. O vermelho #c01c28 e o azul #1a5fb4 se leem bem sobre branco, mas um contra o outro a razão é só 1.03:1. Em tons de cinza, ou para alguém que não distingue vermelho de azul, eles viram o mesmo cinza. Então um campo obrigatório marcado só por um rótulo vermelho, ou um link que difere do texto em volta só pela cor, precisa de um segundo sinal: uma palavra, um ícone, um sublinhado.