¿Qué es el Dark Mode?

El modo obscuro, también conocido como “dark mode” en inglés, describe una configuración en la interfaz de usuario que aplica una escala de colores obscuros como fondo del contenido. El texto y los objetos son de color blanco o claro, así como el uso de colores es en un porcentaje de saturación más suave.

Se sugiere que este modo es más seguro para los ojos cuando trabajas por la noche o simplemente en entornos con poca luz. Además, permite ahorrar la batería del teléfono.

Esta opción ofrece los siguientes beneficios:

• Evita la fatiga visual al mejorar la visibilidad para los usuarios con visión reducida y los usuarios sensibles a la luz intensa.
• Puede optimizar el consumo de batería considerablemente (según la tecnología de pantalla del dispositivo).
• Facilita el uso del dispositivo en un ambiente con poca luz.

Evitar la fatiga visual

Según los datos extraídos del estudio, los menores de 30 años pasan 10 horas y media diarias visualizando pantallas; la población entre 31 y 45 años, 9,3 horas; las personas entre 46 y 60 años, 8,3 horas; y, las personas mayores de 60 años, 3,8 horas.

También podemos mencionar la luz de las pantallas y los LEDS, que emiten gran cantidad de rayos azul-violeta de alta energía, que producen fatiga y estrés visual, así como generar daño en las células de la mácula, un tejido sensible a la luz situado en el fondo del ojo, en el centro de la retina. Esto aumenta el riesgo de padecer DMAE (Degeneración Macular Asociada a la Edad), una de las principales causas de ceguera en el mundo. La luz azul-violeta también.

Un tema Dark Mode ayuda a reducir en gran medida la exposición prolongada al brillo de una pantalla, disminuyendo en gran medida la posibilidad de desarrollar alguno de los padecimientos mencionados.

Optimizar el consumo de batería

El modo oscuro también sirve para ahorrar batería en las pantallas OLED. Y una cantidad considerable, según confirma un nuevo estudio de la universidad de Purdue.

El equipo encargado de la investigación analizó el consumo de batería utilizando algunas de las aplicaciones más comunes en los dispositivos Android, como YouTube, la app de calculadora, Google Maps, Calendario de Google, entre otras. Para el ensayo se recurrió a cuatro smartphones que cuentan con pantallas OLED y AMOLED: Pixel 2, Moto Z3, Google Pixel 4 y Pixel 5.

Según las pruebas realizadas, la pantalla OLED con un nivel de brillo bajo consume hasta un 73% de la capacidad total de la batería en un móvil. La misma tecnología de pantalla, con el modo oscuro aplicado y un brillo máximo, es capaz de reducir ese elevado consumo en hasta un 67% en algunos terminales.

En general, los OLED ofrece un mayor ahorro energético dado que los negros más puros son, en realidad, píxeles apagados.

Los resultados muestran que es posible ahorrar entre un 39% y 47% de batería con el modo oscuro activado y cuando el nivel de brillo del dispositivo está al máximo. El estudio revela, además, que el ahorro de batería con los característicos tonos negros es menor cuando la pantalla tiene un brillo más bajo.

Los resultados también se pueden aplicar a los modelos de Apple, dado que las comprobaciones con un iPhone X han sido muy similares.

Uso del dispositivo en un ambiente obscuro

La Academia Americana de Oftalmología recomienda activar el modo oscuro para reducir en cierta medida la exposición a la luz azul. Sin embargo, para conseguir el mejor efecto, hay que dejar el teléfono durante una o dos horas antes de acostarse y utilizar el menor brillo posible utilizando el modo oscuro para conseguir un contraste suave entre la pantalla y tu entorno.

Principios

¿Cómo aplicar correctamente el Dark Mode?

Accesibilidad y Contraste:

En el modo oscuro es vital la relación de contrastes y aplicar el color correctamente. Las superficies de temas oscuros deben ser lo suficientemente oscuras para mostrar texto blanco. 

Deben usar un nivel de contraste de al menos 15.8: 1 entre el texto y el fondo. Esto asegura que el texto del cuerpo pase el estándar AA de WCAG de al menos 4.5: 1 cuando se aplica a superficies en la elevación más alta (y más clara).

Mayor elevación, superficie más clara:

En una interface tradicional con fondo blanco se usan sombras para expresar la elevación de los componentes y jerarquizar la información. Sin embargo, en el tema oscuro se representa la elevación, añadiendo mayor claridad a los componentes.

Colores Desaturados

Evita los colores saturados, ya que en superficies oscuras no pasarán el estándar de accesibilidad de 4.5: 1. También los colores saturados producen vibraciones ópticas en un fondo oscuro, lo que provoca fatiga visual. Por ello, los colores desaturados (colores en el rango 200-50) son una buena alternativa como color primario; porque tienen una mejor legibilidad en superficies de temas oscuros.

Uso de colores

Los componentes o textos a color pueden mostrar una variación del color primario en su tema oscuro.

En el caso de usar un color secundario para acentuar algún texto o componente este, se puede desaturar para alcanzar el nivel de contraste de 4,5:1.

Para conservar la identidad de marca en el modo oscuro se recomienda utilizar el color primario saturado en uno o dos elementos, como por ejemplo un botón o un logotipo. Y usar en el resto de la interfaz el mismo color primario pero en el tono 200. 

En el ejemplo que se muestra a continuación, se aplica un color de marca totalmente saturado al botón de acción flotante (2), mientras que el color primario del tema oscuro desaturado se aplica al texto (1).

Para más documentación acerca de los colores y como aplicar correctamente la configuración de Dark Mode, accede a la siguiente sección: Color System