Contraste WCAG: o que é e como medir

Contraste WCAG é um número que diz quanto o texto se destaca do fundo. Ele vai de 1:1 (duas cores iguais, nada se lê) até 21:1 (preto sobre branco). Para o texto comum de um site, a WCAG pede pelo menos 4,5:1. Se o seu número ficar abaixo disso, parte das pessoas vai ter dificuldade para ler.

A sigla WCAG vem de Web Content Accessibility Guidelines, ou “Diretrizes de Acessibilidade para Conteúdo Web”. É um documento do W3C, a organização que define padrões de acessibilidade da web. A versão atual é a WCAG 2.2, de 2023, que manteve os mesmos valores de contraste da 2.1. Os números deste artigo valem para as duas.

Como o número é calculado

O contraste compara o brilho das duas cores, e não o matiz delas. O brilho medido aqui se chama luminância relativa: um valor de 0 (o preto mais escuro) a 1 (o branco mais claro). A WCAG define a razão assim: (L1 + 0,05) ÷ (L2 + 0,05), em que L1 é a luminância da cor mais clara e L2 a da mais escura. O resultado vai de 1 a 21.

Você não precisa fazer essa conta à mão. Qualquer verificador de contraste faz por você. O que importa entender é a consequência: duas cores de matizes muito diferentes podem ter o mesmo brilho e, portanto, contraste quase nulo. Um vermelho e um verde escuros, por exemplo, podem ficar parecidos quando você tira a cor da imagem. Esse efeito aparece com força em avisos de erro e sucesso feitos só com vermelho e verde.

Os números que você precisa saber

A WCAG define três limites que aparecem o tempo todo:

Situação	Mínimo	Nível
Texto comum	4,5:1	AA
Texto grande	3:1	AA
Componentes de interface e partes de gráficos	3:1	AA
Texto comum (versão reforçada)	7:1	AAA
Texto grande (versão reforçada)	4,5:1	AAA

AA é o nível que a maioria dos sites e das marcas toma como meta. O AAA é mais exigente. A diferença entre os dois tem um artigo próprio: AA ou AAA, qual contraste buscar. Já o que conta como “texto grande” está em contraste em texto grande e texto pequeno.

Um detalhe que pega muita gente: o valor não se arredonda. O W3C dá o exemplo de 4,499:1, que não atinge o mínimo de 4,5:1, mesmo parecendo igual.

Exemplo prático: medindo uma paleta

Vamos medir quatro combinações, todas com valores calculados pela fórmula da WCAG.

1. Texto #1F2937 (cinza-grafite) sobre fundo #FFFFFF (branco): cerca de 14,68:1. Passa em tudo, inclusive no AAA.
2. Texto #FFFFFF sobre fundo #F59E0B (âmbar): cerca de 2,15:1. Reprova em qualquer nível.
3. Texto #1F2937 sobre fundo #F59E0B: cerca de 6,83:1. Passa no AA e no AAA para texto comum.
4. Texto #FFFFFF sobre fundo #0B5FA5 (azul): cerca de 6,57:1. Passa no AA e fica abaixo dos 7:1 do AAA.

A lição da combinação 2 é a mais comum em lojas pequenas: o âmbar é uma cor clara, então letra branca sobre ele some. Trocar a letra para o grafite resolve sem mudar a cor da marca.

Passo a passo para medir

1. Anote o HEX da cor do texto e o HEX da cor do fundo.
2. Abra um verificador de contraste. O W3C lista alguns na página de explicação do critério 1.4.3 (sem recomendar nenhum), como o Colour Contrast Analyser.
3. Digite as duas cores e leia a razão, sem arredondar para cima.
4. Compare com a tabela acima, conforme o tamanho do texto e o nível que você quer atingir.
5. Se reprovar, escureça a cor escura ou clareie a clara. Mudar só um pouco o brilho costuma bastar.

Onde a regra se aplica e onde não

O critério 1.4.3 da WCAG vale para textos e para imagens de texto, como um cartaz de promoção postado como foto. Ele vale também para o texto que aparece só quando o mouse passa por cima ou quando o teclado seleciona o item, e para o texto de exemplo dentro de campos de formulário (o chamado placeholder). Muita gente esquece dessas duas últimas.

Há exceções. Não têm exigência de contraste:

• texto de componente inativo, como um botão desativado;
• texto puramente decorativo;
• texto que faz parte de um logotipo ou nome de marca.

Ícones, bordas de campos e partes de gráficos têm outra exigência, de 3:1, no critério 1.4.11 (Contraste Não Textual). Esse assunto está no artigo sobre contraste em botões, ícones e campos. Um exemplo que o W3C dá como falha na página desse critério: a borda cinza #9D9D9D de uma caixa de seleção sobre fundo branco dá 2,7:1 e reprova.

Erros ao medir contraste

Medir só o título, não o texto pequeno. O título grande pode passar com 3:1 e o parágrafo logo abaixo, com a mesma cor, reprovar. Meça cada tamanho.

Testar com a cor “de projeto” e publicar outra. Se o designer mediu #767676 e o site entrou no ar com #777777, o resultado muda. Sobre o branco, #767676 dá cerca de 4,54:1 e passa; #777777 dá cerca de 4,48:1 e não passa. Por isso o número precisa ser conferido na cor final.

Texto sobre foto sem controle. O fundo muda a cada pixel. A página de explicação do W3C diz que a medida se faz contra o fundo sobre o qual o texto aparece normalmente, e lista como falha o fundo de imagem que não contrasta o bastante. A saída prática é pôr uma faixa sólida atrás do texto.

Achar que contraste resolve daltonismo sozinho. A medida usa luminância, então o matiz pouco pesa. Contraste ajuda muito, mas não substitui outros sinais, como texto e ícone. Isso vale para qualquer informação passada só pela cor.

Quando passou, mas ainda ficou ruim

Passar na conta é o mínimo. A WCAG explica que o 4,5:1 foi pensado para compensar a perda de sensibilidade ao contraste de quem tem uma visão em torno de 20/40, o que equivale a uma redução moderada. Quem tem visão mais reduzida pode precisar de mais. Se o seu texto é longo, como um cardápio, uma receita ou uma ficha de produto, vale ir além do mínimo sempre que a paleta permitir.

Depois de ajustar as cores, teste o resultado completo em tamanhos reais, no celular e ao ar livre, onde o reflexo da tela atrapalha. O artigo como testar uma paleta antes de usar mostra um roteiro para isso.