Cor de mensagem de erro: por que #FF0000 falha e os 8 vermelhos para usar no lugar
Vermelho puro é a primeira cor de erro que todo mundo escolhe e a errada para texto. As quatro correções, as oito cores de erro claras e escuras e o código para entregar ao seu dev.
A cor certa para texto de erro é um vermelho mais escuro, não #FF0000. O vermelho puro parece gritante e mesmo assim lê mal nos tamanhos pequenos das mensagens de erro, além de vibrar em telas escuras. Aqui estão as quatro correções, as oito cores para modo claro e escuro e o código para entregar ao seu dev.
Por que o vermelho puro falha
Ninguém escolhe #FF0000 para texto de erro. Ele simplesmente aparece. É o vermelho da primeira linha de todo seletor de cores, a palavra-chave red no CSS, a primeira amostra de um arquivo de design novo. Então ele vai parar na única linha da tela que precisa ser lida certo de primeira.
O vermelho puro é brilhante e saturado, então parece forte, mas não é escuro. Sua luminosidade é próxima de um cinza médio. Coloque pequeno sobre branco e as letras perdem o contorno.
A solução não é outro matiz. É o mesmo vermelho, empurrado para o escuro até o texto ganhar peso.
Correção 1: escureça o vermelho do texto
Digite um endereço de e-mail válido.
✕ #FF0000 no branco: difícil de ler
Digite um endereço de e-mail válido.
✓ #B3261E no branco: fácil de ler
Mesmo campo, mesma mensagem, dois vermelhos. O certo é a cor de erro do tema claro do Material 3, e é nele que o olho pousa, mesmo que o da esquerda seja o vermelho "mais vermelho".
Use o vermelho mais escuro em todo texto de erro: a mensagem sob um campo, um rótulo que fica vermelho, uma etiqueta "Obrigatório". Mantenha #FF0000 fora do texto por completo. Se o vermelho da sua marca é próximo do puro, reserve-o para ilustrações e tipografia grande de destaque, onde o tamanho faz o trabalho que a escuridão faz no texto pequeno.
Correção 2: tinja o banner, não o pinte
✕ Branco sobre #FF0000: grita e ainda é difícil de ler
✓ #410E0B sobre #F6CBC8: fácil de ler
Uma barra vermelha sólida com texto branco é a coisa mais barulhenta da página e continua difícil de ler, porque branco sobre #FF0000 tem o mesmo contraste fraco que #FF0000 sobre branco. As cores trocaram de lugar, o problema não.
Um contêiner vermelho suave com texto vermelho escuro diz "erro" pela cor e deixa as palavras serem lidas. A urgência vem do ícone e da mensagem. O contêiner do próprio Material é um #F9DEDC mais pálido; usamos um passo mais profundo, #F6CBC8, porque o rosa mais pálido desbota ao lado de interfaces escuras.
Correção 3: suavize em telas escuras
Digite um endereço de e-mail válido.
✕ #FF0000 no escuro: vibra
Digite um endereço de e-mail válido.
✓ #F2B8B5 no escuro: calmo e claro
O modo escuro inverte o conselho. Vermelho puro sobre quase preto passa no contraste mínimo, então um verificador não vai acusar, mas um vermelho saturado sobre cinza escuro vibra nas bordas. O tema escuro do Material usa um vermelho de erro claro e suave, #F2B8B5, que mantém com o fundo escuro a mesma relação que #B3261E tem com o branco.
Esta é a regra geral para temas escuros: cores saturadas que funcionam no branco ficam mais claras e suaves no escuro. Nosso paper sobre design de modo escuro cobre o resto da paleta.
Correção 4: confira em escala de cinza
✕ Só a borda: qual campo está errado?
Digite um endereço de e-mail válido.
✓ Ícone e palavras: ainda óbvio
O vermelho puro e um cinza médio têm quase a mesma luminosidade, então um campo cujo único sinal de erro é uma borda vermelha parece, em escala de cinza, igual a qualquer outro campo. Ponha sua tela em escala de cinza uma vez antes de publicar um formulário (Ajustes do Sistema, Acessibilidade, Tela, Filtros de Cor no Mac; o mesmo filtro fica nas configurações de acessibilidade de tela no iOS e no Android).
Todo estado de erro precisa de três coisas:
- Uma cor: o vermelho mais escuro no claro, o mais suave no escuro.
- Uma forma: um ícone antes da mensagem, visível sem cor.
- Palavras: o que deu errado e o que fazer. "Digite um e-mail válido" vence "Entrada inválida".
Isso é a WCAG 1.4.1, uso de cor: a cor pode apoiar uma mensagem, nunca ser a única forma de transmiti-la.
As 8 cores de erro, claro e escuro
Toque em qualquer chip para copiar o código.
| Papel | Claro | Escuro | Use para |
|---|---|---|---|
| Erro | #B3261E | #F2B8B5 | Texto de erro, bordas de erro, o ícone de erro |
| Sobre erro | #FFFFFF | #601410 | Texto sobre preenchimento sólido de erro, como um botão Excluir |
| Contêiner de erro | #F6CBC8 | #8C1D18 | Banners, toasts e caixas de alerta inline |
| Sobre contêiner de erro | #410E0B | #F9DEDC | Texto e ícones dentro desses contêineres |
Entregue isto ao seu dev
As mesmas oito cores como propriedades personalizadas de CSS, com os valores escuros ativados pelo tema do sistema:
:root {
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F6CBC8;
--color-on-error-container: #410E0B;
}
@media (prefers-color-scheme: dark) {
:root {
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
}
}
.field--invalid { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.alert--error {
background: var(--color-error-container);
color: var(--color-on-error-container);
}
No Material, esses papéis já existem como colorScheme.error, onError, errorContainer e onErrorContainer; a única mudança em relação ao padrão é o contêiner claro mais profundo. Em qualquer outro lugar, vale roubar os quatro nomes: eles impedem que a próxima pessoa alcance o #FF0000.
Os números de contraste
A WCAG 2 pede pelo menos 4,5 para 1 em texto de corpo.
| Par | Contraste |
|---|---|
| Texto #FF0000 no branco | 4,0 para 1, abaixo do mínimo |
| Texto #B3261E no branco | 6,5 para 1 |
| Texto branco em #FF0000 | 4,0 para 1, abaixo do mínimo |
| Texto #410E0B em #F6CBC8 | 11,1 para 1 |
| Texto #F2B8B5 no escuro #141218 | 10,9 para 1 |
| Texto #FF0000 no escuro #141218 | 4,7 para 1, passa e ainda vibra |
A última linha é o motivo de um verificador não bastar. Vermelho puro no escuro tecnicamente passa e continua sendo a escolha errada.
FAQ
Que cor devem ter as mensagens de erro?
Um vermelho escuro, fácil de ler em tamanhos pequenos, como #B3261E em fundo branco. Combine com um ícone e uma mensagem que diga como resolver o problema.
#FF0000 é acessível para texto de erro?
Não. Vermelho puro no branco tem contraste de cerca de 4,0 para 1, abaixo dos 4,5 para 1 que a WCAG pede para texto de corpo, e mensagens de erro costumam ser pequenas.
Qual é a cor de erro no Material Design 3?
O papel de erro do tema claro é #B3261E com #FFFFFF por cima, e o contêiner de erro é #F9DEDC com texto #410E0B. No tema escuro, o papel de erro é #F2B8B5 e o contêiner é #8C1D18.
Que cor os erros devem ter no modo escuro?
Um vermelho mais claro e suave, como #F2B8B5. O vermelho puro passa na checagem de contraste em fundos escuros, mas vibra e é desconfortável de ler.
Um erro pode ser mostrado só com cor?
Não. Cerca de um em cada doze homens tem alguma forma de daltonismo, e a WCAG 1.4.1 exige que a cor nunca seja o único sinal. Adicione um ícone e palavras.
Fontes
- Papéis de erro base do Material Design 3, claro e escuro, a partir dos papéis de cor do Material e dos tokens de cor do androidx Compose.
- WCAG 2.2, 1.4.3 Contraste (Mínimo) e 1.4.1 Uso de Cor.
- Razões de contraste calculadas com a fórmula de luminância relativa da WCAG. O vermelho puro e o cinza #808080 têm luminância relativa de 0,213 e 0,216.
- Prevalência de daltonismo do National Eye Institute.
- Publicado originalmente como carrossel no UX Brainy.
Want error states, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
