Cor da mensagem de sucesso: por que #00FF00 falha e os 8 verdes para usar no lugar
Verde puro é a primeira cor de sucesso que todo mundo escolhe, e a errada para texto. As quatro correções, as oito cores de sucesso claras e escuras do IBM Carbon e o código para entregar ao seu dev.
A cor certa de sucesso para texto é um verde mais escuro, não #00FF00. O verde puro parece fresco e ainda assim se lê mal no branco, e numa tela escura ele ofusca. Aqui estão as quatro correções, as oito cores de sucesso para usar no modo claro e no escuro, e o código para entregar ao seu dev.
Por que o verde puro falha
Ninguém escolhe #00FF00 para texto de sucesso. Ele simplesmente aparece. É o verde da primeira linha de todo seletor de cor, o lime do CSS antigo, o primeiro verde de um arquivo de design novo. Aí ele acaba na linha que avisa alguém que o pagamento foi aprovado.
O verde puro é brilhante e saturado, então parece "siga". Mas o brilho é justamente o problema. É uma das cores mais claras que uma tela consegue gerar, e texto claro em página clara não tem onde se apoiar. Texto branco sobre #00FF00 e texto #00FF00 sobre branco reprovam, de longe, no mínimo da WCAG para texto pequeno.
A solução não é outro matiz. É o mesmo verde, escurecido até o texto ganhar peso, e longe das superfícies mais gritantes.
Os verdes abaixo vêm do design system IBM Carbon, que publica uma rampa de verdes completa e usa degraus específicos para cada função.
Correção 1: escureça o verde do texto
Nova senha
✓ A senha é forte.
✕ #00FF00 no branco: difícil de ler
Nova senha
✓ A senha é forte.
✓ #198038 no branco: fácil de ler
Mesmo campo, mesma mensagem, dois verdes. O certo é o verde 60 do Carbon. Ele ainda é claramente verde, e é o que seu olho consegue ler, mesmo que o da esquerda seja o verde "mais verde".
Use o verde mais escuro em todo texto de sucesso: a linha embaixo de um campo, um rótulo que fica verde, uma tag "Verificado" inline, o próprio ícone de check. Mantenha #00FF00 fora do texto por completo. Se o verde da sua marca fica perto do verde puro, reserve-o para ilustrações e tipografia grande de destaque, onde o tamanho faz o trabalho que o tom escuro faz no texto pequeno.
Correção 2: tinja o banner e use texto escuro
✕ Branco em #00FF00: grita e ainda é difícil de ler
✓ #044317 em #A7F0BA: fácil de ler
Uma barra neon sólida com texto branco é a coisa mais berrante da página e continua difícil de ler, porque branco em #00FF00 tem o mesmo contraste fraco de #00FF00 no branco. As cores trocaram de lugar. O problema, não.
Um contêiner verde suave com texto verde escuro diz "sucesso" pela cor e deixa as palavras serem lidas. Sucesso é boa notícia, então não precisa gritar. O sistema Polaris da Shopify chega ao mesmo lugar: a superfície de sucesso #CDFED4 leva texto verde escuro, #014B40.
Use o contêiner tingido para banners, toasts e caixas de alerta inline. Reserve o preenchimento verde sólido para uma coisa só, o único botão que confirma a ação, e coloque um rótulo escuro ou branco sobre um verde profundo o bastante para sustentá-lo, como #198038.
Correção 3: suavize nas telas escuras
Status do site
✓ Deploy pronto.
✕ #00FF00 no escuro: ofusca
Status do site
✓ Deploy pronto.
✓ #42BE65 no escuro: calmo e nítido
O modo escuro inverte o conselho. Verde puro sobre quase preto passa no mínimo de contraste com folga, então um verificador não vai reclamar. Mesmo assim, é a escolha errada. Um verde totalmente saturado sobre cinza escuro brilha e cansa a vista, e uma lista com dez deles é difícil de olhar.
O tema escuro do Carbon usa um verde mais suave e claro, o verde 40, #42BE65. Sobre #161616 ele é fácil de ler, sem ofuscar. Essa é a regra geral dos temas escuros: cores saturadas que funcionam no branco ficam mais claras e suaves no escuro. Nosso paper sobre sistemas de cores para modo escuro cobre o resto da paleta, e a regra irmã para erros está em cor de mensagem de erro.
Correção 4: nunca use só a cor
Pagamento 1
✕ Só um ponto: qual deles foi aprovado?
Pagamento 1
✓ Concluído
✓ Check e palavra: continua óbvio
Pegue um ponto verde para "Concluído" e um ponto vermelho para "Falhou". Converta para escala de cinza com os pesos usuais de luminância (0,299 vermelho, 0,587 verde, 0,114 azul) e eles ficam quase idênticos:
Ponto verde #198038 em cinza
Ponto vermelho #DA1E28 em cinza
É assim que uma coluna de status aparece para quem tem daltonismo vermelho-verde, e mais ou menos para qualquer pessoa com a tela desbotada no sol. Todo estado de sucesso precisa de três coisas:
- Uma cor: o verde mais escuro no claro, o verde mais suave no escuro.
- Uma forma: um check na frente da mensagem, visível sem cor.
- Palavras: o que aconteceu. "Pagamento recebido" vence um ponto verde.
Isso é a WCAG 1.4.1, uso de cor: a cor pode apoiar uma mensagem, nunca ser a única forma de transmiti-la. Coloque sua tela em escala de cinza uma vez antes de publicar uma lista de status (Ajustes do Sistema, Acessibilidade, Vídeo, Filtros de Cor no Mac; o mesmo filtro existe nas configurações de acessibilidade de tela no iOS e no Android).
As 8 cores de sucesso, claro e escuro
Toque em qualquer chip para copiar o código.
| Função | Claro | Escuro | Use para |
|---|---|---|---|
| Sucesso | #198038 | #42BE65 | Texto de sucesso, ícones de check, bordas de sucesso |
| Sobre sucesso | #FFFFFF | #161616 | Texto sobre preenchimento sólido de sucesso, como um botão Confirmar |
| Contêiner de sucesso | #A7F0BA | #044317 | Banners, toasts e caixas de alerta inline |
| Sobre contêiner de sucesso | #044317 | #A7F0BA | Texto e ícones dentro desses contêineres |
O tema escuro não é uma paleta nova. São os mesmos quatro degraus da rampa de verdes com as funções trocadas: a cor do contêiner vira a cor do texto e vice-versa.
Entregue isto ao seu dev
As mesmas oito cores como propriedades customizadas de CSS, com os valores escuros ativados pelo tema do sistema:
:root {
--color-success: #198038;
--color-on-success: #FFFFFF;
--color-success-container: #A7F0BA;
--color-on-success-container: #044317;
}
@media (prefers-color-scheme: dark) {
:root {
--color-success: #42BE65;
--color-on-success: #161616;
--color-success-container: #044317;
--color-on-success-container: #A7F0BA;
}
}
.field--valid { border-color: var(--color-success); }
.field__hint--valid { color: var(--color-success); }
.alert--success {
background: var(--color-success-container);
color: var(--color-on-success-container);
}
.alert--success::before { content: "✓ "; }
O Carbon nomeia esses tons como verde 60, verde 40, verde 20 e verde 80 na sua rampa de verdes. Seja qual for o sistema que você use, vale roubar os quatro nomes de função: eles impedem que a próxima pessoa estenda a mão para #00FF00.
Uma armadilha parecida: o systemGreen do iOS, #34C759, é claro demais para texto sobre branco. A Apple o usa em switches e preenchimentos, onde a forma carrega o significado. Não copie para o texto corrido.
FAQ
Que cor devem ter as mensagens de sucesso?
Um verde escuro e fácil de ler em tamanhos pequenos, como #198038 sobre fundo branco. Combine com um check e uma palavra que diga o que aconteceu.
#00FF00 é acessível para texto de sucesso?
Não. Verde puro sobre branco reprova, de longe, no mínimo de contraste da WCAG para texto corrido. Use um verde mais escuro, como #198038.
Qual é um bom verde para um banner de sucesso?
Tinja o fundo com um verde pálido como #A7F0BA e coloque texto verde escuro, #044317, por cima. Esse par é fácil de ler e não grita.
Que cor o sucesso deve ter no modo escuro?
Um verde mais suave e claro, como #42BE65 sobre #161616. O verde puro passa na checagem de contraste em fundos escuros, mas ofusca e cansa a vista.
Dá para mostrar sucesso só com cor?
Não. Um ponto verde e um vermelho ficam iguais em escala de cinza, e a WCAG 1.4.1 exige que a cor nunca seja o único sinal. Adicione um check e uma palavra como Concluído ou Falhou.
Fontes
- Design system IBM Carbon, visão geral de cores: verde 60 #198038, verde 40 #42BE65, verde 20 #A7F0BA, verde 80 #044317 e cinza 100 #161616.
- WCAG 2.2, 1.4.3 Contrast (Minimum) e 1.4.1 Use of Color.
- Contraste verificado com a fórmula de luminância relativa da WCAG (branco em #00FF00 e #00FF00 em branco 1,37:1; #198038 em branco 5,02:1; #044317 em #A7F0BA 8,69:1; #42BE65 em #161616 7,57:1; #00FF00 em #161616 13,19:1). Os valores em escala de cinza usam os pesos de luminância 0,299, 0,587, 0,114.
- Superfície de sucesso #CDFED4 da Shopify Polaris com texto #014B40, de
@shopify/polaris-tokens9.4.2. systemGreen#34C759 do iOS medido contra o branco (2,22:1); veja as Human Interface Guidelines de cor da Apple.- O formulário de senha, o recibo para mia@brainy.ink, o deploy do brainy-site e a lista de pagamentos são exemplos inventados para esta página.
- Publicado originalmente como carrossel no UX Brainy.
Want success, error and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
