Petición para no forzar el uso del modo oscuro

 (iamvishnu.com)
2 puntos por GN⁺ 2025-01-21 | 1 comentarios | Compartir por WhatsApp
  • Si un sitio web solo ofrece modo oscuro, puede causar fatiga visual e incomodidad a algunas personas al leer textos largos, por lo que hace falta ofrecer opciones o combinaciones de colores más cómodas
  • El punto clave no es el modo oscuro en sí, sino la relación de contraste entre el texto y el fondo; texto blanco puro sobre fondo negro absoluto puede resultar pesado por su contraste de 21:1
  • Si se usa texto gris #888888 sobre fondo negro, la relación de contraste baja a 5.9:1, lo que sirve como ejemplo de un modo oscuro más cómodo de leer que uno con contraste excesivo
  • WCAG 2.1 solo exige una relación mínima de contraste de 4.5:1 para texto normal y no establece un límite máximo, así que una combinación de 21:1 también puede considerarse accesible según la norma
  • El requisito de Maximum text contrast en el borrador de WCAG 3.0 fue eliminado en la actualización del 4 de septiembre de 2025, y por ahora, cuando un texto fuerza el modo oscuro, hace falta recurrir a soluciones temporales como sobrescribir el CSS manualmente

Casos en los que el modo oscuro forzado dificulta la lectura

  • Hay muchos sitios web y blogs personales diseñados solo para modo oscuro, y en algunos casos los ojos pueden empezar a sentirse incómodos antes de leer siquiera un párrafo
  • El modo oscuro es útil en ciertas situaciones, pero cuando se impone sin dar opción al usuario, termina siendo una mala experiencia de uso
  • Después de leer un texto largo en modo oscuro, los ojos pueden no adaptarse de inmediato y puede sentirse como si siguieran apareciendo franjas horizontales

El centro del problema es la relación de contraste

  • El factor clave que determina la incomodidad en modo oscuro es la relación de contraste entre el texto y el fondo
  • Si se coloca texto blanco puro sobre un fondo negro absoluto, la relación de contraste es de 21:1
    • Esta combinación puede cansar la vista y dificultar la lectura
  • Si se usa texto gris #888888 sobre fondo negro, la relación de contraste baja a 5.9:1
    • Es un ejemplo de una combinación de colores que, aun siendo modo oscuro, puede leerse con más comodidad
  • Tener una relación de contraste más alta no siempre es mejor y, en modo oscuro, un contraste excesivo puede aumentar la incomodidad

Lo que los criterios WCAG no cubren

  • Actualmente, WCAG 2.1 SC 1.4.3 exige una relación mínima de contraste de 4.5:1 para texto normal
  • WCAG 2.1 no establece ningún límite de contraste máximo
    • Por eso, una combinación como texto blanco puro sobre negro absoluto, con contraste de 21:1, puede considerarse totalmente accesible según la regla
    • Aunque pueda resultar incómoda para muchas personas, la guía actual no aborda el problema del contraste excesivo en modo oscuro
  • En WCAG 3.0 se planeaba añadir Maximum text contrast como requisito exploratorio
    • Según la actualización de diciembre de 2025, este requisito fue eliminado en la actualización del borrador de WCAG 3.0 del 4 de septiembre de 2025
    • El issue de GitHub sobre la matemática del contraste sigue abierto

Soluciones alternativas posibles hoy

  • Si un texto importante solo está disponible en modo oscuro forzado, se puede sobrescribir el CSS desde las herramientas para desarrolladores del navegador para invertir los colores
  • Si no se quiere usar un plugin aparte, las herramientas para desarrolladores siguen siendo una solución temporal hasta que aparezca una mejor

Situaciones en las que el modo oscuro sí encaja bien

  • No se trata de rechazar el modo oscuro en sí; de hecho, se prefiere en las siguientes situaciones
    • Al leer en una pantalla OLED en una habitación oscura, por ejemplo al leer en el teléfono antes de dormir
    • Al escribir código, ya que casi todos los IDE ofrecen por defecto un modo oscuro con una relación de contraste cómoda
    • Cuando el modo oscuro de un sitio web tiene una relación de contraste cómoda
  • Después de la publicación, en la discusión de Hacker News hubo tanto acuerdo como críticas, y se debatieron temas como la elección inicial entre modo oscuro y claro en los OEM, la importancia del contraste, experiencias personales, condiciones médicas, accesibilidad y formas de sortear el problema

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-01-21
Opiniones de Hacker News

  • El modo oscuro originalmente se parecía más al valor predeterminado tradicional.
    Así eran las primeras pantallas monocromas negras con letras verdes/ámbar, el modo de texto DOS gris sobre fondo negro, las letras azul claro sobre fondo azul oscuro del C-64 y el gris/blanco sobre fondo negro del Apple II.
    Incluso en las GUI, Amiga tenía un fondo azul oscuro en el Workbench predeterminado, y el usuario podía elegir todas las paletas.
    Fue Microsoft Windows el que, en la mayoría de las apps, puso como predeterminado texto negro sobre pantalla blanca con el argumento de que se parecía al papel; pero aunque el papel sea blanco, no es un blanco luminoso, así que esa transición fue dolorosa.
    Me alegra que el modo oscuro haya vuelto, pero se necesita una opción, no un modo oscuro impuesto; y ojalá el modo claro tampoco fuera blanco al brillo máximo.

    • El modo oscuro no es el valor predeterminado tradicional; el papel era fondo blanco con texto negro.
      No hay que dejar el dispositivo o monitor en un blanco luminoso, sino bajar el brillo para que se vea parecido al papel que está al lado.
      Tampoco fue Windows el que cambió el paradigma: entre los dispositivos de consumo ampliamente difundidos, la Mac llegó antes, y su CRT integrado era menos brillante que el papel bajo la iluminación tradicional de oficina.
      Las primeras computadoras usaban esquemas de color oscuros porque tenían baja resolución y el brillo de los píxeles se corría, lo que facilitaba la lectura; a medida que la tecnología mejoró, ese problema desapareció, y tanto en pantalla como en impresos, el texto oscuro sobre fondo claro resulta más cómodo para la vista.
    • La relación de contraste de los CRT antiguos es completamente distinta a la de las pantallas LCD/IPS/OLED modernas.
      También se consideraba que el ámbar y el verde eran más cómodos que las letras blancas, y la diferencia es tan grande que la comparación misma se vuelve difícil.
      Si en lugar de negro absoluto se usa un fondo con cierto nivel de brillo, el modo oscuro podría resultar aceptable para más personas, pero entonces se pierden la mayoría de las ventajas de OLED.
    • Decir “valor predeterminado tradicional” no es algo absoluto.
      Es cierto que el DOS/Unix de las primeras PC usaba fondo negro por las características de las pantallas de la época, pero antes de eso la información se compartía en papel blanco, y los inicios de Internet volvieron a traer el texto negro sobre fondo blanco.
      Al final no existe algo como un valor predeterminado auténtico; depende de cuándo te sumaste.
    • Aquella época fue un momento muy breve en el que todo se estaba definiendo, y las restricciones de costo, más que las preferencias personales o la ergonomía, determinaban la potencia de cómputo y la forma de mostrar la información.
      Que Amiga Workbench tuviera un fondo azul oscuro también se debía al costo. Se esperaba que mucha gente lo conectara a un televisor mediante salida de video compuesto, y las letras blancas sobre fondo azul eran una combinación que los televisores mostraban bien.
      El monitor 1080 costaba alrededor de un tercio del precio de una A1000, y es muy probable que muchas A500, después de abrirse en Navidad, pasaran un buen tiempo conectadas a un televisor.
      Probé casi todos los procesadores de texto para Amiga, y salvo WordPerfect, todos tenían texto negro sobre fondo blanco; WordPerfect también se podía cambiar, pero simplemente mantuvo el azul/blanco predeterminado para coincidir con DOS.
    • El modo oscuro era normal en los primeros tiempos de los CRT, y en ese entonces la mayoría de los CRT se refrescaban a 60 Hz o menos.
      Los fondos oscuros hacían que el parpadeo fuera menos perceptible, y cuando en los años 90 se volvieron comunes los CRT con frecuencias de actualización más altas, el problema del parpadeo disminuyó y el modo claro pasó a ser el predeterminado.

  • Espera: si un sitio web solo tiene letras claras sobre fondo oscuro, eso es parte del tema y la atmósfera del sitio.
    El modo oscuro solo existe cuando también hay un modo claro, y lo mismo vale al revés.
    No se puede obligar a un sitio web que no quiere a mantener ambos modos.

    • Eso ya aparece al principio del texto.
      Dice que, si el modo oscuro es parte de la identidad de la marca, se elija una relación de contraste cómoda para el texto.

  • El modo claro predeterminado y no configurable existió durante mucho tiempo, y para compensarlo también hay plugins como Dark Reader.
    Pero, en sentido contrario, no hay mucha infraestructura para imponer el modo claro.
    En la mayoría de las situaciones, creo que el modo claro es mejor que el modo oscuro. La única situación en la que el modo oscuro es mejor es cuando estás sentado en una habitación oscura y la pantalla es la única fuente de luz, lo cual por lo general no es un entorno saludable.
    El modo oscuro se parece más a una herramienta de accesibilidad; es mejor prender la luz o dormir.
    En un entorno sin luz, el modo claro puede resultar molesto para leer, pero en un entorno luminoso el modo oscuro es casi ilegible. Si intentas leer una UI en modo oscuro en el teléfono durante un día brillante de pleno verano, cuesta verla incluso con el brillo al máximo.

    • En mi sistema, el plugin Dark Reader también tiene una opción para forzar el tema claro.
      De hecho, los navegadores tienen una función para configurar el color de fondo y de texto predeterminados, así que si los sitios web simplemente respetaran esos valores salvo cuando realmente lo necesitan, no harían falta extensiones.
      Es lamentable vivir en un mundo donde hace falta una extensión para “respetar de verdad mis preferencias”, pero si hace falta, vale la pena saber que al menos admite opciones para ambos lados. Toda la situación es bastante absurda, pero hay soluciones alternativas.
    • Siempre me pareció raro que tanta gente, sin una razón médica, quiera sentarse en una habitación oscura como troll de cueva.
      Ahora todos los sistemas operativos tienen modos conmutables y pueden comunicárselo al navegador. El navegador puede, y debería, adaptarse a la configuración reportada por el sistema operativo.
      El diseño de UI, salvo algunas islas de racionalidad como Paul Fitts, es en gran parte una cadena de ambientes y modas mal aplicados.
      Primero, como el contraste era malo, se usa contraste insuficiente; luego, como el brillo era malo, se usa brillo insuficiente. Después se vuelve a descubrir por qué el contraste y el brillo eran importantes desde el principio, y el ciclo continúa.
    • Como alguien que tuvo cataratas, el modo claro me resultaba muy difícil de leer.
      Era como mirar de frente las luces altas de un auto; usaba el plugin Dark Reader, pero no era lo mismo que cuando un sitio admite bien el modo oscuro.
    • El modo oscuro también puede ser mejor cuando el brillo de la pantalla está configurado demasiado alto.
    • Me gusta el modo Pure Black porque en mi pantalla los píxeles negros realmente se apagan.
      Incluso a plena luz del día me resulta mucho más cómodo. Ojalá el modo Pure Black fuera una opción separada del modo oscuro/claro, como en algunas apps de Android.
      Por ahora me las arreglo bajando el brillo al mínimo en Dark Reader, pero es algo tosco.

  • Este blog en sí no respeta la configuración del dispositivo y les impone a los lectores el modo claro.
    El autor cambia de postura a mitad de camino y concluye que el problema no es el modo oscuro, sino el contraste de color.

    • El blog del autor también define explícitamente color: #111; y background-color: #fdfdfd;, lo que da una relación de contraste de 18.56:1.
    • El punto real es la relación de contraste, así que el título se siente un poco deshonesto.
      Irónicamente, al final dice que usará un filtro de inversión como solución alternativa, pero si alguien que prefiere el modo oscuro usa algo como el Invert Mode de Vivaldi en el sitio del autor, con su fuerte fondo blanco y texto negro, obtiene justo esa relación de contraste oscura de la que el autor se queja.

  • Ojalá no se les imponga a los usuarios un bajo contraste.
    No todo el mundo ve contenido en una pantalla calibrada a más de 100 nits y con una iluminación ambiente brillante pero razonable.
    Las combinaciones gris sobre gris recomendadas pueden ser difíciles de leer, por ejemplo, al verlas con el brillo en 0 en una habitación completamente oscura o bajo luz solar directa.
    Toda la gama de colores SDR está para usarse; no es HDR, que haya que limitar para no dejar ciegos a los usuarios.

    • Las combinaciones gris sobre gris también pueden ser difíciles para personas mayores.

  • No es solo una cuestión de claro contra oscuro. Me gustaría que los sitios web en general respetaran las preferencias de mi sistema.
    Si el tema de mi sistema operativo es texto morado en Comic Sans sobre un fondo de ladrillos amarillos, el navegador también debería respetarlo.
    Si quiero leer texto ocupando todo el ancho del navegador, pero me obligan a verlo en una columna estrecha de 5 pulgadas centrada, no debería tener que hacer magia en la configuración del navegador, invocar CSS de sobrescritura ni instalar una extensión.
    El navegador debería simplemente decir: “desarrollador web, ni modo. Ganan las preferencias del usuario”.
    El navegador les cedió demasiado control a los desarrolladores para que puedan ignorar lo que quiere el usuario, y el término “agente de usuario” ya no le queda. Ahora se parece más a un agente del desarrollador.

    • Lo del fondo amarillo quizá no se pueda evitar, pero forzar Comic Sans es fácil en la configuración de Firefox: ponerla como fuente preferida y desactivar “permitir que las páginas elijan sus propias fuentes”.
      Yo lo uso así y navegar por la web mejora muchísimo.
    • ¿Las apps de escritorio u otras cosas realmente respetan esa configuración?
    • Yo no quiero eso; quiero elegir el esquema por separado para cada sitio o app.
      En algunos lugares el modo oscuro es excelente, y en otros es un desastre. Lo mismo pasa con los temas blancos.
    • Suena a que quieres usar el modo lectura de forma predeterminada. Algunos navegadores lo permiten.

  • Demasiados desarrolladores web asumen que a todo el mundo le gusta el modo oscuro y lo ponen como valor predeterminado, justificándose con que hay un botón para alternar entre Dark/Light Mode.
    Sorprende que incluso sitios web nuevos muchas veces no detecten las preferencias del usuario y simplemente las dejen fijas.
    Como desarrollador, puedes usar la propiedad color-scheme de CSS para indicar con qué esquemas de color puede renderizarse cómodamente un elemento.
    :root { color-scheme: light dark; }
    element { light-dark(light-color-code, dark-color-code); }
    Como usuario de macOS, tengo preferencias mezcladas: el modo oscuro me gusta para cosas como la barra de menús o el IDE, pero prefiero el claro para leer, escribir y navegar.
    En System Preferences, configura el tema en LIGHT, luego ejecuta defaults write -g NSRequiresAquaSystemAppearance -bool Yes; después cierra sesión y en System Preferences configura el tema en DARK.
    Para volver al tema predeterminado, ejecuta defaults write -g NSRequiresAquaSystemAppearance -bool No.

    1. https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...

  • Lo curioso es que el ejemplo de “texto fácil de leer” del blog a mí me resulta realmente difícil de leer por su bajo contraste.
    Me pregunto qué condición visual o qué monitor usa.

    • Si tuviera que adivinar, usa un monitor HDR carísimo hecho para diseñadores y aplica toda la gama de colores a todo.
    • No entiendo esa obsesión por destruir la legibilidad con gris sobre gris sobre gris.
      Es insoportable, feo y difícil de leer. Ojalá todos dejaran de hacerlo.
    • Yo también prefiero el modo claro, pero en mi pantalla de unos 300 dólares el texto gris es mucho más fácil de leer que el texto blanco.

  • Hay una API web para saber si el usuario está en modo oscuro, así que basta con usarla.
    @media (prefers-color-scheme: dark) { CSS Rules here... }

  • El modo oscuro fue un error.
    Los primeros LCD eran oscuros, así que todos subieron mucho el blanco para compensarlo, y ahora que los LCD ya alcanzaron el nivel necesario, eso termina quemándole los ojos a bastante gente.
    Por eso cada vez hay que soportar dos modos, y el ícono de modo oscuro ridículamente feo de Apple muestra lo difícil que es hacerlo bien.
    Idealmente, creo que habría que devolver los colores base de las interfaces de computadora al gris, como en la época en que los CRT brillantes eran el estándar.
    Eso además tendría la ventaja de dar pistas de profundidad a los elementos de la UI, algo que también deberíamos recuperar.

    • Eso es solo una preferencia personal.
      La clave es que sea configurable, para que los usuarios puedan establecer sus propias preferencias.
      Personalmente, el modo claro me deslumbra, me lastima los ojos y me cansa. Depende de cada persona.
    • Los CRT también tenían perillas para ajustar fácilmente el brillo y el contraste, así que cualquiera podía adaptar rápido la pantalla a sus preferencias, ya fuera texto negro sobre fondo blanco o al revés.
    • ¿Eso de “poner el color base en gris” no es lo que ya hace el modo oscuro en la mayoría de los casos?
      El modo claro por lo general no es blanco puro, y el modo oscuro usa tonos de gris.