Color de los mensajes de error: por qué falla #FF0000 y los 8 rojos que debes usar
El rojo puro es el primer color de error que todo el mundo elige y el equivocado para texto. Las cuatro correcciones, los ocho colores de error en claro y oscuro, y el código para pasarle a tu desarrollador.
El color correcto para el texto de error es un rojo más oscuro, no #FF0000. El rojo puro se ve estridente y aun así se lee mal en los tamaños pequeños que usan los mensajes de error, y vibra en pantallas oscuras. Aquí tienes las cuatro correcciones, los ocho colores para modo claro y oscuro, y el código para pasarle a tu desarrollador.
Por qué falla el rojo puro
Nadie elige #FF0000 para el texto de error. Simplemente aparece. Es el rojo de la fila superior de todo selector de color, la palabra clave red en CSS, la primera muestra en un archivo de diseño nuevo. Así que acaba en la única línea de la pantalla que tiene que leerse bien a la primera.
El rojo puro es brillante y saturado, así que parece fuerte, pero no es oscuro. Su luminosidad se acerca a la de un gris medio. Ponlo pequeño sobre blanco y las letras pierden sus bordes.
La solución no es otro tono. Es el mismo rojo, oscurecido hasta que el texto tenga peso.
Corrección 1: oscurece el rojo para el texto
Correo
Introduce un correo electrónico válido.
✕ #FF0000 sobre blanco: difícil de leer
Correo
Introduce un correo electrónico válido.
✓ #B3261E sobre blanco: fácil de leer
Mismo campo, mismo mensaje, dos rojos. El correcto es el color de error del tema claro de Material 3, y es el que capta tu mirada, aunque el de la izquierda sea el rojo "más rojo".
Usa el rojo oscuro para todo texto de error: el mensaje bajo un campo, una etiqueta que se vuelve roja, un "Obligatorio" en línea. Mantén #FF0000 fuera del texto por completo. Si el rojo de tu marca se parece al rojo puro, resérvalo para ilustraciones y tipografía grande de display, donde el tamaño hace el trabajo que la oscuridad hace en el texto pequeño.
Corrección 2: tiñe el banner, no lo pintes
✕ Blanco sobre #FF0000: grita y aun así se lee mal
✓ #410E0B sobre #F6CBC8: fácil de leer
Una barra roja sólida con texto blanco es lo más estridente de la página y aun así es difícil de leer, porque el blanco sobre #FF0000 tiene el mismo contraste débil que #FF0000 sobre blanco. Los colores cambiaron de lugar, el problema no.
Un contenedor rojo suave con texto rojo oscuro dice "error" con su color y deja que las palabras se lean. La urgencia viene del icono y del mensaje. El contenedor de Material es un #F9DEDC más pálido; nosotros usamos un paso más profundo, #F6CBC8, porque el rosa más pálido se desvanece junto a una interfaz oscura.
Corrección 3: suavízalo en pantallas oscuras
Correo
Introduce un correo electrónico válido.
✕ #FF0000 sobre oscuro: vibra
Correo
Introduce un correo electrónico válido.
✓ #F2B8B5 sobre oscuro: calmado y claro
El modo oscuro invierte el consejo. El rojo puro sobre casi negro supera el mínimo de contraste, así que un verificador no lo marcará, pero un rojo saturado sobre gris oscuro vibra en sus bordes. El tema oscuro de Material usa un rojo de error claro y suave, #F2B8B5, que mantiene con el fondo oscuro la misma relación que #B3261E tiene con el blanco.
Esta es la regla general para temas oscuros: los colores saturados que funcionan sobre blanco se vuelven más claros y suaves sobre oscuro. Nuestro artículo sobre diseño de modo oscuro cubre el resto de la paleta.
Corrección 4: compruébalo en escala de grises
Correo
✕ Solo borde: ¿cuál campo está mal?
Correo
Introduce un correo electrónico válido.
✓ Icono y palabras: sigue siendo evidente
El rojo puro y un gris medio tienen casi la misma luminosidad, así que un campo cuya única señal de error es un borde rojo se ve, en escala de grises, como cualquier otro campo. Pon tu pantalla en escala de grises una vez antes de lanzar un formulario (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).
Todo estado de error necesita tres cosas:
- Un color: el rojo más oscuro sobre claro, el rojo más suave sobre oscuro.
- Una forma: un icono delante del mensaje, visible sin color.
- Palabras: qué salió mal y qué hacer. "Introduce un correo válido" es mejor que "Entrada no válida".
Esto es WCAG 1.4.1, uso del color: el color puede apoyar un mensaje, nunca ser la única forma de darlo.
Los 8 colores de error, claro y oscuro
Toca cualquier chip para copiar su código.
| Rol | Claro | Oscuro | Úsalo para |
|---|---|---|---|
| Error | #B3261E | #F2B8B5 | Texto de error, bordes de error, el icono de error |
| Sobre error | #FFFFFF | #601410 | Texto sobre un relleno de error sólido, como un botón Eliminar |
| Contenedor de error | #F6CBC8 | #8C1D18 | Banners, toasts y cuadros de alerta en línea |
| Sobre contenedor de error | #410E0B | #F9DEDC | Texto e iconos dentro de esos contenedores |
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-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);
}
En Material, estos roles ya existen como colorScheme.error, onError, errorContainer y onErrorContainer; el único cambio respecto al valor por defecto es el contenedor claro más profundo. En cualquier otro lugar, vale la pena robarse los cuatro nombres: evitan que la siguiente persona busque #FF0000.
Los números de contraste
WCAG 2 pide al menos 4.5 a 1 para texto de cuerpo.
| Par | Contraste |
|---|---|
| Texto #FF0000 sobre blanco | 4.0 a 1, bajo el mínimo |
| Texto #B3261E sobre blanco | 6.5 a 1 |
| Texto blanco sobre #FF0000 | 4.0 a 1, bajo el mínimo |
| Texto #410E0B sobre #F6CBC8 | 11.1 a 1 |
| Texto #F2B8B5 sobre oscuro #141218 | 10.9 a 1 |
| Texto #FF0000 sobre oscuro #141218 | 4.7 a 1, pasa y aun así vibra |
La última fila es la razón por la que un verificador no basta. El rojo puro sobre oscuro técnicamente pasa y sigue siendo la elección equivocada.
FAQ
¿De qué color deben ser los mensajes de error?
Un rojo oscuro que se lea fácil en tamaños pequeños, como #B3261E sobre fondo blanco. Combínalo con un icono y un mensaje que diga cómo solucionar el problema.
¿Es accesible #FF0000 para texto de error?
No. El rojo puro sobre blanco tiene un contraste de alrededor de 4.0 a 1, por debajo del 4.5 a 1 que WCAG pide para texto de cuerpo, y los mensajes de error suelen ser pequeños.
¿Cuál es el color de error en Material Design 3?
El rol de error del tema claro es #B3261E con #FFFFFF encima; el contenedor de error es #F9DEDC con texto #410E0B. En el tema oscuro el rol de error es #F2B8B5 y el contenedor es #8C1D18.
¿De qué color deben ser los errores en modo oscuro?
Un rojo más claro y suave, como #F2B8B5. El rojo puro pasa la prueba de contraste sobre fondos oscuros, pero vibra y es incómodo de leer.
¿Se puede mostrar un error solo con color?
No. Alrededor de uno de cada doce hombres tiene alguna forma de daltonismo, y WCAG 1.4.1 exige que el color nunca sea la única señal. Añade un icono y palabras.
Fuentes
- Roles de error base de Material Design 3, claro y oscuro, de los roles de color de Material y los tokens de color de androidx Compose.
- WCAG 2.2, 1.4.3 Contraste (mínimo) y 1.4.1 Uso del color.
- Ratios de contraste calculados con la fórmula de luminancia relativa de WCAG. El rojo puro y el gris #808080 tienen una luminancia relativa de 0.213 y 0.216.
- Prevalencia del daltonismo del National Eye Institute.
- Publicado por primera vez como carrusel en 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
