Um valor de cor: corrigir o contraste sem redesenhar o site

O número que a norma pede

O contraste é medido como uma razão entre o brilho do texto e o brilho do que fica atrás dele. Preto sobre branco é 21 para 1. A norma de acessibilidade pede pelo menos 4,5 para 1 para texto comum e 3 para 1 para texto grande, ou seja, a partir de cerca de 24 pixels, ou 19 pixels em negrito.

A razão vem de pesquisas sobre quanta diferença uma pessoa com visão moderadamente reduzida precisa para ler com conforto. É o número que todo verificador automático, todo avaliador de contratações e toda carta de reclamação usa.

Os cinzas que passam e os cinzas que falham

Sobre um fundo branco, o limite fica numa faixa estreita. Alguns valores, com as suas razões:

#999999   2.85 to 1   fails
#949494   2.99 to 1   fails
#8a8a8a   3.45 to 1   passes only as large text
#767676   4.54 to 1   passes
#666666   5.74 to 1   passes
#595959   7.00 to 1   passes the stricter AAA level

Repare como os valores que falham estão perto dos que passam. Um tema que escolheu #999 para as legendas estava a um tom da conformidade. Ninguém vai notar a mudança lado a lado. Uma pessoa lendo no celular ao ar livre vai conseguir ler essas legendas pela primeira vez.

Por que é um único valor

Temas e construtores de páginas definem uma paleta, e o cinza-claro aparece nela uma vez. Cada legenda, dica de formulário, linha de rodapé, data e rótulo secundário aponta para essa única entrada. Mude-a e o site inteiro muda.

Num tema de blocos, a paleta fica no editor do site, em Estilos. Em temas mais antigos, fica no personalizador ou numa folha de estilo que um desenvolvedor mantém.

É também por isso que não se trata de redesenhar o site. Nada sai do lugar e nenhuma fonte muda. O site continua igual para todos, exceto para as pessoas que antes não conseguiam ler parte dele.

As cores da marca são o outro caso

O azul ou o verde de uma organização normalmente foi escolhido para um logotipo, não para texto. Cores de marca claras e vivas muitas vezes passam como fundo atrás de texto branco e falham como texto sobre branco. O nosso próprio azul, #1849B8, tem 7,8 para 1 sobre branco nos dois sentidos, o que é tanto sorte quanto escolha. Verifique a sua nos dois sentidos antes de usá-la em links.

Quando uma cor da marca falha como texto, mantenha-a para fundos, botões e títulos grandes, e escolha uma variação mais escura dela para links e texto do tamanho do corpo. Dois tons do mesmo matiz são lidos como uma só marca.

Mantenha a hierarquia, abra mão do tom claro

Os designers usam cinza-claro para fazer o texto secundário recuar. Tamanho e peso fazem o mesmo trabalho sem dificultar a leitura de nada. Uma legenda de 14 pixels num cinza que passa continua recuando ao lado de um corpo de texto de 17 pixels.

Deixar tudo preto para corrigir o contraste achata a página. Ajustar um valor e deixar o tamanho carregar a hierarquia preserva o design.

O texto de exemplo dentro dos campos de formulário também falha. Os navegadores o mostram claro por padrão, e ele falha em quase todo lugar. Se cada campo tem um rótulo visível acima dele (a série sobre formulários trata disso), você nem precisa do texto de exemplo.

O que a auditoria gratuita verifica

A auditoria gratuita aplica a regra automática de contraste em toda a página inicial e informa cada elemento que falha, com a razão medida e as cores envolvidas. Uma página inicial com trinta falhas costuma ter uma única causa. Encontre o valor compartilhado, mude-o e faça a verificação de novo.