El lado oscuro del modo oscuro

Cuando hablamos de web hoy en día nos viene al cabeza un medio adaptable a los diferentes dispositivos (móviles, tablets, TV, ordenadores…). El Modo Oscuro favorece dicha adaptación, pues últimamente se pone mucho en valor la salud de nuestros ojos y se pone más atención en los detalles.

Valoremos por eso varias cuestiones al respecto:

¿Hay que aplicar siempre el modo oscuro?

En realidad hay que ser consciente que no todas las webs necesitan modo oscuro. Podemos decidir si la web tiene que tener modo oscuro en base a su objetivo:

  • Webs institucionales: sin modo oscuro, siempre claro
  • Webs corporativas: según el sector se puede aplicar
  • Webs de estudios gráficos: modo oscuro obligado

Esto son algunos ejemplos de cuando aplicar el modo oscuro. La versión oscura de la web tiene que aportar un beneficio para el que la lee y no entorpecer si acceso.

¿Modo oscuro automático o se puede escoger?

Cuando maquetamos una web tenemos la capacidad de aplicar el modo oscuro con una media query que detecte si el dispositivo tiene el modo oscuro aplicado a todo el dispositivo, entonces podemos aplicarlo en la web. Pero ¿hay que dar la posibilidad de aplicar el modo oscuro aunque el dispositivo esté en modo claro? Es un caso extraño para mí, si el usuario tiene el modo oscuro en el dispositivo será que también quiere ver la webs en modo oscuro pero lo contrario no me parece muy coherente. Por eso normalmente en las webs que programao no doy la opción de cambiarlo a volutad.

Hay que vigilar cómo aplicamos el modo oscuro

Cuando aplicamos el modo oscuro muchas veces no hay que aplicar lo que es negro blanco y viceversa, ya que el contraste de negro sobre blanco no es el mismo que blanco sobre negro. Hay que tener en cuenta las relaciones de contraste entre colores y aplicar un negro menos puro y un blanco menos puro a veces favorece la lectura y ayuda a no forzar tanto la vista (sobretodo en móvil).

El consorcio W3C recomienda:

  • Como mínimo 4,5:1 para texto pequeño (tamaños inferiores a 18 puntos para letra normal o 14 para negrita)
  • Como mínimo 3,0:1 para texto grande (tamaños superiores a 18 puntos para letra normal o 14 para negrita)

El ratio de contraste entre el negro y el blanco puro es de 21 (calculado con esta herramienta). En cambio si adecuamos a una relación para leer podemos obtener un relación más cómoda usando colores más cercanos:

Color 1Color 2RelaciónResultado
#000000#FFFFFF21,00Correcto
#4A4A4A#AAAAAA4,46Incorrecto
#555555#D6D6D65,13Correcto

Conclusiones

Hoy en día, tenemos mucho más control de la web para adaptarla al medio en el que se consume y es nuestra responsabilidad saber aplicar correctamente nuestros conocimientos. Pero también es nuestro deber aplicarlos pues cada visitante se merece que le tengamos en cuenta y ofrezcamos una buena experiencia de usuario. Cuando publiques una web estudia a tus usuarios, revisa tu estadísticas, adapta los diseños… Una web sigue viva tras la publicación.

Deja un comentario