Contexto
Erros, avisos, estados obrigatórios e confirmações costumam receber cores diferentes. Quando essa cor é o único sinal, parte das pessoas pode não perceber o que aconteceu ou o que precisa fazer, especialmente em situações de baixa visão, daltonismo, impressão em escala de cinza ou uso de tecnologias assistivas.
Use a cor para reforçar o estado, mas sempre combine esse sinal com texto, ícone, padrão, borda ou outra indicação perceptível. Em um campo inválido, por exemplo, escreva qual é o problema e associe a mensagem ao campo; não dependa apenas de uma borda vermelha.
Faça a informação aparecer perto do elemento afetado e mantenha contraste suficiente para que texto, ícones, bordas e estados sejam percebidos. O sinal adicional precisa transmitir a mesma informação: um ícone sem significado explicado ou uma legenda distante pode não resolver o problema. Teste a interface sem cor e com tecnologias assistivas.
Porque isso importa?
Nem todas as pessoas percebem cores da mesma forma. Uma pessoa pode não distinguir vermelho de verde, usar uma tela com brilho reduzido ou acessar a interface por leitor de tela. Se o erro for comunicado apenas visualmente pela cor, ela pode não saber qual campo está inválido nem como continuar.
Adicionar texto e outros sinais torna a informação mais robusta para diferentes condições de percepção e também melhora a compreensão para quem está com pressa, em um dispositivo pequeno ou diante de muitos campos. O requisito não proíbe cores; ele impede que a cor seja a única forma de comunicar o significado.
Quando usar?
- Em erros de validação de campos e formulários.
- Em estados de sucesso, alerta, seleção ou obrigatoriedade.
- Em gráficos, tabelas e mapas que diferenciam categorias por cor.
- Em links, controles e indicadores que mudam de estado.
- Em mensagens de sistema que usam cores semânticas.
Quando evitar?
- Quando a única indicação for uma borda ou fundo vermelho.
- Quando um campo obrigatório for identificado apenas pela cor.
- Quando uma legenda distante exigir que a pessoa memorize o significado das cores.
- Quando um ícone substituir o texto e não tiver nome ou contexto compreensível.
- Quando o contraste ou a diferença entre estados não puder ser percebido.
Recomendações
Faça
- Escreva o estado.
- Identifique o campo.
- Associe a mensagem.
- Use ícones com significado.
- Mantenha contraste.
- Teste sem cor.
Evite
- Não use só vermelho.
- Não dependa de legenda distante.
- Não troque texto por ícone.
- Não use baixo contraste.
- Não marque sucesso só com verde.
- Não valide apenas visualmente.
