Vermelho e verde: avisos sem confusão

Para que um aviso de erro e um de sucesso não se confundam, nunca dependa só do vermelho e do verde. Escreva a mensagem em texto, acrescente um ícone de formato diferente para cada caso e deixe as duas cores com brilhos distintos. A cor continua ajudando, mas deixa de ser a única pista.

Isso importa porque a dificuldade em separar o vermelho do verde é o tipo mais comum de deficiência de visão de cores, segundo o National Eye Institute (NIH). Na página principal sobre daltonismo, o NEI informa que cerca de 1 em cada 12 homens tem deficiência de visão de cores. A página não traz um número equivalente para mulheres. Quem tem esse tipo vê certos verdes mais avermelhados, certos vermelhos mais esverdeados e menos brilhantes e, nos casos mais fortes, não distingue um do outro. Os tipos estão descritos em daltonismo: tipos e efeito nas cores.

Por que o par vermelho e verde falha

O vermelho para erro e o verde para sucesso são convenções antigas. Funcionam para muita gente, mas falham justamente para quem mais precisa do aviso.

O problema piora quando as duas cores têm o mesmo brilho. Veja um par comum de interface:

• Vermelho #B3261C sobre branco: cerca de 6,54:1.
• Verde #0F6B3A sobre branco: cerca de 6,59:1.
• Um contra o outro: cerca de 1,01:1.

Os dois passam no contraste de texto com o fundo branco, e por isso parecem aprovados num teste automático. Mas o contraste entre eles é de cerca de 1,01:1, ou seja, praticamente igual. Para quem não distingue os dois matizes, o que sobra é um só tom.

O W3C é direto sobre esse caso. A página de apoio do critério 1.4.1 diz que, quando a pessoa precisa diferenciar cores específicas, como verde para “válido” e vermelho para “inválido”, é necessário um indicador visual adicional, mesmo que o contraste entre as cores seja alto. Para o caso de campos obrigatórios ou com erro identificados só pela cor, o W3C chama de falha comum (F81).

Os quatro sinais que valem mais que a cor

1. Texto claro. O critério 3.3.1 da WCAG, de nível A, pede que um erro detectado automaticamente seja identificado e descrito em texto. A cor e o ícone podem reforçar, mas não substituem. O exemplo do W3C é uma mensagem que explica também o conserto: “Please provide a valid email address in the format [email protected]”. Em português: “Digite um e-mail válido, como [email protected]”.
2. Ícone com formato diferente. Um triângulo com exclamação para erro e um círculo com visto para sucesso são fáceis de separar sem cor.
3. Posição e proximidade. A mensagem fica junto do campo, não só no topo da página.
4. Brilho diferente. Se possível, deixe o fundo do aviso de erro e o de sucesso com tons de claridade distintos. Pelo menos, nunca deixe os dois quase iguais.

Dois avisos para o formulário de pedidos de uma loja de artesanato

O formulário de pedido tem dois avisos.

Passo 1. Escreva as duas mensagens.

• Erro: “Telefone incompleto. Digite o DDD e os 9 números.”
• Sucesso: “Pedido enviado. Você receberá um e-mail de confirmação.”

Passo 2. Escolha um ícone para cada. Triângulo de alerta para o erro e círculo com visto para o sucesso. Inclua uma descrição de texto no ícone para leitores de tela.

Passo 3. Defina fundo e texto.

• Erro: fundo #FFF4F2 com texto #B3261C (cerca de 6,07:1).
• Sucesso: fundo #EDF7F0 com texto #0F6B3A (cerca de 6,02:1). Os dois passam com folga no AA, que pede 4,5:1.

Passo 4. Faça o teste em escala de cinza. Tire a cor da tela. As duas mensagens ainda são diferentes? Pelas palavras e pelos ícones, sim. Se alguma delas só se explicava pela cor, volte ao passo 1.

Passo 5. Meça o ícone. Ele é informação, então precisa de 3:1 contra o fundo do aviso, pelo critério 1.4.11. O assunto está em contraste em botões, ícones e campos.

Posso trocar o par por azul e laranja?

Trocar o par ajuda um pouco em alguns casos, mas não resolve sozinho. A razão é simples: existem também os tipos que afetam o azul e o amarelo, como a tritanomalia, em que o azul se confunde com o verde. Qualquer par de matizes pode falhar para algum tipo de deficiência de visão de cores.

O que funciona de verdade é o conjunto: texto, ícone e brilho diferente. Se você ainda escolher um par de cores com folga de claridade entre si, melhor. Mas essa é uma camada extra, não a base.

Erros em avisos de formulário

Borda do campo em vermelho como único sinal. Quem não percebe a mudança não sabe que errou. Mostre o texto do erro.

Mensagem que só diz “Erro”. Não explica o que consertar. Diga qual campo e o que digitar.

Ícone sem texto, só com uma cor. Um “x” vermelho e um “ok” verde em tamanho pequeno ainda dependem da cor para o sentido. Mantenha ao lado a palavra.

Mensagem que some depois de dois segundos. Quem lê devagar, ou usa leitor de tela, perde a informação. Deixe o aviso na tela até a pessoa agir. O critério 2.2.1 da WCAG (nível A) trata de limites de tempo definidos pelo conteúdo: a pessoa precisa poder desligar, ajustar ou estender o tempo, a menos que a mesma informação esteja disponível em outro lugar.

Confiar só no teste automático de contraste. O par vermelho e verde do começo passa em cada teste com o fundo branco e, mesmo assim, se confunde entre si. Meça também o contraste entre as duas cores.

Próximo passo: refazer os avisos que você já tem

Abra a sua página em escala de cinza e releia cada aviso de erro e de sucesso. Onde sobrar só um quadrado cinza, acrescente texto e ícone. A regra geral por trás disso está em não use só a cor para passar informação.