Modo oscuro: más que invertir colores

Un modo oscuro bien diseñado no es invertir blanco y negro: exige rehacer superficies, elevación, saturación y contraste. Qué dicen las guías y la evidencia.

info Definición Rápida

Un modo oscuro es un tema visual con fondos oscuros y texto claro pensado para ser cómodo en condiciones de poca luz. Su diseño no consiste en invertir colores: exige reconstruir superficies, elevación, saturación y contraste para que la jerarquía siga funcionando.

¿Qué significa diseñar un modo oscuro?

Hay dos formas de hacerlo. La primera es aplicar un filtro que invierte colores. Es rápida y casi siempre da un resultado malo: las imágenes se estropean, los colores de marca cambian de significado y la jerarquía se rompe. EZUD advierte que el filtro de inversión (filter: invert(1)) arruina imágenes, videos y cualquier color calibrado con cuidado (EZUD, “Dark mode as an accessibility feature”).

La segunda es construir un tema propio, con decisiones de color intencionadas para fondos oscuros. Es más trabajo, pero es la única forma de que el modo oscuro se vea y funcione bien.

¿Por qué le importa a un diseñador?

Porque el modo oscuro no es un extra decorativo. Mucha gente lo usa por preferencia, por la noche o por sensibilidad a la luz. Si tu producto lo ofrece mal, el problema se nota en cada pantalla, no solo en una.

También es una prueba de tu sistema de color. Si tus colores están definidos como valores fijos en lugar de como roles, cambiar de tema exige tocar cada componente. Si están definidos como tokens con significado, el tema se cambia en un solo lugar. Por eso el modo oscuro obliga a pensar en la arquitectura de tokens de tu sistema de diseño.

¿Qué recomiendan las guías?

Estas son las recomendaciones más repetidas en las fuentes de abajo:

Fondo gris oscuro, no negro puro. Material Design recomienda una superficie base de #121212; EZUD añade #1A1A1A como alternativa. Según A11y explained with Diana, el negro puro con blanco puro a menudo no es la combinación más cómoda.
Texto que no sea blanco puro. EZUD propone #E0E0E0 o #D4D4D4 sobre el fondo oscuro. Material Design indica que texto al 87 % de blanco alcanza una relación de contraste de 15,8:1 sobre #121212.
Elevación con luminosidad. Las sombras casi no se ven en fondos oscuros, así que los elementos más altos son más claros. Material Design superpone blanco con opacidades del 5 % al 16 %, según el nivel de elevación (en dp).
Colores desaturados y estados con apoyo extra. Material Design recomienda desaturar los colores (tonos alrededor del 200). EZUD recuerda que los indicadores rojo, verde y amarillo deben revisarse contra el fondo oscuro, porque algunos no pasan, y que conviene acompañarlos con iconos o texto.

Además, las imágenes necesitan revisión: logos e ilustraciones pueden necesitar versiones alternativas o fondos transparentes.

¿Qué dice la evidencia sobre la lectura?

Aquí conviene ser prudente. Nielsen Norman Group revisó estudios académicos (no hizo investigación propia) y concluye que, en personas con visión normal, el modo claro rinde mejor la mayor parte del tiempo. En un estudio que cita, de día la polaridad no tuvo efecto significativo, pero de noche el modo claro superó al oscuro y el texto pequeño era mucho más difícil de leer en oscuro. Aun así, recomienda ofrecer el modo oscuro como opción, por posibles efectos a largo plazo del modo claro, por su ayuda a algunas personas con baja visión y por preferencia personal (Nielsen Norman Group, «Dark Mode vs. Light Mode: Which Is Better?», Raluca Budiu, 2 de febrero de 2020).

Diana Khalipina, en A11y explained with Diana, coincide en que en general se lee más rápido texto oscuro sobre fondo claro. Reconoce que las interfaces oscuras reducen la sensibilidad a la luz y ayudan con las migrañas, pero que también producen bordes de texto más borrosos y aumentan la fatiga visual (A11y explained with Diana, «What science says about black & white combinations in UI design», 13 de mayo de 2026). Por eso lo razonable es ofrecer el tema como opción y no imponerlo.

En cuanto al contraste, el criterio es el mismo en ambos temas. WCAG 1.4.3 pide una relación mínima de 4,5:1 para texto normal y de 3:1 para texto grande, que empieza en 18 pt o 14 pt en negrita (W3C, “Understanding Success Criterion 1.4.3”). Cumplir ese mínimo es necesario, pero no basta para decir que el tema es cómodo.

Ejemplo

Ejemplo ilustrativo: una app de notas tiene un modo oscuro hecho con inversión automática. Las fotos de las notas aparecen con colores raros, el botón principal parece más apagado que en claro y las tarjetas no se distinguen del fondo. El equipo rehace el tema: fondo #121212, tarjetas un poco más claras para mostrar elevación, texto #E0E0E0, el color de marca desaturado un 15% para el modo oscuro y las fotos con un velo oscuro leve. Después, lee con el tema entre 15 y 20 minutos seguidos, y de nuevo con brillo bajo, como sugiere A11y explained with Diana, y pide a cinco personas que lo usen de noche. Dos de ellas dicen que ahora lo prefieren para leer; una dice que prefiere el claro en exteriores. El equipo deja ambos temas.

¿Cuándo NO conviene ofrecer modo oscuro?

Si no tienes tokens de color. Sin roles, cada componente necesitará un ajuste manual y el resultado será inconsistente.
Si el contenido se lee sobre todo a la luz del día. Un producto de consulta en exteriores puede priorizar el claro.
Si no vas a probarlo en condiciones reales. Probar solo en Figma no dice cómo se ve con poca luz o con una pantalla de baja calidad.
Si la marca depende de un color que no funciona en oscuro. Mejor definir una variante propia que forzar el color original.

Errores comunes

Invertir colores con un filtro y publicarlo.
Usar negro puro y blanco puro como regla general.
Mantener sombras para mostrar elevación.
Olvidar las imágenes, los gráficos y los estados de error y de éxito.
Revisar solo una pantalla y no el flujo completo.
Dar por bueno el contraste sin probar la lectura prolongada.

Cómo empezar mañana

Abre tu producto en modo oscuro, si lo tiene, o pon el sistema en ese modo. Revisa cinco pantallas: la de inicio, un formulario, una lista con imágenes, un error y un estado vacío. Anota qué color cambió de sentido, qué elemento perdió su jerarquía y qué imagen se ve mal. Después, define tokens de fondo, superficie, texto y color de marca para los dos temas, en lugar de cambiar componentes uno por uno. Si quieres que el criterio de contraste quede documentado, la matemática del contraste de color te da la base para verificar cada par.

Fuentes

Preguntas frecuentes

¿Basta con invertir los colores para hacer un modo oscuro?

No. Invertir colores estropea imágenes y colores calibrados, y rompe la jerarquía. Un modo oscuro necesita un tema propio, con superficies, elevación, saturación y contraste pensados para fondos oscuros.

¿Qué color de fondo usar en modo oscuro?

Material Design recomienda una superficie base de #121212, y EZUD propone también #1A1A1A, en lugar de negro puro. Para el texto, EZUD sugiere blancos rotos como #E0E0E0 o #D4D4D4. Comprueba el contraste en tu propia paleta.

¿Cómo se muestra la elevación sin sombras?

Con superficies más claras para los elementos más altos. Material Design aplica capas de blanco con opacidad creciente según la elevación (del 5 % al 16 % en su escala), porque las sombras casi no se ven sobre fondos oscuros.

¿El modo oscuro es más fácil de leer?

Depende de la persona y de la luz. Nielsen Norman Group concluye, tras revisar estudios académicos, que con visión normal el modo claro rinde mejor la mayor parte del tiempo, pero recomienda ofrecer el modo oscuro como opción porque ayuda a algunas personas con baja visión y a quienes lo prefieren. Pruébalo con tu contenido y con personas reales.