Cor no Design de Formulários: Validação, Foco e Estados de Erro

Os formulários são as superfícies mais interativas em qualquer produto digital. São onde os usuários criam contas, concluem compras, enviam solicitações e configuram preferências. No entanto, o design de formulários é também onde a cor é mais frequentemente mal utilizada — aplicada de forma inconsistente, falhando nos requisitos de acessibilidade ou comunicando estado apenas por meio da cor de maneiras que excluem usuários com deficiências na percepção de cores.

O desafio com o design de cores em formulários é que ele precisa comunicar múltiplos estados simultâneos — padrão, focado, preenchido, inválido, válido e desabilitado — em entradas, rótulos, botões e texto auxiliar, mantendo acessibilidade e coesão visual. Este guia abrange o vocabulário completo de cores do design de formulários.

Cores de Borda de Entrada e Estados

A borda de uma entrada de texto é o principal sinal visual para seu estado atual. Cada estado precisa de um tratamento de cor distinto e inequívoco que comunique significado sem depender de nenhum outro indicador.

Os Cinco Estados Principais de Entrada

O estado padrão é a aparência de repouso de uma entrada vazia e sem foco. A borda deve ser claramente visível, mas discreta — não deve competir por atenção com o conteúdo ao redor. Um cinza médio-claro como #D1D5DB ou #CBD5E1 funciona bem em um fundo branco. O contraste da borda em si com o fundo importa menos para a legibilidade (a borda é decorativa, não texto), mas deve ser distinguível.

O estado de hover fornece um sinal sutil de affordance antes do usuário se comprometer com a interação. Um ligeiro escurecimento da borda — de #D1D5DB para #9CA3AF — é suficiente. Este micro-estado diz aos usuários "isso é interativo" sem o peso visual completo do estado de foco.

O estado de foco é o estado mais crítico e o mais frequentemente mal projetado. Quando o cursor ou o foco do teclado está em uma entrada, a borda deve indicar claramente o engajamento ativo. Uma cor de marca sólida — azuis como #3B82F6 ou #2563EB são comuns — aplicada com opacidade total em 2px de largura é a abordagem padrão. A transição de cinza para azul é um sinal forte e legível.

O estado preenchido (focado com conteúdo) normalmente usa a mesma cor de borda do estado de foco. Alguns design systems o diferenciam com uma borda ligeiramente mais escura ou um ícone indicador pequeno para reconhecer que existe conteúdo.

O estado desabilitado usa um peso visual significativamente reduzido. Um fundo de #F9FAFB e uma borda de #E5E7EB sinalizam que o campo não é atualmente interativo. O texto de entrada desabilitado deve ser aproximadamente #9CA3AF — suficientemente claro para sugerir inatividade, mas ainda legível.

Largura de Borda e Peso Visual

Bordas padrão de 1px são comuns, mas bordas de foco de 2px fornecem diferenciação de estado mais clara, particularmente para usuários em ambientes brilhantes ou em telas de resolução mais baixa. Muitos design systems usam 1px padrão e 2px de foco como o par padrão.

Use o verificador de contraste para verificar que o texto de entrada preenchida (#111827 ou similar) mantém pelo menos 4,5:1 de contraste em relação ao fundo da entrada em todos os estados.

Cor e Visibilidade do Anel de Foco

O anel de foco — também chamado de indicador de foco ou contorno de foco — é um dos elementos mais críticos de acessibilidade em qualquer interface. É o principal mecanismo pelo qual os usuários de teclado rastreiam sua posição no documento. O Critério de Sucesso 2.4.11 do WCAG 2.2 (Aparência do Foco) exige que os indicadores de foco atendam a requisitos mínimos específicos de tamanho e contraste.

O Que Torna um Anel de Foco Eficaz

Tamanho: O indicador de foco deve ter uma área de perímetro mínima de 2 pixels CSS. Uma borda sólida simples de 2px ou um contorno offset de 3px ambos satisfazem este requisito.

Contraste: O anel de foco deve ter uma razão de contraste de pelo menos 3:1 entre os estados focado e não focado do componente. Além disso, o próprio indicador de foco deve contrastar pelo menos 3:1 com as cores adjacentes.

Visibilidade em qualquer fundo: Como o foco pode recair sobre elementos em uma variedade de cores de fundo — formulários brancos, seções coloridas, fundos de imagem — usar uma abordagem de anel duplo lida com todos os contextos. Um anel interno branco (#FFFFFF) mais um anel externo colorido garante visibilidade em fundos claros e escuros:

:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF;
}

O box-shadow branco cria um halo branco entre o elemento e o contorno azul, garantindo que o contorno azul seja sempre visível independentemente da cor de fundo abaixo dele.

Escolhendo a Cor do Anel de Foco

A cor do anel de foco é tipicamente a cor interativa primária da marca — o mesmo azul usado para links, estados ativos e botões primários. Essa consistência ajuda os usuários a entenderem que o anel sinaliza "é aqui que a interação está acontecendo" em vez de "isso tem um erro" ou "isso foi concluído."

Se o primário da sua marca é uma cor escura como #1E3A5F, ele pode não fornecer contraste suficiente como anel de foco em fundos escuros. Nesses casos, uma variante mais clara e mais saturada do gerador de tons é apropriada para uso específico de foco.

Nunca remova completamente os anéis de foco. O antipadrão outline: none elimina uma funcionalidade de acessibilidade essencial. Se o anel de foco padrão do navegador for visualmente incompatível com seu design, substitua-o por um estilo de foco personalizado — não o esconda simplesmente.

Vermelho de Erro vs Verde de Sucesso: Valores de Cor Semânticos

Os estados de erro e sucesso são as decisões de cor mais importantes no design de formulários. Eles comunicam se a entrada do usuário é aceitável, o que afeta diretamente se os usuários podem concluir seu objetivo.

Cores de Estado de Erro

A cor convencional de erro é o vermelho, e as convenções existem por boas razões: o vermelho como "pare/perigo" é compreendido transculturalmente e profundamente reforçado através de sinais de trânsito, etiquetas de aviso e décadas de interfaces de software. No entanto, o tom específico de vermelho importa significativamente.

Cor de erro primária para bordas e ícones de formulários: #DC2626 (um vermelho médio com bom contraste) ou #EF4444 (ligeiramente mais saturado). Evite vermelhos muito escuros como #7F1D1D (muito próximo do marrom, legibilidade reduzida) e vermelhos muito brilhantes como #FF0000 (agressivo, falha na coerência do design system).

Tom de fundo de erro: Um tom de vermelho muito claro aplicado ao fundo da entrada reforça o estado de erro além da borda sozinha. #FEF2F2 é o fundo vermelho claro padrão usado no red-50 do Tailwind, fornecendo uma superfície de erro perceptível mas não agressiva.

Texto de erro (texto auxiliar): O texto auxiliar vermelho abaixo da entrada deve ser o mesmo vermelho usado para a borda — #DC2626 ou #B91C1C — no mesmo tamanho que o texto auxiliar normal. Se a mensagem de erro for renderizada em tamanho pequeno (abaixo de 18px), ela requer 4,5:1 de contraste em relação ao fundo branco. Verifique #DC2626 em relação a #FFFFFF no verificador de contraste — ele atinge aproximadamente 5,7:1, atendendo ao AA.

Cores de Estado de Sucesso

O verde de sucesso comunica que a entrada foi validada e aceita. A família de cores de sucesso padrão:

Borda de sucesso: #16A34A (Tailwind green-600) ou #22C55E (green-500). O green-600 fornece melhor contraste em relação a fundos brancos, tornando-o preferível para bordas e ícones.

Tom de fundo de sucesso: #F0FDF4 (green-50) — apenas o suficiente de tom para sinalizar sucesso sem sobrecarregar o formulário.

Ícone de sucesso: Um ícone de marca de verificação em #16A34A é a affordance de sucesso padrão. Posicione-o na borda final da entrada (lado direito para layouts LTR).

Contraste de Cor para Texto de Erro e Sucesso

Sempre verifique essas combinações usando o verificador de contraste ao usar tons não padrão.

Estados de Erro Acessíveis Além da Cor Sozinha

O WCAG 1.4.1 (Uso de Cor) proíbe explicitamente usar a cor como único meio de transmitir informação. Este requisito é mais comumente violado no design de validação de formulários, onde muitas equipes usam apenas a borda vermelha para sinalizar um erro.

Um estado de erro comunicado puramente através de uma borda vermelha falha para usuários com: - Protanopia (daltonismo vermelho-verde, ~1% dos homens) - Deuteranopia (forma mais comum de daltonismo vermelho-verde, ~6% dos homens) - Tritanopia (daltonismo azul-amarelo) - Acromatopsia (daltonismo completo) - Condições de baixa visão onde a percepção de cores é reduzida

Indicações Redundantes Necessárias

Ícone: Um ícone de erro (tipicamente um ponto de exclamação ou X) deve acompanhar a mudança de cor. Posicione-o de forma consistente — dentro da entrada na borda final, ou à esquerda do texto auxiliar. O ícone é um sinal independente de cor de que existe um erro.

Mensagem de texto: Uma mensagem de erro explícita abaixo do campo é a indicação redundante mais importante. "Por favor, insira um endereço de e-mail válido" é inequívoco independentemente da percepção de cores. A mensagem deve aparecer imediatamente abaixo do campo com erro, não apenas em um resumo no topo ou na base do formulário.

Anotação de rótulo: Alguns design systems adicionam um texto "(Obrigatório)" ou indicador de erro ao próprio rótulo, fornecendo uma indicação adicional sem cor.

Tratamento de borda: Alterar a largura da borda (de 1px para 2px) ou adicionar um estilo de borda diferente fornece uma indicação baseada em forma que acompanha a mudança de cor.

Testando com o Simulador de Daltonismo

Use o simulador de daltonismo para visualizar os estados do seu formulário em diferentes condições de visão. Um estado de erro devidamente projetado deve ser claramente distinguível do estado de sucesso mesmo na simulação em escala de cinza. Se seus estados de erro e sucesso parecerem idênticos sem cor, eles precisam de diferenciação adicional.

O teste padrão: tire uma captura de tela do seu formulário mostrando simultaneamente um estado de erro e um estado de sucesso, depois visualize-a em escala de cinza ou através de uma simulação de protanopia. Os dois estados devem permanecer claramente distinguíveis.

Indicações de Cor em Formulários de Múltiplas Etapas

Formulários de múltiplas etapas — fluxos de checkout, sequências de integração, assistentes de cadastro — têm um desafio adicional de design de cor: o indicador de etapas. A sequência de etapas deve comunicar progresso, conclusão, posição atual e etapas futuras simultaneamente.

Estados do Indicador de Etapas

Etapas concluídas usam a cor primária da marca como um círculo preenchido ou marca de verificação — #2563EB ou qualquer cor primária da marca que serve como cor interativa. O preenchimento sinaliza "isso está feito." Um ícone de marca de verificação dentro do círculo preenchido fornece um sinal de conclusão não baseado em cor redundante.

Etapa atual é tipicamente mostrada com uma versão apenas com borda da cor primária — um círculo não preenchido com uma borda de 2px na mesma cor primária — ou com um estado preenchido enfatizado com uma sombra ou anel ao redor. A distinção visual das etapas concluídas deve ser clara: concluída é passado, atual é presente.

Etapas futuras usam um cinza neutro — #E5E7EB ou #D1D5DB — indicando que essas etapas ainda não são acessíveis ou relevantes. O número da etapa deve ser visível dentro do círculo cinza em um cinza mais escuro como #6B7280.

Linhas de conexão entre as etapas adaptam seu preenchimento para refletir o progresso: a seção da etapa 1 para a etapa 2 preenche com a cor primária da marca uma vez que a etapa 1 é concluída. A seção da etapa 2 para a etapa 3 permanece cinza até que a etapa 2 seja concluída. Isso fornece um medidor de progresso visual dentro do indicador de etapas.

Feedback de Validação Seção por Seção

Em formulários longos de múltiplas etapas, cada seção ou etapa deve exibir seu status de validação antes que o usuário passe para a próxima. Uma marca de verificação verde ou um tom de fundo verde sutil em uma seção concluída e validada fornece reforço positivo e confirma que a entrada do usuário foi aceita. Um indicador vermelho em uma seção com erros — combinado com uma contagem explícita como "3 campos precisam de atenção" — diz aos usuários onde retornar.

O princípio central: use cor para comunicar estado eficientemente de relance, mas sempre emparelhe cada sinal de cor com um indicador de texto ou ícone. Um usuário que não consegue distinguir vermelho de verde ainda deve ser capaz de navegar no formulário e entender o que requer sua atenção.

Cor da Barra de Progresso

Uma barra de progresso acima ou abaixo do indicador de etapas pode suplementar ou substituir os círculos de etapas para fluxos mais simples. A parte preenchida usa a cor primária da marca, e a parte não preenchida usa um neutro como #E5E7EB. Evite usar uma cor diferente para a barra de progresso do que para o indicador de etapas ativo — a inconsistência na cor primária da marca no mesmo elemento de UI cria confusão.

Principais Aprendizados

• Defina cores explícitas para cada estado de entrada: padrão (borda #D1D5DB), hover (borda ligeiramente mais escura), foco (borda da cor primária da marca, 2px), erro (borda #DC2626 + tom de fundo), sucesso (borda #16A34A + ícone) e desabilitado (borda #E5E7EB, texto com opacidade reduzida).
• Os anéis de foco devem ser claramente visíveis — use uma abordagem de anel duplo (halo branco + contorno colorido) para garantir visibilidade em qualquer fundo. Nunca remova os contornos de foco sem fornecer uma substituição.
• Os estados de erro devem incluir um ícone, uma mensagem de texto e uma mudança de cor — nunca apenas cor. Teste com o simulador de daltonismo para verificar que os estados de erro e sucesso permanecem distinguíveis em condições simuladas de daltonismo.
• O verde de sucesso (#16A34A) e o vermelho de erro (#DC2626) devem ambos atingir pelo menos 4,5:1 de contraste em relação aos seus fundos quando usados como texto. Verifique ambas as combinações no verificador de contraste.
• Os indicadores de etapas de formulários de múltiplas etapas precisam de pelo menos três estados visualmente distintos: concluído (cor primária da marca preenchida + ícone), atual (delineado ou enfatizado) e futuro (cinza neutro). As linhas de conexão devem ser preenchidas progressivamente com a cor primária da marca para fornecer um sinal adicional de progresso.
• As escolhas de cores para estados de formulários são algumas das decisões de acessibilidade mais consequentes em um produto — acerte-as no design system para que cada formulário herde automaticamente o comportamento acessível.