Diseño Web

Cuándo conviene el modo oscuro en la web de tu despacho

El modo oscuro gusta, pero la lectura larga no siempre sale ganando: esto dice la investigación sobre activarlo en la web de un despacho.

Cuándo conviene el modo oscuro en la web de tu despacho

El modo oscuro lleva una década pidiendo paso en las webs de despachos, periódicos y aplicaciones de todo tipo, y la pregunta que de verdad importa no es estética: es si conviene ofrecerlo en un blog jurídico que vive de artículos de más de mil palabras. La respuesta cambia según quién lee, cuándo y desde qué pantalla, y conviene decidirla con los mismos datos con los que se mide cualquier otra decisión de diseño, no por moda del momento.

El modo oscuro no gana en lectura: un estudio de 2013 publicado en Ergonomics y otro del MIT coinciden en que el texto oscuro sobre fondo claro —la polaridad que usa la mayoría de blogs— da más agudeza visual y mejor velocidad de lectura que el texto claro sobre fondo oscuro, sobre todo con letra pequeña y por la noche.

La investigación de lectura sobre el modo oscuro

La diferencia tiene nombre técnico: polaridad positiva es el texto oscuro sobre fondo claro, y polaridad negativa es el texto claro sobre fondo oscuro que usa el modo oscuro. Según recoge Nielsen Norman Group, el estudio de 2013 en Ergonomics encontró que la polaridad positiva ganaba en todas las dimensiones de agudeza visual y corrección de pruebas, sin que la edad del lector cambiara el resultado. Un estudio del MIT sobre lectura rápida nocturna llegó a la misma conclusión con fuentes pequeñas: la polaridad positiva seguía rindiendo mejor que la oscura.

La explicación fisiológica es sencilla: con fondo claro la pupila se contrae más, lo que reduce las aberraciones esféricas del ojo y aumenta la profundidad de campo. Es el mismo motivo por el que cuesta más leer un cartel luminoso en una sala oscura que un papel bajo una lámpara. Para un artículo de más de mil palabras, esa diferencia de legibilidad pesa más que la preferencia estética del momento.

Contraste y legibilidad en pantallas oscuras

Invertir los colores no basta para que un tema oscuro funcione: el contraste hay que recalcularlo, no solo invertirlo. Un negro absoluto con texto blanco puro da el contraste más alto posible, pero ese extremo cansa la vista en lecturas largas y genera un efecto óptico conocido como halación.

Halación: el resplandor que rodea a las letras claras cuando se dibujan sobre un negro puro, un efecto óptico que hace que el texto parezca «sangrar» sobre el fondo y fuerza la vista en párrafos largos.

Blanco puro sobre negro, el error más común

La guía de Material Design de Google lo resuelve con una norma sencilla: usar un gris oscuro como superficie en lugar de negro puro, y reservar el blanco al cien por cien para los acentos, no para el cuerpo del texto. El texto principal se queda en una opacidad alta y el secundario por debajo de esa cifra, lo que reduce el contraste extremo sin perder legibilidad. Aplicado a la web de un despacho, significa evitar fondos negros y textos blancos idénticos a los de un editor de código: con gris oscuro y texto ligeramente atenuado se lee mejor y las piezas largas pesan menos a la vista. Esta misma lógica es la que ya exige el mínimo de contraste de color en cualquier web, solo que aplicada al revés: con fondo claro sobra contraste con facilidad, con fondo oscuro falta por exceso.

El riesgo de forzar un tema oscuro sin opción

Sustituir el tema claro por uno oscuro para todo el mundo, sin opción de volver, traslada la pérdida de legibilidad del estudio de 2013 a cada visitante del blog, incluido el que solo quiere confirmar un precio o un plazo antes de llamar al despacho. Nielsen Norman Group lo resume con una recomendación concreta: dejar que sea el usuario quien decida activarlo, no imponerlo como tema único de la web.

Hay una excepción real: personas con opacidad en el cristalino u otras alteraciones del medio ocular leen mejor con polaridad negativa, según el mismo cuerpo de investigación. Es una fracción pequeña del público y no se detecta por edad ni por el dispositivo, así que forzar un único tema deja fuera a alguien en cualquiera de los dos sentidos, el mismo argumento que sostiene la ley de accesibilidad web para no depender de una sola forma de presentar la información. Conviene revisar también qué pasa con el foco de teclado al cambiar de tema: el contorno que marca el elemento activo al navegar con el tabulador puede desaparecer si solo se probó el contraste en el tema claro.

Cómo delega el tema oscuro en el sistema operativo

La forma de resolver el dilema sin obligar a nadie a elegir es no construir un interruptor, sino seguir la preferencia que el usuario ya fijó en su móvil u ordenador. La media feature prefers-color-scheme de CSS, documentada por MDN, detecta si el sistema está en claro o en oscuro y aplica una hoja de estilos distinta sin que el visitante toque nada en la web. Es una característica ampliamente soportada desde enero de 2020, así que funciona en cualquier navegador moderno sin prefijos ni librerías. Encaja con la misma lógica del diseño adaptado a cada pantalla: responder a lo que el dispositivo ya sabe del usuario.

La preferencia del sistema decide sin pedir permiso

En la práctica, el tema de WordPress de un despacho solo necesita dos bloques de CSS: el de siempre y uno envuelto en la condición de oscuro con los colores de superficie y texto corregidos. No hace falta JavaScript, ni una cookie para recordar la elección, ni un botón flotante que distraiga de la llamada a la acción. El coste de mantenimiento es prácticamente nulo una vez revisado el contraste de los dos temas, y cambia solo cuando el visitante modifica su sistema. Para un despacho que publica varias piezas a la semana esa diferencia importa: revisar a mano el contraste de un interruptor con cada artículo nuevo es trabajo que nadie se para a hacer, y un tema oscuro mal medido acaba siendo peor que no tener ninguno.

Casos donde conviene ofrecer modo oscuro

El blog público de un despacho, pensado para posicionar y para que un desconocido lo lea de un tirón, es el escenario donde el modo oscuro aporta menos: ahí gana la polaridad positiva según la propia investigación citada arriba. Hay otros rincones de la web del despacho donde la cuenta cambia:

  • Un portal privado donde el cliente sigue el estado de su expediente, que suele consultarse de noche y en sesiones cortas, no de lectura larga.
  • Paneles con datos técnicos o texto monoespaciado —facturas, cláusulas resaltadas— donde el contraste alto del tema claro cansa más que ayuda en revisiones largas.
  • Un volumen alto de visitas que ya llega con el sistema en modo oscuro, dato que se puede comprobar en la analítica antes de invertir tiempo en construirlo.

Fuera de esos casos, el modo oscuro en el blog es una preferencia estética del equipo, no una mejora real para quien busca información sobre honorarios o plazos antes de decidir con qué despacho hablar.

Pantalla, batería y rendimiento con tema oscuro

El tema de color no es un factor de posicionamiento: Google no premia ni penaliza que una web sea clara u oscura. Donde sí deja huella es en cómo se comporta la pantalla y la batería del móvil, sobre todo en pantallas OLED, que apagan literalmente los píxeles negros en lugar de iluminarlos. El efecto en el consumo depende del fabricante y del nivel de brillo, así que no conviene prometerlo como ahorro garantizado: es una ventaja real pero variable según el dispositivo. Lo que sí es constante es que un tema oscuro mal medido añade peso visual y puede empujar las métricas de carga en el mismo sentido que cualquier otro CSS mal cargado, como ya pasa con el LCP cuando el navegador tarda en pintar el contenido principal de la página.

Preguntas frecuentes sobre el modo oscuro

¿El modo oscuro mejora el SEO de una web?

No de forma directa: Google no usa el tema de color como factor de posicionamiento. Donde sí influye es en el tiempo de lectura y el rebote, porque un texto que cansa a los dos minutos hace que el visitante cierre antes de llegar a la llamada a la acción.

¿Cuánto tarda en implementarse el modo oscuro automático?

Con la media feature prefers-color-scheme, el tema se ajusta en un único archivo CSS del WordPress, sin plugin ni interruptor visible. Para un desarrollador con acceso al tema, suele resolverse en menos de una jornada de trabajo, incluida la revisión del contraste de ambas versiones.

¿Conviene ofrecer un interruptor manual de modo oscuro?

Solo si el público del sitio ya lo pide de forma explícita: un botón visible añade una decisión más en cada visita. Respetar la preferencia del sistema operativo cubre el mismo caso sin pedir nada al lector ni añadir un elemento más que mantener.

Fuente: Nielsen Norman Group

De la idea a la acción

¿Tu despacho necesita decisiones más claras?

Cuéntanos dónde quieres llegar. Pondremos estrategia, tecnología y medición al servicio de ese objetivo.

Hablemos
Cuándo conviene el modo oscuro en la web de tu despacho | IQLex