Color de fondo del modo claro: por qué #FFFFFF no basta y 8 colores para usar
Una pantalla toda blanca no tiene dónde poner profundidad. El color de fondo del modo claro que conviene usar (#F2F2F7 detrás de tarjetas blancas), los colores de texto más suaves, el acento más profundo y los 8 códigos para pasarle a tu desarrollador.
El mejor color de fondo para el modo claro no es #FFFFFF. Pon la página sobre un gris suave como #F2F2F7 y reserva el blanco para las tarjetas que se apoyan encima, para que las superficies tengan de dónde elevarse. Aquí va por qué falla una pantalla toda blanca, las tres soluciones y los ocho colores para pasarle a tu desarrollador.
Por qué una pantalla toda blanca se ve plana
La mayoría de los diseñadores empieza el modo claro pintándolo todo de blanco. Es el relleno por defecto en cualquier herramienta de diseño y el fondo por defecto en cualquier navegador, así que parece neutral. No lo es. Es la única decisión que te quita la capacidad de mostrar profundidad.
Una tarjeta necesita verse distinta de la página donde está. Cuando ambas son #FFFFFF, lo único que queda para separarlas es un borde o una sombra, así que esos dos detalles cargan con todo el trabajo. Añade unas cuantas tarjetas más y la pantalla se convierte en una cuadrícula de contornos.
El modo oscuro ya resolvió esto. Allí, una superficie más clara significa una más alta, así que cada capa es un paso más clara que la de abajo. Nuestro paper sobre sistemas de color para modo oscuro cubre esa rampa, y diseño de modo oscuro cubre el resto de la paleta. El modo claro no tiene un paso más claro por encima del blanco, así que necesita otro movimiento: bajar el suelo.
Solución 1: empieza la página en #F2F2F7
Página y tarjetas ambas #FFFFFF
Página #F2F2F7, tarjetas #FFFFFF
#F2F2F7 es el gris que iOS pone detrás de sus listas agrupadas. Es el system gray 6 de Apple en modo claro, y la propia guía de Apple recomienda usar los colores de fondo agrupados para las vistas de tabla agrupadas. Ajustes es el ejemplo clásico: una página gris pálido, filas blancas.
Ese único cambio te da un suelo y un techo. La página es el suelo, las tarjetas y hojas son el techo, y el espacio entre ambos se ve sin dibujar una sola línea.
Dónde aplicarlo:
- El fondo de la página, detrás de toda pantalla que tenga tarjetas, listas o secciones.
- Listas agrupadas y pantallas de ajustes, donde las filas son blancas y los huecos grises.
- Inputs dentro de una tarjeta blanca, que pueden usar el gris de la página para leerse como hundidos.
Si tu pantalla es un artículo largo todo blanco sin tarjetas, el blanco está bien. La regla es para interfaces hechas de superficies.
Solución 2: deja que las sombras levanten
En modo oscuro, la elevación es un color más claro. En modo claro, las superficies siguen blancas y es la sombra la que crece. Una tarjeta en reposo recibe una sombra pequeña y suave; un menú o un diálogo que flota sobre ella recibe una más grande y más difusa.
Dos hábitos hacen que se vea bien:
- Tiñe la sombra con tu tinta, no con negro puro. Una sombra del color de tu texto (el post usaba #1B1530, un violeta profundo) parece parte de la interfaz. El negro puro parece una mancha.
- Haz que más grande signifique más alto. Usa una escala corta de cuatro, de pequeña a grande, y asigna cada nivel a una función: tarjeta, tarjeta elevada, menú, diálogo. Y nunca inventes una quinta.
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
La página gris es lo que hace que esto funcione. En una página blanca una sombra suave es casi invisible, así que la gente compensa con una sombra más oscura o un borde. Sobre #F2F2F7 basta una sombra ligera.
Solución 3: suaviza tu negro y luego profundiza tu acento
El texto #000000 puro sobre una página blanca o casi blanca es más duro de lo necesario, y hace que todos los demás colores parezcan débiles a su lado. Material 3 fija su texto claro un paso más suave.
Texto
Texto secundario
Deshabilitado, 38 por ciento
- #1D1B20 para el texto. Es el color on-surface de Material 3. Es casi negro con un toque de violeta, que queda bien tanto sobre blanco como sobre gris.
- #49454F para el texto secundario como pies de foto, líneas de ayuda y marcas de tiempo. Sigue leyéndose con facilidad y es claramente más discreto que el texto principal.
- La misma tinta al 38 por ciento para etiquetas e iconos deshabilitados. Sobre blanco eso da #A9A8AA, y Material usa exactamente esa opacidad. El texto deshabilitado es el único lugar donde el bajo contraste es el objetivo, y WCAG lo exime.
El acento necesita la corrección opuesta. Un color de marca brillante y claro que se veía genial en una pantalla oscura desaparece sobre blanco.
Acento claro sobre blanco
Acento profundo sobre blanco
#BB86FC es el morado base de Material para temas oscuros. Sobre blanco casi se esfuma, lo cual es un problema para cualquier cosa que deba leerse como un botón o un enlace.
#6200EE es el morado base de Material para temas claros, la misma familia, lo bastante profundo para defenderse solo. Cuando construyas un tema claro, no reutilices el acento del tema oscuro. Elige el paso más profundo del mismo tono.
Los 8 colores del modo claro
Toca cualquier chip para copiar su código.
| Rol | Valor | Úsalo para |
|---|---|---|
| Base | #F2F2F7 | La página, detrás de tarjetas y listas agrupadas |
| Tarjetas | #FFFFFF | Tarjetas, hojas, menús, filas |
| Divisores | #E5E5EA | Líneas entre filas. No para bordes de inputs |
| Texto | #1D1B20 | Títulos y cuerpo |
| Secundario | #49454F | Pies de foto, texto de ayuda, marcas de tiempo |
| Deshabilitado | #A9A8AA | Etiquetas e iconos deshabilitados (texto al 38 por ciento) |
| Primario | #6200EE | Botones, enlaces, estados seleccionados |
| Error | #B00020 | Texto, bordes e iconos de error |
#E5E5EA es el system gray 5 de iOS, y sirve para divisores porque un divisor solo tiene que notarse, no leerse. El borde de un campo necesita más que eso. Nuestro paper sobre placeholders y etiquetas te da el color de borde que conviene usar.
Pásale esto a tu desarrollador
Los mismos ocho colores como propiedades personalizadas de CSS:
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
Si también publicas un tema oscuro, dale a cada uno de estos nombres un segundo valor bajo @media (prefers-color-scheme: dark), como en el mapa de tokens del modo oscuro. Los nombres siguen igual y solo cambian los valores, que es lo que evita que el modo claro se convierta en "modo oscuro, invertido".
Los números detrás de "se ve bien"
El post dice "se ve bien" y "cuesta ver". Para quien tenga que defender la decisión en una revisión, aquí van los números (ratios de contraste WCAG 2, calculados sobre blanco):
| Par | Contraste | Veredicto |
|---|---|---|
| Texto #1D1B20 sobre #FFFFFF | 17.1 a 1 | Muy por encima del mínimo de 4.5 a 1 |
| Texto #49454F sobre #FFFFFF | 9.3 a 1 | Cómodo para texto secundario |
| #A9A8AA deshabilitado sobre #FFFFFF | 2.4 a 1 | Exento, lo deshabilitado debe ser discreto |
| #BB86FC sobre #FFFFFF | 2.65 a 1 | Por debajo del 3 a 1 que necesita la forma de un botón |
| #6200EE sobre #FFFFFF | 7.63 a 1 | Se ve con facilidad |
Un dato más que vale la pena conocer: la superficie clara de Material 3 tampoco es #FFFFFF. Es #FEF7FF, un blanco apenas teñido. Ni siquiera el sistema de diseño que la mayoría de equipos trata como el estándar pinta la pantalla de blanco puro.
FAQ
¿Cuál es el mejor color de fondo para el modo claro?
Un gris claro suave como #F2F2F7 para la página, con #FFFFFF para las tarjetas encima. El gris da a las superficies blancas algo de lo que destacar, así que necesitas menos bordes y sombras.
¿Es #FFFFFF un mal color de fondo?
No siempre, pero una pantalla toda blanca no tiene forma de mostrar profundidad. Las tarjetas se funden con la página y los bordes y sombras acaban haciendo todo el trabajo. El blanco funciona mejor como color de las superficies, no de toda la pantalla.
¿Qué es #F2F2F7?
Es el system gray 6 de iOS en modo claro, el gris que Apple usa detrás de listas agrupadas como la app Ajustes. Apple recomienda los colores de fondo agrupados para las vistas de tabla agrupadas.
¿Qué color de texto debo usar sobre fondo blanco?
Un casi negro suave como #1D1B20 para el texto y #49454F para el texto secundario. Ambos son colores de Material 3 y ambos se leen bien sobre blanco y sobre #F2F2F7.
¿Cómo se muestra la elevación en modo claro?
Con sombras. En modo oscuro una superficie más clara significa una más alta, pero el modo claro no tiene un paso más claro por encima del blanco, así que las superficies siguen blancas y la sombra crece con la altura.
¿Debe cambiar el color de acento entre modo claro y oscuro?
Sí. Un acento claro como #BB86FC funciona en pantallas oscuras pero casi desaparece sobre blanco. Usa un paso más profundo del mismo tono, como #6200EE, en superficies claras.
Fuentes
- Apple Human Interface Guidelines, Color: #F2F2F7 es systemGray6 en modo claro (R242 G242 B247), y los colores de fondo agrupados están pensados para vistas de tabla agrupadas.
- Roles de color de Material 3, leídos de ColorLightTokens y PaletteTokens de androidx Compose: on surface #1D1B20 (Neutral10), on surface variant #49454F (NeutralVariant30), surface claro #FEF7FF. Consulta los roles de color de Material.
- Opacidad de 0.38 para etiquetas e iconos deshabilitados, de los tokens de componentes de Material 3. #1D1B20 al 38 por ciento sobre #FFFFFF es #A9A8AA.
- #BB86FC y #6200EE son los primarios base de Material para oscuro y claro. #B00020 es el error base claro de Material. #E5E5EA es el system gray 5 de iOS en modo claro.
- WCAG 2.2, 1.4.3 Contrast (Minimum) y 1.4.11 Non-text Contrast. Ratios calculados con la fórmula de luminancia relativa de WCAG. El texto deshabilitado está exento del mínimo.
- La tinta de sombra #1B1530 y los cuatro niveles de sombra son recomendación nuestra, no un valor de plataforma.
- Publicado originalmente como carrusel en UX Brainy.
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
