Diseño páginas web

Modo oscuro y modo claro. ¿Cuál es el mejor?

Blog 'Pasión por el código' de Ailon Webs

Por M. Soutto

Se está impulsando cada vez más el uso del modo oscuro en las pantallas de nuestros dispositivos. Pero te has preguntado ¿cuál es el mejor para tus ojos? o ¿cuál mejora tu rendimiento?, incluso ¿cuál es el indicado para la pantalla de tu dispositivo?. Para dar respuesta a estas preguntas indagaremos sobre lo que sabemos hasta la fecha para poder decidir que es lo mejor.

modo oscuro y modo claro

¿Qué es el modo oscuro y el modo claro?

El modo oscuro o tema nocturno, en inglés Dark Mode, es la forma de visualizar la pantalla de tu dispositivo (móviles, ordenadores, etc.) con texto blanco y fondo oscuro (casi negro).

Y el modo claro, en inglés Light Mode, es lo contrario, visualizas la pantalla con texto oscuro y fondo claro.

Comparativa entre modo oscuro y modo claro
Modo oscuro Modo claro
Color de fondo casi negro blanco
Color del texto blanco negro
Iluminación del entorno escasa mucha

¿Cómo influye el entorno en la visualización?

La visualización de información en pantallas está influenciada por varios factores, incluyendo nuestra propia visión y el entorno en el que usamos las pantallas de los dispositivos, las interfaces de usuario (UI), etc. Por ello, exploraremos algunos conceptos clave relacionados con este tema.

1. Fatiga visual y colores del entorno:

  • Pasamos muchas horas frente a las pantallas de dispositivos, ya sea por trabajo o entretenimiento.
  • Los colores de las paredes y muebles pueden afectar nuestra percepción visual y la comodidad al mirar las pantallas. Para reducir la fatiga visual, se recomienda que el entorno donde utilizamos las pantallas tenga colores apagados, como por ejemplo, tonos pastel o colores mate sin brillos.
  • La polaridad de contraste de las pantallas, es otra posible causa de fatiga visual (ver punto 3).

2. Evolución de las pantallas:

Al principio de la informática, existían pantallas con fondo oscuro y texto blanco o incluso verde luminoso, eran otros tiempos y otra tecnología de pantallas, con grandes diferencias de contraste.

Actualmente, existen diversos tipos y tamaños de pantallas en dispositivos como móviles, tablets, ordenadores de sobremesa y portátiles. Estas pantallas admiten una amplia gama de colores y ofrecen una alta calidad de visualización.

3. Polaridad de contraste:

La polaridad de contraste se refiere al contraste entre el texto y el fondo en una pantalla (ver imagen abajo). Existen dos tipos:

  • Positiva: Texto oscuro sobre fondo claro o modo claro.
  • Negativa: Texto claro sobre fondo oscuro o modo oscuro.

Pros y contras según el tipo de polaridad de contraste:

  • Positiva:
    • Menos reflejos.
    • Bordes de caracteres más nítidos.
    • Más fácil conseguir el equilibrio de luminancias.
  • Negativa:
    • Mayor percepción de parpadeo.
    • Mejora la legibilidad en personas con menor agudeza visual.
    • Percepción de que los caracteres son más grandes.
Pantallas polaridad de contraste positiva y negativa, ver el contraste entre el texto y el fondo.

4. Sensibilidad del ojo y pantallas monocromáticas:

Las antiguas pantallas monocromáticas emitían luz (blanca o verde) y creaban un halo luminoso alrededor de los caracteres. Esto causaba fatiga visual, ya que nuestro cerebro debía transformar imágenes de contorno difuso en imágenes nítidas en tiempo real. Es el lóbulo occipital de nuestro cerebro el que realmente ve y en estas pantallas monocromáticas, tenía mucho trabajo transformando a tiempo real las imágenes de contorno difuso (ópticamente hablando) a imágenes nítidas.

Afortunadamente, las pantallas modernas no presentan este inconveniente y ofrecen una mayor precisión cromática.

macOS configuración en modo claro
macOS configuración en modo oscuro

En la actualidad, los dispositivos nos permiten configurar el modo de visualización en claro, oscuro o automático. En macOS, el modo automático cambia el aspecto de claro a oscuro según el calendario de Night Shift. Además, podemos personalizar este calendario para que se ajuste 'desde la puesta hasta la salida del sol'. También es posible modificar la 'temperatura del color' en una gradación que va desde menos cálida hasta más cálida.

En resumen, el entorno y las características de las pantallas influyen en nuestra experiencia visual al interactuar con dispositivos electrónicos.

¿Cuál es el mejor modo oscuro o modo claro?

Como usuarios, somos quienes decidimos cómo personalizar la pantalla de nuestros dispositivos. Buscamos configuraciones que resulten cómodas para nuestra visión y nos permitan concentrarnos en el contenido. Sin embargo, con la creciente popularidad del modo oscuro, es un buen momento para considerar cuál opción es más beneficiosa y adecuada según la situación, el entorno y nuestras necesidades visuales. ¿Cuál es la mejor elección para nuestros ojos y nuestro rendimiento

Ventajas del modo oscuro

  1. Reducción de la fatiga visual : El uso de fondos oscuros con texto más claro minimiza el brillo general de la pantalla, lo que disminuye la fatiga visual, especialmente en entornos con poca luz.
  2. Mejora de la comodidad de lectura : El modo oscuro permite a los usuarios interactuar con contenido digital durante períodos prolongados sin experimentar fatiga. Esto es especialmente útil por la noche o en ambientes oscuros.
  3. Menor exposición a la luz azul : Al reducir la emisión de luz azul, el modo oscuro puede contribuir a una mejor calidad del sueño. Esto es relevante si utilizas dispositivos antes de acostarte.
  4. Accesibilidad mejorada : Para personas con sensibilidad a la luz, el modo oscuro puede ser más cómodo y legible.
  5. Ahorro de batería en pantallas OLED: En dispositivos con pantallas OLED, el modo oscuro puede prolongar la duración de la batería.

El modo oscuro ofrece beneficios tanto para la salud visual como para la experiencia de uso. Sin embargo, también tiene desventajas, como provocar la dilatación de la pupila para permitir la entrada de más luz. Por este motivo, a muchas personas les resulta más cómodo utilizar el modo oscuro en entornos con poca luz, aunque no siempre es recomendable. Naturalmente, el ojo humano ve mejor durante el día que por la noche, y el mayor contraste se logra con texto oscuro sobre fondo claro.

¿Por qué en en pantallas OLED se produce el ahorro de batería?

El ahorro de batería en pantallas OLED, se debe a que cada píxel de la pantalla, que a su vez se compone de tres subpíxeles rojo, verde y azul (RGB) se iluminan en diferentes intensidades para producir el color que ves en la pantalla. Cuando ves el color negro en tu pantalla, significa que los tres subpíxeles de ese píxel en particular están completamente apagados, y por lo tanto, no consumen energía. Así que, mostrar el color negro en una pantalla puede ayudar a ahorrar energía, especialmente en las pantallas OLED, donde cada píxel se ilumina de forma independiente y los píxeles que muestran el color negro están efectivamente apagados y no consumen energía.

[ Nota ] En un artículo anterior, abordamos ¿Cómo percibimos los colores? Y como influencia el diseño web, te invitamos a leerlo para comprender con mayor profundidad estos conceptos.

Ventajas del modo claro

  • Mejora la legibilidad: El color blanco refleja todas las longitudes de onda del espectro de luz visible, por este motivo el modo claro facilita la lectura, ya que el texto oscuro resalta sobre fondos claros mejorando la visibilidad y percepción. La pupila contraída tiene que esforzarse menos para enfocar el texto. Además, reduce el deslumbramiento en entornos luminosos, como al usar dispositivos al aire libre.
  • Apariencia familiar: Para quienes prefieren lo clásico, el modo claro emula la sensación de leer en una hoja de papel en blanco. Es la interfaz tradicional y resulta familiar para muchos usuarios.
  • Beneficios para la visión ocular: El modo claro potencia la visibilidad del texto e iconos, favoreciendo el contraste y el esquema de color. Es especialmente útil para personas con problemas de dislexia o astigmatismo

El modo claro permite que la pupila no tenga que dilatarse para dejar entrar más luz, mientras que el modo oscuro provoca que la pupila se dilate para dejar entrar más luz.

Sensibilidad del ojo en función de la luz

Una de las ventajas al usar el modo oscuro es que puede extender la vida útil de la batería, caso que nuestro dispositivo la use, ya que cuando lo usamos nuestra pantalla emite menos luz que cuando la usamos en modo claro.

La cantidad de luz que nos rodea en nuestro entorno puede influir en el consumo de energía y en nuestra percepción. Esto tiene una relación directa con la estructura anatómica de nuestros ojos, concretamente con la pupila y cómo reacciona a la cantidad de luz del entorno.

La pupila del ojo humano es por donde llega la luz a nuestra retina y su diámetro varia según la cantidad de luz que recibe. Es el iris el que adapta el diámetro de la pupila según la cantidad de luz que recibe, si llega mucha luz se contrae para que no se dañe la retina y si llega poca luz se dilata para obtener una imagen nítida.

Así varía el diámetro de la pupila en función de la luz que recibe:

  • Mucha luz (luminosidad) → disminuye el diámetro de la pupila (miosis)
  • Poca luz (penumbra) → aumenta el el diámetro de la pupila (midriasis)

Cuando la pupila tiene un diámetro pequeño disminuye el esfuerzo para enfocar el texto y con ello disminuye la fatiga visual.

Las cámaras de fotos funcionan igual, el ángulo de apertura (f) de las lentes (equivaldría a el diámetro de la pupila del ojo), si uso una apertura pequeña f/22, aumenta la nitidez y el área de enfoque es grande.

Y si el ángulo de apertura (f), tiene una apertura grande por ejemplo f/3, el área de enfoque es pequeña y lo que no está enfocado queda borroso.

Un alto porcentaje de las personas tienen astigmatismo, esto causa la visión borrosa ya que uno o ambos ojos tienen una forma irregular. Si tienes astigmatismo tendrás dificultad para leer textos claros sobre fondos oscuros; los niveles de luz tienen parte de la culpa, por ello con una pantalla brillante (fondo blanco) la pupila disminuye su diámetro para así disminuir el efecto de la lente deformada que provoca la forma irregular del globo ocular; entonces, con una pantalla oscura (fondo negro), la pupila se dilata para recibir más luz y en consecuencia obtiene una visión desenfocada.

Cuando envejecemos nos hacemos más susceptibles al deslumbramiento, ya que la pupila disminuye de diámetro. Y como hemos visto al disminuir el diámetro de la pupila entra menos cantidad de luz al ojo. Por esto motivo en un entorno con poca luz, por la noche por ejemplo, la visión se ve disminuída.

¿Y en el diseño web?

Los diseños de páginas web que disponen del modo oscuro o dark mode son actualmente muy populares, quizá uno de los motivos sea que el usuario tenga una experiencia distinta a la tónica clásica del blanco más tradicional de los últimos años.

Muchos sitios web usan el modo oscuro para atraer clientes, y hay encuestas que indican que es el preferido por muchos usuarios sobre todo los que usan las redes sociales. Es posibe que esté influenciado porque el tema oscuro: ha sido usado por grandes empresas tecnológicas desarrolladoras de los dispositivos que usamos y hacen ahora posible que sus usuarios cambien al modo oscuro; los programadores y también los expertos que diseñan UI utilizan aplicaciones con el modo oscuro y se vean influenciados al desarrollar webs quedando reflejado en sus trabajos; o bien, por el simple hecho de cambiar, al estar muchas horas leyendo en el modo claro pasar al oscuro es como cambiar algo; cuando necesitas reducir el uso de la batería del dispositivo.

Aunque el modo oscuro, como comentamos anteriormente, produce la dilatación de la pupila, lo que implica un mayor esfuerzo para enfocar y fatiga visual. Sin embargo, se prefiere el modo oscuro, cuando el entorno al dispositivo que utilizamos tiene condiciones de poca luz y no implica leer gran cantidad de texto.

Los diseños de sitios web con el modo oscuro son muy populares actualmente, por lo que no deberíamos descartar este tema para un futuro proyecto web. En Ailon Webs creemos que tiene que haber un equilibrio y, cuando sea posible, ofrecer a los usuarios de la web la opción de elegir con qué modo desean ver las páginas web.

Conclusiones

Parece que cuando la óptica y la medicina nos indican lo contrario, es el modo oscuro el que se ha hecho popular entre los usuarios de los dispositivos. Quizá influye más la percepción de cambio que la idiosincracia de nuestro sistema de visión.

En cuanto al diseño de sitios web, debemos diferenciar el tiempo de uso que hacemos de los dispositivos para valorar si es mejor un modo que otro, ya que no es igual estar varias horas utilizando el modo oscuro en una aplicación con la consecuente fatiga visual, comparado con la visualización de unos minutos de un diseño web. Por ello, no debemos descartar el modo oscuro para el diseño de sitios webs, ya que el negro como ya dijimos en un artículo anterior "aumenta la percepción del valor del diseño, sugiriendo autoridad y superioridad". Pero el blanco usado en diseños minimalistas "aumenta la percepción del valor del diseño, honestidad y bondad. Transmite un diseño limpio, por tanto, aumenta la percepción de valor en productos".

Hemos aprendido que cuando la pupila recibe mucha luz su diámetro de la pupila es pequeño y como resultado disminuye el esfuerzo del ojo para enfocar texto y por lo tanto disminuye la fatiga visual. El ojo humano ve muy bien con la luz diurna pero no tanto por la noche, por ello el mejor contraste para el ojo sería el modo claro (texto oscuro sobre fondo claro). Si tienes astigmatismo es muy probable que te sientas mejor usando el modo claro. A largo plazo, leer en modo claro en las pantallas de ordenadores, móviles, tablets, etc., parece que se asocia a padecer miopía o bien a aumentarla si ya la tenías.

El modo oscuro puede hacer que dure más la batería de tu dispositivo (si la tiene), puede ser más relajado usarlo por la noche cuando hay poca luz en el entorno. Muchos dispositivos ya cuentan con una tercera opción que es modo automático, el sistema detecta la luz del entorno y cambia gradualmente el modo.

Modo oscuro vs. modo claro. ¿Cuál es mejor?. La mayoría de las personas ven mejor con el modo claro, pero algunas pueden ver mejor con el modo oscuro. Pensar que si nuestros músculos oculares tienen que realizar un mayor esfuerzo al leer nos produce mayor fatigar visual. Por ese motivo, lo mejor es que si no te sientes cómodo/a usando un modo u otro no obligues a tus ojos a hacerlo, ¡cuídalos son únicos!

Solicita presupuesto sin compromiso

Leyenda

  • UI = Interfaz de Usuario. Es el medio con lo que un usuario interactúa con un dispositivo, máquina, ordenador, móvil, etc.
  • UX = eXpericia de Usuario, del inglés User eXperience. En el diseño web es lo que el usuario percibe cuando utiliza la web.

Categorías: Diseño páginas web

Etiquetas: UX UI Tecnología

¿No estás seguro de qué web te conviene?

Empieza a construir. Cuéntanos tu idea, nosotros diseñaremos tu sitio web en internet que se adapte mejor a tus necesidades.