Color de los mensajes de éxito: por qué #00FF00 falla y los 8 verdes que conviene usar
El verde puro es el primer color de éxito que todo el mundo elige y el equivocado para texto. Las cuatro soluciones, los ocho colores de éxito claros y oscuros de IBM Carbon y el código para pasarle a tu desarrollador.
El color de éxito correcto para texto es un verde más oscuro, no #00FF00. El verde puro se ve fresco y aun así se lee mal sobre blanco, y en una pantalla oscura deslumbra. Aquí van las cuatro soluciones, los ocho colores de éxito para modo claro y oscuro, y el código para pasarle a tu desarrollador.
Por qué falla el verde puro
Nadie elige #00FF00 para texto de éxito. Simplemente aparece. Es el verde de la fila superior de todo selector de color, el lime del CSS antiguo, el primer verde de un archivo de diseño nuevo. Y así acaba en la línea que le dice a alguien que su pago se realizó.
El verde puro es brillante y saturado, así que parece "adelante". Pero el brillo es el problema. Es uno de los colores más claros que puede producir una pantalla, y un texto claro sobre una página clara no tiene de dónde agarrarse. Texto blanco sobre #00FF00 y texto #00FF00 sobre blanco incumplen por mucho el mínimo de WCAG para texto pequeño.
La solución no es otro tono. Es el mismo verde, oscurecido hasta que el texto tenga peso, y alejado de las superficies más estridentes.
Los verdes de abajo vienen del sistema de diseño IBM Carbon, que publica una rampa completa de verdes y usa pasos concretos para cada tarea.
Solución 1: oscurece el verde para el texto
Contraseña nueva
✓ La contraseña es segura.
✕ #00FF00 sobre blanco: difícil de leer
Contraseña nueva
✓ La contraseña es segura.
✓ #198038 sobre blanco: fácil de leer
Mismo campo, mismo mensaje, dos verdes. El correcto es el verde 60 de Carbon. Sigue siendo claramente verde, y es el que tu ojo lee, aunque el de la izquierda sea el verde "más verde".
Usa el verde oscuro para todo texto de éxito: la línea bajo un campo, una etiqueta que se vuelve verde, una marca "Verificado" en línea, el propio icono de check. Mantén #00FF00 fuera del texto por completo. Si el verde de tu marca está cerca del verde puro, resérvalo para ilustraciones y tipografía grande de display, donde el tamaño hace el trabajo que en el texto pequeño hace la oscuridad.
Solución 2: tiñe el banner y usa texto oscuro
✕ Blanco sobre #00FF00: grita y aun así se lee mal
✓ #044317 sobre #A7F0BA: fácil de leer
Una barra de neón sólido con texto blanco es lo más ruidoso de la página y aun así se lee mal, porque el blanco sobre #00FF00 tiene el mismo contraste débil que #00FF00 sobre blanco. Los colores intercambiaron sus lugares. El problema no.
Un contenedor verde suave con texto verde oscuro dice "éxito" con su color y deja que se lean las palabras. El éxito es una buena noticia, así que no debería gritar. El sistema Polaris de Shopify llega al mismo punto: su superficie de éxito #CDFED4 lleva texto verde oscuro, #014B40.
Usa el contenedor teñido para banners, toasts y cajas de alerta en línea. Reserva el relleno verde sólido para una sola cosa, el botón que confirma la acción, y pon una etiqueta oscura o blanca sobre un verde lo bastante profundo para sostenerla, como #198038.
Solución 3: suavízalo en pantallas oscuras
Estado del sitio
✓ Despliegue listo.
✕ #00FF00 en oscuro: deslumbra
Estado del sitio
✓ Despliegue listo.
✓ #42BE65 en oscuro: calmado y claro
El modo oscuro invierte el consejo. El verde puro sobre casi negro supera de sobra el contraste mínimo, así que un verificador no lo marcará. Aun así es la opción equivocada. Un verde totalmente saturado sobre gris oscuro brilla y cansa la vista, y una lista de diez es difícil de mirar.
El tema oscuro de Carbon usa un verde más suave y claro, el verde 40, #42BE65. Sobre #161616 se lee fácil y sin deslumbrar. Esta es la regla general de los temas oscuros: los colores saturados que funcionan sobre blanco se vuelven más claros y suaves sobre oscuro. Nuestro paper sobre sistemas de color para modo oscuro cubre el resto de la paleta, y la regla hermana para errores está en color de los mensajes de error.
Solución 4: nunca uses solo el color
Pago 1
✕ Solo un punto: ¿cuál se completó?
Pago 1
✓ Completado
✓ Check y palabra: sigue siendo obvio
Toma un punto verde para "Completado" y uno rojo para "Fallido". Conviértelos a escala de grises con los pesos habituales de luminancia (0,299 rojo, 0,587 verde, 0,114 azul) y quedan casi idénticos:
Punto verde #198038 en gris
Punto rojo #DA1E28 en gris
Así ve una columna de estados alguien con daltonismo rojo-verde, y más o menos cualquiera con una pantalla deslavada bajo el sol. Todo estado de éxito necesita tres cosas:
- Un color: el verde más oscuro en claro, el verde más suave en oscuro.
- Una forma: un check delante del mensaje, visible sin color.
- Palabras: qué pasó. "Pago recibido" gana a un punto verde.
Esto es WCAG 1.4.1, uso del color: el color puede apoyar un mensaje, nunca ser la única forma de darlo. Pon tu pantalla en escala de grises una vez antes de publicar una lista de estados (Ajustes del Sistema, Accesibilidad, Pantalla, Filtros de color en un Mac; el mismo filtro está en los ajustes de pantalla de accesibilidad de iOS y Android).
Los 8 colores de éxito, claro y oscuro
Toca cualquier chip para copiar su código.
| Rol | Claro | Oscuro | Úsalo para |
|---|---|---|---|
| Éxito | #198038 | #42BE65 | Texto de éxito, iconos de check, bordes de éxito |
| Sobre éxito | #FFFFFF | #161616 | Texto sobre un relleno de éxito sólido, como un botón Confirmar |
| Contenedor de éxito | #A7F0BA | #044317 | Banners, toasts y cajas de alerta en línea |
| Sobre contenedor de éxito | #044317 | #A7F0BA | Texto e iconos dentro de esos contenedores |
El tema oscuro no es una paleta nueva. Son los mismos cuatro pasos de la rampa verde con los roles intercambiados: el color del contenedor pasa a ser el del texto y viceversa.
Pásale esto a tu desarrollador
Los mismos ocho colores como propiedades personalizadas de CSS, con los valores oscuros activándose según el tema del 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: "✓ "; }
Carbon los nombra verde 60, verde 40, verde 20 y verde 80 en su rampa de verdes. Uses el sistema que uses, vale la pena robar los cuatro nombres de rol: evitan que la próxima persona busque #00FF00.
Una trampa relacionada: systemGreen de iOS, #34C759, es demasiado claro para texto sobre blanco. Apple lo usa para interruptores y rellenos, donde la forma lleva el significado. No lo copies al texto de cuerpo.
FAQ
¿De qué color deben ser los mensajes de éxito?
De un verde oscuro fácil de leer en tamaños pequeños, como #198038 sobre fondo blanco. Combínalo con un check y una palabra que diga qué pasó.
¿Es #00FF00 accesible para texto de éxito?
No. El verde puro sobre blanco incumple por mucho el contraste mínimo de WCAG para texto de cuerpo. Usa un verde más oscuro como #198038.
¿Qué verde es bueno para un banner de éxito?
Tiñe el fondo con un verde pálido como #A7F0BA y pon encima texto verde oscuro, #044317. Ese par se lee fácil y no grita.
¿De qué color debe ser el éxito en modo oscuro?
De un verde más suave y claro como #42BE65 sobre #161616. El verde puro pasa la prueba de contraste en fondos oscuros, pero deslumbra y cansa la vista.
¿Se puede mostrar el éxito solo con color?
No. Un punto verde y uno rojo se ven igual en escala de grises, y WCAG 1.4.1 exige que el color nunca sea la única señal. Añade un check y una palabra como Completado o Fallido.
Fuentes
- Sistema de diseño IBM Carbon, resumen de color: verde 60 #198038, verde 40 #42BE65, verde 20 #A7F0BA, verde 80 #044317 y gris 100 #161616.
- WCAG 2.2, 1.4.3 Contraste (mínimo) y 1.4.1 Uso del color.
- Contraste comprobado con la fórmula de luminancia relativa de WCAG (blanco sobre #00FF00 y #00FF00 sobre blanco 1,37:1; #198038 sobre blanco 5,02:1; #044317 sobre #A7F0BA 8,69:1; #42BE65 sobre #161616 7,57:1; #00FF00 sobre #161616 13,19:1). Los valores en gris usan los pesos de luminancia 0,299, 0,587, 0,114.
- Superficie de éxito de Shopify Polaris #CDFED4 con texto #014B40, de
@shopify/polaris-tokens9.4.2. - systemGreen de iOS #34C759 medido contra blanco (2,22:1); consulta las Human Interface Guidelines sobre color de Apple.
- El formulario de contraseña, el recibo a mia@brainy.ink, el despliegue de brainy-site y la lista de pagos son ejemplos inventados para esta página.
- Publicado por primera vez como carrusel en 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
