Diseño en modo oscuro: fondos, color y contraste

Diseño en modo oscuro significa construir un conjunto aparte de valores para superficies, texto, acentos e imágenes, no darle la vuelta a los colores del modo claro. Los fondos oscuros cambian cómo se comporta el color: los tonos saturados se ven más pesados, las sombras desaparecen, el texto blanco brillante deslumbra y los degradados suaves generan bandas. La buena noticia es que esas mismas propiedades hacen hermosos los temas oscuros cuando se tratan bien: el color brilla, la profundidad se siente en capas y el contenido queda tranquilo al frente.

Por qué evitar los fondos de negro puro

El negro puro, #000000, con texto blanco puro da el máximo contraste posible, de 21:1. Suena ideal, pero a menudo resulta incómodo: muchos lectores ven el texto brillante expandirse o vibrar sobre el negro puro, sobre todo en pasajes largos. El negro tampoco deja nada más oscuro adonde ir, así que no puedes mostrar una superficie por debajo de otra. Y en algunos móviles OLED, el contenido que se desplaza sobre negro real puede dejar un breve rastro al encenderse los píxeles. La guía Material Design de Google usa #121212 como superficie oscura base por estas razones.

Mostrar la elevación con la luminosidad

En el modo claro, las sombras separan una tarjeta de la página. Sobre un fondo oscuro, una sombra oscura apenas se ve. Por eso los temas oscuros invierten la lógica: cuanto más cerca está una superficie del espectador, más clara es. La página es lo más oscuro, las tarjetas un paso más claras, los menús y los diálogos aún más claros. Mantén los pasos pequeños y constantes, y añade un borde finísimo de un tono algo más claro donde se encuentren dos superficies parecidas.

Color del texto y contraste en modo oscuro

Usa un blanco roto como #e6e8ec para el texto de cuerpo en lugar de blanco puro. Sigue dando un contraste muy alto, 15:1 sobre #121417, y deslumbra menos. El texto secundario puede bajar a un gris medio, pero compruébalo: #9aa1ad se mantiene en 7,1:1 sobre la misma superficie y en 5,5:1 sobre una tarjeta más clara. Las WCAG piden al menos 4,5:1 para el texto normal, sea cual sea el tema; contraste de color explica cómo comprobarlo.

Desaturar los colores de acento

Un violeta intenso como #7c3aed funciona como botón sobre blanco. Sobre una superficie oscura se ve pesado y mide solo 3,2:1, demasiado poco para enlaces de texto. Su matiz más claro #a78bfa mide 6,8:1 sobre el mismo fondo y se lee como el mismo color de marca. La regla general: aclara los acentos y desatúralos un poco en los temas oscuros, y conserva el tono.

Degradados en el diseño de modo oscuro

Los fondos oscuros son donde los degradados lucen. Un fondo profundo permite que el color parezca luz y no pintura, y por eso los brillos, las auroras y las mezclas de neón se muestran tan a menudo sobre casi negro. Mantén oscura la mayor parte de la superficie y deja que el color aparezca en uno o dos sitios: un brillo detrás de una portada, un borde degradado en una tarjeta destacada, un lavado suave en lo alto de una página.

El inconveniente son las bandas. Los desvanecidos oscuros y lentos usan pocos tonos distintos en una pantalla de 8 bits, así que los escalones se hacen visibles. Una capa tenue de grano los oculta; mira bandas en degradados y, para la web, textura de ruido en CSS. Para fondos construidos por completo en la oscuridad, fondos de degradado oscuro trae paletas.

Cómo construir el modo oscuro en CSS

Define los colores una sola vez como propiedades personalizadas y cambia sus valores según el tema. color-scheme le indica al navegador que dibuje sus propios controles y barras de desplazamiento en el tema correspondiente, y la función light-dark() elige entre dos valores según el esquema activo.

:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

body {
  background: var(--surface);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}

Da a las personas un interruptor manual además de seguir el ajuste del sistema, y recuerda todo lo que queda más allá de la interfaz: gráficos, ilustraciones, logotipos y correo necesitan revisarse en ambos temas. Degradados en el correo explica cómo tratan el modo oscuro las apps de correo.

Una lista de comprobación para el modo oscuro

• Superficies de gris oscuro, no de negro puro, con un paso de luminosidad claro por cada elevación.
• Texto de cuerpo en blanco roto con alto contraste; el texto secundario, siempre por encima de 4,5:1.
• Acentos más claros y suaves, conservando el tono de marca.
• Bordes, no sombras, para separar superficies parecidas.
• El color usado como luz en unos pocos sitios, no en todas partes.
• Grano en los degradados oscuros grandes para evitar las bandas.
• Logotipos con una versión clara para fondos oscuros; mira logotipo sobre un fondo degradado.
• Ambos temas revisados en un móvil real, en una sala con poca luz y a la luz del día.