Contraste de cores para texto, botões e ícones

Porque é que o contraste importa

Texto pálido custa leitores. Pessoas com baixa visão, leitores mais velhos e qualquer pessoa que olhe para o telemóvel com luz forte precisam de uma diferença clara entre texto e fundo. Por isso, as Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG) do W3C definem valores mínimos para texto, para controlos como botões e campos de entrada, e para ícones e gráficos. Podem ser medidos e verificados antes do lançamento.

Como funciona a relação de contraste

A relação de contraste compara o brilho de duas cores. As WCAG não olham para a tonalidade, mas para a luminância relativa: um valor entre 0 para o preto mais escuro e 1 para o branco mais claro. Os três canais vermelho, verde e azul são convertidos e ponderados: o verde conta mais, o vermelho menos e o azul ainda menos. A relação é (L1 + 0,05) / (L2 + 0,05), em que L1 é a luminância da cor mais clara. O resultado fica entre 1:1 para duas cores iguais e 21:1 para preto sobre branco.

Duas regras do W3C importam na prática. Primeiro, os valores não são arredondados: uma relação de 4,499:1 não cumpre o limite de 4,5:1. Segundo, o contraste mede-se em relação ao fundo definido para o texto. Se uma página definir só a cor do texto e nenhuma cor de fundo, o W3C conta isso como falha, porque o fundo predefinido do visitante é desconhecido. Define sempre as duas cores em conjunto.

Os três critérios de sucesso

• 1.4.3 Contraste (mínimo), nível AA: o texto e as imagens de texto precisam de pelo menos 4,5:1, o texto grande de pelo menos 3:1.
• 1.4.6 Contraste (melhorado), nível AAA: o texto precisa de pelo menos 7:1, o texto grande de pelo menos 4,5:1. É o nível mais exigente e ajuda sobretudo em textos longos.
• 1.4.11 Contraste sem texto, nível AA: pelo menos 3:1 em relação às cores adjacentes, para tudo o que precisas de ver para reconhecer um controlo e o seu estado (por exemplo, o contorno de um campo ou um indicador de foco) e para as partes dos gráficos de que precisas para compreender o conteúdo, como ícones ou linhas num gráfico.

O que conta como texto grande

Texto grande tem pelo menos 18 pontos, ou pelo menos 14 pontos a negrito. O W3C converte isto em cerca de 24 píxeis e cerca de 18,5 píxeis a negrito. O texto grande pode ter menos contraste porque as letras são maiores e os traços mais largos. Cuidado com tipos de letra finos: segundo o W3C, a suavização (anti-aliasing) pode fazer com que tipos de letra finos ou invulgares pareçam mais claros do que a cor definida. Recomenda tipos de letra mais grossos ou um par de cores claramente acima do mínimo.

O que não precisa de cumprir

• Componentes inativos, como um botão desativado.
• Decoração pura e texto que ninguém consegue ver.
• Texto que faz parte de um logótipo ou de uma marca.
• Texto acessório numa imagem com outro conteúdo significativo, como uma placa de rua numa fotografia.

Erros comuns

• Cinzento claro sobre branco. O cinzento para datas, legendas ou texto secundário é muitas vezes demasiado pálido: #999999 sobre branco atinge apenas 2,84:1. O cinzento puro mais claro que cumpre o nível AA para texto normal sobre branco é #767676, com 4,54:1.
• Texto sobre imagens. O contraste muda em cada parte da fotografia. O W3C indica as imagens de fundo sem contraste suficiente como falha (F83). Põe o texto sobre uma área sólida, escurece a imagem por trás ou coloca o texto ao lado da imagem. Verifica o ponto mais claro por trás do texto.
• Texto de placeholder. A dica cinzenta num campo de entrada vazio é texto, e aplica-se-lhe o 1.4.3. Um cinzento claro como #9ca3af sobre branco atinge apenas 2,53:1. Um placeholder também não substitui uma etiqueta visível.
• Estados de hover e de foco. O texto que aparece ou muda ao passar o rato ou com o foco do teclado tem de cumprir os mesmos valores. Um efeito de hover não pode baixar o contraste de um controlo nem enfraquecer o indicador de foco. Um indicador de foco que desenhes tu precisa de 3:1 em relação ao fundo adjacente.
• Texto branco sobre cores de marca vivas. Botões laranja, amarelos, verde-claros ou turquesa com texto branco falham muitas vezes: branco sobre #ff6600 atinge 2,93:1.
• Contornos e ícones pálidos. Se o contorno for a única coisa que mostra onde está um campo de entrada, precisa de 3:1: #cccccc sobre branco tem 1,60:1. Os ícones que transmitem significado sem texto, como uma seta de lista pendente ou um ícone de fechar, também precisam de 3:1.
• Verificar só um tema. Se o teu site tiver modo escuro, verifica os pares de cores dele à parte. Uma cor que funciona sobre branco pode falhar sobre um fundo escuro.

Corrigir uma paleta de marca sem perder a marca

1. 1Anota cada cor com a sua função: texto, fundo, destaque ou botão, contorno. Muitos problemas começam quando uma só cor faz todos os trabalhos.
2. 2Mantém a cor da marca onde as regras são mais fáceis de cumprir ou não se aplicam: no logótipo, em áreas grandes, na decoração e em títulos grandes.
3. 3Para texto e elementos pequenos, usa um tom mais escuro ou mais claro da mesma tonalidade. Se só mudar a luminosidade, a cor continua reconhecível: texto branco sobre #c74f00, um laranja mais escuro, atinge 4,61:1.
4. 4Ou muda antes a cor do texto. Texto escuro sobre uma cor de marca viva funciona muitas vezes melhor do que branco: #1a1a1a sobre #ff6600 atinge 5,92:1.
5. 5Define um cinzento para texto secundário que cumpra, por exemplo #767676 sobre branco, e usa-o em todo o lado em vez de vários cinzentos pálidos.
6. 6Verifica todos os estados: normal, hover, foco, erro e modo escuro. Guarda as cores finais como variáveis na tua folha de estilos, para que ninguém volte a escolher à mão uma cor pálida.

Verifica as tuas cores com o Do4U

A Verificação do contraste de cores calcula estes valores para as tuas próprias cores. Introduzes as tuas cores, uma por linha, e dás a cada uma uma função: texto, fundo, destaque (por exemplo, um botão) ou contorno. O código verifica cada par que faça sentido com base nos níveis AA e AAA para texto normal e grande e no valor de 3:1 para contornos, ícones e áreas de botão, sem arredondar para cima. Para cada par que falha, recebes a cor mais próxima que cumpre, uma mais escura e outra mais clara, na mesma tonalidade. O Do4U cria também uma paleta ajustada, volta a verificá-la no seu conjunto e exporta-a como propriedades personalizadas de CSS, SCSS ou JSON. Tudo funciona em código, sem IA, e a verificação é grátis.

A verificação só conhece os pares de cores que introduzes. Não vê tamanhos de letra, imagens por trás do texto, transparências nem estados de hover e de foco, por isso testa também as páginas finais. O Do4U cria o rascunho; tu verificas e decides.