Modo oscuro bien diseñado: colores, elevación y contraste

Cuando diseñamos el primer modo oscuro para un cliente, hace ya unos años, cometimos el error clásico: invertir la paleta. Fondo negro, texto blanco, el verde de la marca tal cual. En la pantalla del estudio parecía elegante. En el móvil de la clienta, a las once de la noche, el texto vibraba, el verde chillaba y las tarjetas se fundían con el fondo porque sus sombras ya no se veían. Aprendimos rápido que un modo oscuro no es el modo claro con la luz apagada. Es un segundo tema, con sus propias reglas.

Hoy el modo oscuro está en todos los sistemas operativos, en la mayoría de apps y en cada vez más webs. Mucha gente lo tiene activado todo el día; otra lo usa solo de noche. Para quien diseña, eso significa que cada color de la interfaz tiene que funcionar en dos mundos distintos. En la guía sobre color en diseño web y contraste vimos cómo organizar una paleta de interfaz. Aquí nos centramos en el tema oscuro: qué fondos elegir, cómo se construye la profundidad, cómo se adapta la marca y cómo se programa.

01Por qué el modo oscuro tiene sus propias reglas

En un tema claro, la luz viene del fondo: la pantalla es blanca y los elementos se dibujan encima con tinta oscura. La profundidad se expresa con sombras, igual que en el papel. En un tema oscuro la lógica cambia: el fondo es la oscuridad y los elementos emiten luz. Tres consecuencias prácticas:

• →Las sombras apenas se ven sobre fondos oscuros, así que la profundidad tiene que construirse de otra manera.
• →Los colores saturados vibran. Un rojo o un azul intensos sobre un fondo casi negro parecen temblar en los bordes, sobre todo en textos.
• →El contraste máximo cansa. Texto blanco puro sobre negro puro tiene un contraste de 21:1. Cumple de sobra cualquier norma, pero en lectura prolongada produce un efecto de halo (halación) que muchas personas encuentran incómodo.

Por eso los grandes sistemas de diseño tratan el tema oscuro como un tema propio. Material Design de Google publicó unas directrices muy detalladas, y las Human Interface Guidelines de Apple definen colores específicos para cada nivel de superficie en oscuro.

Clave: en el modo oscuro, la profundidad se expresa con luz. Lo que está más cerca de quien mira es un poco más claro.

02Los fondos: grises con matiz, no negro puro

La base de un buen modo oscuro es su fondo. Material Design propone #121212 como superficie base: un gris muy oscuro que reduce la halación y deja margen para aclarar las superficies elevadas. Apple, en iOS, usa negro puro como fondo base del sistema y grises oscuros para los niveles superiores, aprovechando las pantallas OLED.

En nuestros proyectos solemos partir de un gris muy oscuro con un ligero matiz de la marca. Si la marca es un verde, el fondo tiene un toque verdoso apenas perceptible; si es un azul, un toque azulado. Esto hace que el tema oscuro se sienta de la misma familia que el claro, en lugar de un gris genérico.

Una escala de superficies

Igual que en claro hay blancos y grises claros, en oscuro conviene una escala de cinco o seis superficies, de la más profunda a la más elevada:

Material Design lo describe como una capa blanca semitransparente que se superpone a la superficie: cuanto más elevado el elemento, mayor la opacidad de esa capa (alrededor de un 5 % en las elevaciones bajas y hasta un 16 % en las más altas). Puedes usar ese método o definir directamente los grises de la escala, que es más sencillo de mantener.

03La elevación sin sombras

Como las sombras se pierden sobre fondos oscuros, la elevación se comunica con tres recursos combinados:

1. 01Superficies más claras para lo que está más arriba, según la escala anterior.
2. 02Bordes sutiles de 1 px, un poco más claros que la superficie, para delimitar tarjetas y campos.
3. 03Sombras más intensas y amplias solo en los elementos que flotan de verdad (modales, menús), donde todavía ayudan a separar del fondo.

Un detalle que da mucha calidad: en los modales, una capa de oscurecimiento detrás (scrim) del 50 al 70 % de opacidad hace que el diálogo destaque sin necesidad de sombras exageradas.

04Texto y contraste: cómodo y accesible

El objetivo en oscuro es un contraste suficiente sin llegar al extremo. Las referencias de WCAG 2.2 son las mismas que en claro: 4,5:1 para texto normal, 3:1 para texto grande y para los componentes y gráficos que hay que distinguir. Lo que cambia es el techo: evitamos el 21:1 del blanco puro sobre negro.

Material Design propone tres niveles de énfasis para el texto en oscuro, expresados como opacidades del blanco: 87 % para el texto principal, 60 % para el secundario y 38 % para el desactivado. En la práctica, nosotros solemos definirlos como colores sólidos (más predecibles en el código):

• →Texto principal: un blanco roto, en torno a #E8E8E8 o #EDEDED.
• →Texto secundario: un gris claro, en torno a #A8A8A8, comprobando que supera 4,5:1 sobre todas las superficies donde aparece.
• →Texto desactivado: más tenue, sabiendo que WCAG no exige contraste en elementos desactivados, pero que debe seguir leyéndose.

Otro ajuste fino: el texto claro sobre fondo oscuro parece algo más grueso que el oscuro sobre claro. Si la tipografía es variable, bajar ligeramente el peso en oscuro (de 400 a 380, por ejemplo) equilibra la percepción. Y un interlineado un punto más generoso ayuda a que las líneas respiren.

05Colores de marca y colores semánticos

Los colores saturados que funcionan bien sobre blanco suelen ser demasiado intensos sobre oscuro. La solución habitual es usar tonos más claros y menos saturados de la misma familia: si en claro el botón primario usa el tono 600 de la escala de la marca, en oscuro suele funcionar el 300 o el 400.

Lo mismo con los colores semánticos:

• →Error: un rojo coral más claro en lugar del rojo intenso.
• →Éxito: un verde menta en lugar del verde saturado.
• →Aviso: un ámbar suave.
• →Información: un azul claro.

El color del texto sobre los botones también cambia: si en claro es blanco sobre el color de marca, en oscuro puede ser texto oscuro sobre el tono claro de la marca. Es la manera de mantener el contraste de 4,5:1 sin recurrir a colores estridentes.

Todo esto es mucho más sencillo cuando la paleta está construida en capas, con primitivos y semánticos. El modo oscuro solo cambia a qué tono apunta cada uso, como explicamos en design tokens explicados, y en Figma se resuelve con un segundo modo en la colección de color, como vimos en Figma a fondo: variables y modos.

06Imágenes, logos, ilustraciones y gráficos

Aquí es donde muchos modos oscuros se quedan a medias. Una revisión completa incluye:

• →Logotipo: versión en negativo preparada para fondos oscuros. Un logo en PNG con fondo blanco aparece como un rectángulo luminoso.
• →Fotografías: en general funcionan bien, pero las muy luminosas pueden deslumbrar. Una reducción ligera del brillo (un 5 a 10 %) en oscuro las integra mejor.
• →Ilustraciones y diagramas: las que tienen fondo blanco o trazos negros necesitan una versión propia o colores definidos con variables.
• →Iconos: si están en SVG con currentColor, cambian solos con el texto.
• →Gráficos y mapas: las paletas de gráficos necesitan su versión oscura, y los mapas embebidos suelen tener un estilo oscuro configurable.
• →Capturas de pantalla: en una web de producto, lo ideal es tener capturas en ambos temas.
• →Contenido de terceros: vídeos incrustados, widgets de reservas o mapas que no siguen el tema conviene integrarlos con un marco que suavice el salto.

07Cómo se programa: prefers-color-scheme y light-dark()

En la web, el modo oscuro se apoya en la consulta de medios prefers-color-scheme, que lee la preferencia del sistema operativo. A eso se suma, desde 2024, la función CSS light-dark(), ya compatible con los principales navegadores, que permite declarar los dos valores de un color en una sola línea.

:root {
  color-scheme: light dark;
  --surface-base: light-dark(#FFFFFF, #121212);
  --surface-raised: light-dark(#F5F5F4, #1E1E1E);
  --text-primary: light-dark(#1A1A1A, #EDEDED);
  --text-secondary: light-dark(#5C5C5C, #A8A8A8);
  --border-subtle: light-dark(#E2E2E0, #343434);
  --action: light-dark(#1F7A4D, #6FCF9C);
  --on-action: light-dark(#FFFFFF, #0E2A1C);
}
/* Elección manual del usuario */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  background: var(--surface-base);
  color: var(--text-primary);
}

Las piezas clave:

• →`color-scheme: light dark` le dice al navegador que la página admite los dos temas. Así las barras de desplazamiento, los campos de formulario nativos y otros elementos del sistema se adaptan también.
• →`light-dark()` devuelve el primer valor en claro y el segundo en oscuro, según el color-scheme activo.
• →El atributo `data-theme` en la etiqueta html permite que la persona elija un tema distinto al de su sistema. Al forzar color-scheme, todas las funciones light-dark() responden solas.

Para que la elección manual se mantenga entre visitas, se guarda en el navegador y se aplica con un pequeño script en el head, antes de que se pinte la página, para evitar el parpadeo de un tema al otro al cargar. Y para el color de la barra del navegador en móvil, la etiqueta meta name="theme-color" admite un atributo media con (prefers-color-scheme: dark).

La documentación de prefers-color-scheme en MDN recoge los detalles de compatibilidad.

08El selector de tema: tres opciones y un sitio fácil de encontrar

Seguir la preferencia del sistema es el mejor punto de partida, pero hay personas que quieren algo distinto en una web concreta: el móvil en oscuro y tu tienda en claro para ver bien los colores de un producto, por ejemplo. Por eso, en las interfaces que se usan a menudo, añadimos un selector con tres opciones:

• →Automático, que sigue al sistema y es el valor inicial.
• →Claro, que fija el tema claro.
• →Oscuro, que fija el tema oscuro.

Un simple interruptor de dos posiciones obliga a elegir y pierde la opción automática, que es la que la mayoría prefiere sin saberlo. Un control segmentado o un pequeño menú con tres opciones resuelve mejor la decisión.

En cuanto a su lugar, en webs corporativas suele vivir en el pie de página o en el menú, con un icono de sol y luna acompañado de texto accesible. En aplicaciones y paneles, en la sección de ajustes o de perfil. Lo importante es que el cambio sea inmediato, sin recargar la página, y que una transición breve de color (unos 200 ms) haga el paso más amable, desactivada para quien ha pedido reducir el movimiento.

09Cómo revisar un modo oscuro antes de publicarlo

Esta es la lista que repasamos en el estudio:

1. 01Todas las parejas de texto y superficie cumplen 4,5:1 (o 3:1 en textos grandes).
2. 02Los bordes de campos y botones secundarios se distinguen con 3:1.
3. 03El foco de teclado se ve claramente en oscuro.
4. 04Las tarjetas, menús y modales se distinguen del fondo sin depender de sombras.
5. 05El logotipo, las ilustraciones y los gráficos tienen su versión oscura.
6. 06Ninguna imagen con fondo blanco aparece como un rectángulo luminoso.
7. 07Los colores de marca y de estado están reajustados y no vibran.
8. 08Los formularios nativos, las barras de desplazamiento y la barra del navegador siguen el tema.
9. 09La elección manual se recuerda y no hay parpadeo al cargar.
10. 10Se ha probado en un móvil real, de noche y con el brillo bajo.

El último punto es el más revelador. Un modo oscuro se diseña para la noche, y es de noche cuando hay que mirarlo.

Un buen modo oscuro es un gesto de cuidado hacia quien usa tu producto a última hora, en la cama o en una terraza a la luz de las velas. En SIMA lo diseñamos como un tema completo dentro de cada proyecto de diseño web y experiencia digital, con su paleta, sus superficies y su código, para que la marca se reconozca igual de bien a cualquier hora. Si quieres darle a tu web o a tu app un modo oscuro a la altura, escríbenos y lo preparamos juntos.