Contraste em texto grande e texto pequeno

O contraste mínimo para texto grande é 3:1 no nível AA e 4,5:1 no nível AAA. Para texto que não é grande, os valores sobem para 4,5:1 (AA) e 7:1 (AAA). A WCAG, o conjunto de diretrizes de acessibilidade do W3C, abre essa folga porque letras maiores são mais fáceis de ler, mesmo com menos diferença entre texto e fundo.

O difícil é saber o que a WCAG chama de “grande”. A definição é técnica e tem pegadinhas, e o resto deste artigo trata de cada uma. A versão atual, a WCAG 2.2 (outubro de 2023), manteve todos esses valores.

O que conta como texto grande

A WCAG 2.1 define texto de escala grande como aquele com pelo menos 18 pontos, ou 14 pontos em negrito. Ponto (pt) é uma medida usada em editores de texto como o Word. Em sites, o tamanho costuma vir em pixels (px).

A página de explicação do critério 1.4.3 usa a conversão de 1 ponto para 1,333 pixel. Com ela:

• 18 pt equivalem a cerca de 24 px;
• 14 pt equivalem a cerca de 18,5 px (a conta exata dá 18,67 px, e a própria página admite que o valor é uma aproximação).

Para ficar do lado seguro, trate 24 px como o tamanho do texto grande normal e 19 px, em negrito, como o tamanho do texto grande em negrito.

O tamanho padrão da maioria dos navegadores para o texto de parágrafo é de 16 px. Isso é 12 pt, bem abaixo do limite. Portanto, o corpo do texto de um site quase sempre é texto pequeno, e só títulos grandes entram na exceção.

Os valores de AA e AAA lado a lado

Tipo de texto	AA	AAA
Texto comum	4,5:1	7:1
Texto grande (18 pt, ou 14 pt em negrito)	3:1	4,5:1

Para entender como a razão é medida, veja contraste WCAG: o que é e como medir. Para decidir entre os dois níveis, veja AA ou AAA: qual contraste buscar.

Exemplo prático: o mesmo cinza em dois tamanhos

Pense no site de um brechó. O designer escolheu o cinza médio #8A8F98 para os textos secundários. Sobre fundo branco #FFFFFF, ele dá cerca de 3,25:1 de contraste.

• Título da página, 32 px: texto grande. O mínimo do AA é 3:1. Passa.
• Parágrafo de apoio, 16 px: texto comum. O mínimo do AA é 4,5:1. Não passa.
• Título grande no AAA: o mínimo é 4,5:1. Também não passa.

A mesma cor, no mesmo site, passa num lugar e reprova no outro. Se você mede uma cor só uma vez, perde esse detalhe. Meça por tamanho.

Passo a passo

1. Liste os estilos de texto do projeto: título grande, subtítulo, parágrafo, legenda, rótulo de botão, rodapé.
2. Anote o tamanho em px e o peso (normal ou negrito) de cada estilo.
3. Marque como “grande” apenas quem tem 24 px ou mais, ou cerca de 19 px ou mais em negrito.
4. Meça o contraste de cada estilo contra o seu fundo real.
5. Compare com a tabela acima. Quem falhar, escureça o texto ou clareie o fundo. No exemplo, trocar #8A8F98 por #4B5563 leva o parágrafo a cerca de 7,56:1 sobre o branco, o que passa até no AAA.

Seis tropeços ao classificar um texto como grande

Considerar 16 px em negrito como texto grande. Negrito só baixa o limite para 14 pt, que são cerca de 18,5 px. Um rótulo de 16 px em negrito continua sendo texto comum e precisa de 4,5:1.

Esquecer que o fundo pode mudar. Um título grande sobre uma faixa cinza clara pode ter um contraste bem diferente do mesmo título sobre branco. Meça no fundo real. Por exemplo, o #8A8F98 sobre #F3F4F6 dá cerca de 2,95:1 e fica abaixo de 3:1, mesmo no tamanho grande.

Usar fonte muito fina. A WCAG mede só tamanho e negrito. Traços finos, porém, perdem presença em contraste baixo, e o número passa mas a leitura piora. Se a fonte for leve, vá além do mínimo.

Aplicar a exceção a botões e rótulos. Texto de botão costuma ter 14 a 16 px. Só se aplica o limite de 3:1 se o rótulo for realmente grande pela definição. Quando houver dúvida, trate como texto comum. Para a parte visual do botão em si, veja contraste em botões, ícones e campos.

Fixar o tamanho em pixels e travar o zoom. A WCAG 2.1, no critério 1.4.4, exige que o texto possa ser ampliado em até 200% sem perda de conteúdo ou de função. Isso ajuda quem tem baixa visão a ler sem ferramentas extras. Por isso, não bloqueie o zoom do navegador e prefira unidades que acompanham a ampliação.

Medir o contraste só no desktop. O mesmo título pode ter 32 px no computador e 22 px no celular. No celular ele já pode ter caído abaixo do limite de 24 px e deixado de ser texto grande. Meça o tamanho nas duas versões da página.

O banner de promoção de uma loja de brinquedos

Uma loja de brinquedos posta um banner com a frase “Frete grátis neste fim de semana”. O fundo é o turquesa #2DB5A6 e a letra é branca. O contraste é de cerca de 2,54:1, o que reprova em qualquer tamanho, mesmo com letras enormes, porque o piso do texto grande é 3:1.

O conserto é trocar a letra para um verde quase preto, #0B2E2B, que sobre o turquesa dá cerca de 5,74:1. Aí a frase passa no AA para texto comum, sem depender de tamanho. Observe a diferença de postura: em vez de contar com a exceção do texto grande, você escolhe um par que passa com folga e deixa a exceção de reserva.

Na dúvida entre grande e pequeno, use 4,5:1

Se a dúvida é “isso é grande ou pequeno?”, escolha o caminho seguro e use 4,5:1. Texto de corpo, legendas, rodapés, botões e links dentro de frases entram nessa conta. Reserve o 3:1 para títulos que sejam claramente grandes e que você consiga medir.

Quem tem baixa visão se beneficia de ir além. O W3C explica que o 4,5:1 do AA foi escolhido para compensar a perda de sensibilidade ao contraste de quem tem visão em torno de 20/40, e há leitores com perdas maiores. O artigo baixa visão e cor: o que ajuda a ler trata disso.