Contraste de cores e WCAG: como deixar o texto fácil de ler

Texto cinza-claro sobre branco fica elegante no arquivo de design e é difícil de ler no celular sob o sol, com a vista cansada ou com baixa visão. As diretrizes de acessibilidade WCAG transformam “legível” num número que dá para conferir.

A razão de contraste

O contraste é uma razão de 1:1 (a mesma cor) a 21:1 (preto sobre branco). Ele se baseia na luminância relativa, o quanto cada cor parece clara aos olhos, com o verde pesando mais e o azul menos. Por isso texto amarelo sobre branco quase some, enquanto azul sobre branco se lê bem.

Os limites

                 Texto normal   Texto grande
AA  (mínimo)     4,5:1          3:1
AAA (reforçado)  7:1            4,5:1

Texto grande = pelo menos 24px, ou 18,66px em negrito

AA é o nível citado pela maioria das leis e políticas de acessibilidade, então trate-o como o mínimo. Vale buscar AAA em textos longos de leitura. Ícones, bordas de campos e indicadores de foco que transmitem informação precisam de pelo menos 3:1 segundo a WCAG 2.1.

Combinações que costumam falhar

Texto cinza de placeholder, texto branco sobre cores de marca vivas como laranja, amarelo ou verde-claro, e texto sobre fotos. As margens podem ser mínimas: #777777 sobre branco dá cerca de 4,48:1, logo abaixo do AA, enquanto #767676 dá cerca de 4,54:1 e passa.

Ajustes rápidos

Escureça o texto ou o fundo um ou dois tons em vez de mudar a matiz; pequenas mudanças de luminosidade mexem muito na razão. Deixe os rótulos de botões de cores vivas grandes e em negrito, ou use texto escuro em vez de branco. Sobre fotos, coloque uma camada escura atrás do texto.

O contraste não é a única regra de cor

As WCAG também dizem que a cor não pode ser a única forma de transmitir uma informação. Um campo de formulário marcado como inválido só por uma borda vermelha, ou um gráfico que diferencia as linhas só pela cor, falha com pessoas com daltonismo, cerca de 1 em cada 12 homens. Acrescente um ícone, um rótulo de texto, uma textura ou um estilo de linha diferente.

Modo escuro

As mesmas proporções valem para fundos escuros. Branco puro sobre preto puro chega a 21:1, mas pode ficar agressivo e fazer as letras parecerem brilhar para alguns leitores; um cinza claro sobre um cinza muito escuro ainda passa no AA com folga e é mais confortável para leituras longas. Verifique os dois temas, porque um par aprovado no modo claro muitas vezes falha quando as cores se invertem.

Texto sobre imagens e degradês

Sobre uma foto ou um degradê, o fundo muda atrás de cada letra. Meça o contraste em relação à parte mais clara do fundo que fica atrás do texto, não à média. Uma camada escura semitransparente ou uma faixa sólida atrás do texto deixa o resultado previsível.

O que vem por aí

O rascunho das WCAG 3 estuda um novo método de contraste chamado APCA, que considera com mais precisão o tamanho e o peso da fonte. Ainda é um rascunho: as leis e auditorias de hoje se referem às WCAG 2.1 e 2.2, então os limites de 4,5:1 e 3:1 continuam sendo os que você precisa cumprir.

Confira uma combinação

O verificador de contraste de cores da 4Dev mostra a razão para qualquer cor de texto e de fundo, com prévia ao vivo e aprovado ou reprovado para AA e AAA, em texto normal e grande. O cálculo usa a fórmula da WCAG 2 e roda no seu navegador.

Abrir o verificador de contraste