Não use só a cor para passar informação

Se uma informação só pode ser entendida pela cor, algumas pessoas vão perdê-la. A solução é sempre somar um segundo sinal: um texto, um ícone, um sublinhado, um desenho ou uma posição. A cor pode continuar lá. Ela só não pode trabalhar sozinha.

Essa é uma regra oficial da WCAG, o conjunto de diretrizes de acessibilidade do W3C. O critério 1.4.1, chamado “Uso da Cor”, é de nível A, o mais básico, e a WCAG 2.2 (outubro de 2023) o manteve. O texto diz que a cor não deve ser usada como único meio visual de transmitir informação, indicar uma ação, pedir uma resposta ou distinguir um elemento visual.

Quem perde a informação quando só há cor

A página de apoio do W3C lista quem é afetado: pessoas que não percebem certas cores, pessoas com visão parcial, pessoas mais velhas e quem usa uma tela monocromática. Há também situações comuns do dia a dia, como uma tela com muito reflexo ou uma impressão em preto e branco. Para quem tem daltonismo, o assunto está detalhado em daltonismo: tipos e efeito nas cores.

Cinco lugares em que a cor trabalha sozinha

Links no meio do texto. Se o link só é diferente do texto ao redor por ser azul, quem não distingue aquele azul não sabe que há link. A técnica G183 do W3C propõe um contraste de pelo menos 3:1 entre a cor do link e a do texto vizinho. Na prática, o jeito mais seguro e simples é manter o sublinhado.

Campos obrigatórios marcados só de vermelho. O W3C classifica como falha comum (F81) identificar campos obrigatórios ou com erro apenas pela cor. Um asterisco e a palavra “obrigatório” resolvem.

Erros de formulário. Borda vermelha no campo não diz o que está errado. O critério 3.3.1 (Identificação de Erro) pede que o erro seja descrito em texto. Cor e ícone podem reforçar, mas não substituem o texto.

Gráficos. Legenda dizendo “linha azul, linha laranja” falha se as duas linhas têm o mesmo brilho. Rotule as linhas direto no gráfico ou use formatos e traçados diferentes. Para isso, veja cores para gráficos que se leem bem.

Status em tabelas e cardápios. Uma lista de produtos em que os itens sem glúten ficam “em verde” não funciona para quem não vê o verde. Coloque também uma sigla ou um ícone com legenda.

O que o W3C considera um sinal a mais

A página de apoio descreve estas formas aceitas:

• Texto. Escreva em palavras o que a cor indica (técnica G14).
• Cue visual extra. Sublinhado, negrito, ícone, borda ou mudança de formato (técnica G182).
• Cor com padrão. Em imagens e gráficos, combine a cor com listras, pontos ou formas (técnica G111).

O W3C faz um aviso importante: quando a pessoa precisa distinguir cores específicas, como verde para “válido” e vermelho para “inválido”, é preciso um indicador visual extra, mesmo que o contraste entre as cores seja alto. A página resume: o critério exige uma alternativa visível à cor.

Exemplo prático: um aviso de formulário

Vamos montar o aviso de um formulário de encomenda de uma loja de bairro.

Versão que falha. O campo de telefone fica com a borda vermelha #B3261C quando há erro, e verde #0F6B3A quando está certo. Quem não separa os dois tons não vê diferença.

Versão corrigida, passo a passo:

1. Escreva a mensagem em texto: “Telefone incompleto. Digite o DDD e os 9 dígitos.”
2. Ponha a mensagem junto do campo e não só no topo da página, para a pessoa ligar uma coisa à outra.
3. Acrescente um ícone ao lado do texto, como um triângulo de alerta para erro e um “ok” para sucesso. Os formatos são diferentes, e a leitura não depende da cor.
4. Mantenha a cor como reforço: texto do erro em #B3261C sobre fundo #FFF4F2 (cerca de 6,07:1) e texto do sucesso em #0F6B3A sobre #EDF7F0 (cerca de 6,02:1). Ambos passam no AA (mínimo de 4,5:1).
5. Faça o teste final: tire a cor da tela (escala de cinza). Se você ainda entende o que está certo e o que está errado, a mensagem está pronta.

O par erro e sucesso é tão frequente que tem artigo próprio, vermelho e verde: avisos sem confusão.

Quatro correções que dão errado

Trocar a cor por ícone sem rótulo. Um ícone sozinho pode ser ambíguo. Se houver dúvida sobre o significado, escreva a palavra.

Usar só um tom mais escuro como sinal. A diferença entre dois tons parecidos pode não ser percebida. Se a distinção importa, use um formato diferente ou um texto.

Remover o sublinhado dos links por estética. É a causa mais frequente de falha. Se o sublinhado sair do texto corrido, o link precisa de outro sinal forte, e a cor sozinha não basta.

Esquecer a descrição de imagens. O W3C lista como falha (F13) a descrição de uma imagem que omite a informação transmitida pela cor. Se o gráfico mostra “vermelho para queda”, a descrição precisa dizer que houve queda.

Como auditar uma peça em dois minutos

1. Converta a tela ou o post para escala de cinza.
2. Passe os olhos e responda: dá para saber o que é link, o que é erro, o que é selecionado, o que é promoção?
3. Onde a resposta for “não”, acrescente texto, ícone ou sublinhado.
4. Confira também o contraste de cada texto novo. A medida está em contraste WCAG: o que é e como medir.

Se tiver de escolher por onde começar, comece pelos links: um site com links sem sublinhado no meio do texto tem o conserto mais rápido da lista.