El modo oscuro ya no es una moda pasajera, es una expectativa. Cada vez más sistemas operativos, navegadores y apps ofrecen la opción de pasar a tonos oscuros para reducir la fatiga visual, ahorrar batería y adaptarse a distintos entornos de luz. Pero activar dark mode en una web no es tan simple como invertir colores, y si se hace sin criterio puede generar problemas serios de accesibilidad.
Antes de dar ese paso conviene revisar contraste, legibilidad, semántica y experiencia de usuario, porque un dark mode mal resuelto puede dejar fuera a personas con baja visión, dislexia o sensibilidad al brillo. Estos son los puntos que hay que mirar para que tu dark mode sea inclusivo de verdad y no solo un capricho estético.
Contraste que se pueda leer
El error más común es poner texto gris claro sobre fondo negro puro. A primera vista parece elegante, pero en la práctica resulta difícil de leer porque el contraste es demasiado bajo. Las pautas WCAG piden una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande, y por debajo de eso el texto empieza a costar.
En lugar de blanco puro (#FFFFFF) sobre negro (#000000), lo ideal es una paleta con tonos suavizados, como un gris muy oscuro (#121212) de fondo y blancos cálidos o grises claros para el texto. Esta combinación reduce el deslumbramiento y mejora la lectura en sesiones largas.
Colores de marca que sigan siendo visibles
La paleta de marca también necesita revisión. Un color que funciona perfecto en modo claro puede volverse ilegible en fondo oscuro: un azul medio pierde contraste, un amarillo saturado vibra demasiado contra el negro.
La solución pasa por revisar cada color de acento en dark mode y generar una variante adaptada cuando haga falta. Muchas guías de diseño recomiendan trabajar con dos paletas paralelas, light y dark, para mantener coherencia y accesibilidad en ambos modos. Un filtro global no basta, cada color hay que comprobarlo con herramientas de contraste.
Jerarquía visual y peso tipográfico
En modo oscuro las jerarquías cambian. El texto principal debe destacar con contraste suficiente, mientras que los elementos secundarios pueden ir en grises intermedios. Jugar solo con el color a veces no basta, y conviene reforzar la jerarquía con tamaños o pesos tipográficos distintos, algo que también aplica a cómo se elige una tipografía web legible en cualquier modo de color.
Los trazos finos y las tipografías muy delgadas pierden legibilidad en dark mode. Mejor optar por pesos regulares o semibold y evitar las fuentes ultralight, así el texto se percibe con claridad en cualquier dispositivo.
Estados de interacción que se noten
Botones, enlaces, campos de formulario y demás elementos interactivos necesitan estados de hover, focus y active igual de claros en dark mode. Un simple cambio de color puede pasar desapercibido si el contraste no acompaña.
Lo recomendable es combinar color con otras pistas visuales, subrayados, bordes o sombras, para evitar confusiones y mejorar la accesibilidad de personas con daltonismo o baja visión.
Iconos y gráficos adaptados
Los iconos e ilustraciones también hay que revisarlos. Un icono negro pensado para modo claro se pierde en un fondo oscuro, y lo mismo pasa con imágenes con transparencias que dependen del color de fondo para leerse bien.
La solución es generar versiones de iconos adaptadas al dark mode o aplicar estilos CSS que cambien el color de relleno según el esquema activo. Para imágenes complejas conviene probarlas en ambos modos y comprobar que el mensaje se mantiene.
Dislexia y sensibilidad visual
Algunas personas con dislexia leen más cómodas en fondo oscuro con texto claro, pero para otras el contraste extremo genera vibración visual, y lo mismo ocurre con quien tiene fotofobia o sensibilidad al brillo. Por eso no conviene imponer el dark mode como único diseño: lo ideal es dejar alternar entre modos y respetar la preferencia del sistema operativo con la media query prefers-color-scheme, en línea con lo que plantea el diseño inclusivo para usuarios neurodivergentes: cada persona necesita algo distinto, y la opción de elegir es la mejor práctica.
Dejar decidir al usuario no es solo buena práctica de accesibilidad, también es una forma de respetar necesidades y contextos de uso distintos.
Multimedia en dark mode
Vídeos, imágenes y anuncios incrustados pueden romper la coherencia del diseño en dark mode. Un vídeo con fondo blanco metido en una interfaz oscura resulta molesto, y lo mismo pasa con banners publicitarios que no contemplan variaciones de color.
Cuando se pueda, usa formatos transparentes o versiones adaptadas de los elementos multimedia. En el caso de iframes externos, comprueba si soportan dark mode o añade un contenedor que suavice el contraste con el resto de la página.
Pruebas con usuarios reales
Más allá de aplicar buenas prácticas, lo fundamental es validar el diseño con usuarios reales. Haz pruebas de usabilidad en ambos modos y observa si la navegación es fluida, si los textos se leen sin esfuerzo y si los estados interactivos se perciben con claridad.
Complementa esas pruebas con validaciones técnicas: usa contrast checkers para verificar ratios, comprueba el comportamiento en distintos dispositivos y navegadores, y testea con lectores de pantalla y navegación por teclado. Eso te permitirá pillar problemas que a simple vista pasan inadvertidos.
El dark mode no es un cambio estético, es un reto de accesibilidad. Activarlo sin revisión puede crear más problemas de los que pretende resolver, mientras que revisar contraste, tipografía, paleta, estados interactivos y adaptación de iconos garantiza una experiencia inclusiva y consistente.
No lo pienses como una obligación de moda, sino como la oportunidad de ofrecer a cada usuario la interfaz que mejor le encaja. Solo así se aprovechan sus ventajas sin sacrificar accesibilidad ni usabilidad.
