Modo oscuro y paletas de color accesibles, bien hechos
El modo oscuro ya no es opcional, sino esperado; pero un contraste mal calculado daña la marca y la accesibilidad a la vez. Cómo configurarlo correctamente.
Equipo de rabbitclipPublicación: 5 min. de lectura
En breve
El modo oscuro no consiste solo en un fondo oscuro con texto claro; hecho mal, el ratio de contraste baja, el texto se vuelve difícil de leer y el color de marca se percibe como un tono distinto sobre fondo oscuro. El ratio de contraste debería ser de al menos 4,5:1 para texto de tamaño normal y de al menos 3:1 para titulares grandes (W3C WCAG 2.1, Contrast Minimum).
Esto no es solo cuestión de gusto. En la UE, la Ley Europea de Accesibilidad (Directiva (UE) 2019/882) está en vigor desde junio de 2025, y ciertos servicios digitales deben cumplir sus requisitos de accesibilidad (EUR-Lex, Directive 2019/882). Para un negocio con clientes en el Reino Unido o la UE, esto es cada vez más una cuestión de cumplimiento, no solo de buena práctica de diseño.
A continuación, las cuatro partes de una buena configuración de modo oscuro: contraste, color de marca, coherencia y el proceso de prueba.
Cómo se calcula el ratio de contraste
El ratio de contraste mide la diferencia de luminosidad relativa entre el color del texto y el del fondo; 1:1 significa ninguna diferencia, 21:1 es tan nítido como negro sobre blanco. El estándar WCAG considera 4,5:1 como mínimo para texto normal y 3:1 para texto grande (18 puntos en negrita o mayor, o 24 puntos normal) (W3C WCAG 2.1).
No hace falta calcularlo a mano; el verificador de contraste de las herramientas de desarrollo del navegador, o cualquiera de las herramientas gratuitas en línea, da un ratio instantáneo al introducir los colores. Un fondo gris oscuro con texto gris medio es un error común en el tema oscuro de un fabricante de generadores; el ratio suele quedar por debajo de 3:1, y la legibilidad se resiente.
Cómo se comporta un color de marca sobre fondo oscuro
Un color de marca que se ve vivo sobre fondo claro puede verse apagado o, con la misma frecuencia, deslumbrante sobre fondo oscuro; el mismo valor no transmite lo mismo en ambos fondos. Por eso el modo oscuro necesita su propia variante del color de marca, no una copia exacta del mismo código.
El rojo de marca de un club deportivo, que se lee con claridad en blanco, puede parecer un letrero de neón en negro y cansar la vista; una versión con la saturación algo reducida mantiene la marca reconocible sin ese cansancio.
Coherencia: una decisión de componentes, no solo un cambio de color
El modo oscuro no termina en el color de fondo y de texto; las sombras, los bordes, los iconos y los fondos detrás de las imágenes merecen una segunda mirada. Una tarjeta separada por una sombra sutil en fondo claro puede desaparecer por completo en fondo oscuro; un borde fino asume entonces el trabajo que hacía la sombra.
Las imágenes son un asunto aparte: una foto de producto sobre fondo blanco puede verse como una caja blanca fuera de lugar en una página oscura; la solución es una versión con fondo transparente o un marco suave alrededor.
Prueba: quién comprueba, con qué herramienta
Antes de publicar nada, cada par de texto y fondo necesita su propia comprobación de contraste, y los elementos funcionales como botones, etiquetas de formulario y mensajes de error no deberían saltarse. Si el mensaje de error de un formulario es un rojo de bajo contraste, un visitante puede pasarlo por alto por completo y reenviar el formulario varias veces sin saber por qué.
- Cada par texto/fondo pasado por un verificador de contraste
- Una variante de modo oscuro definida aparte para el color de marca
- Imágenes e iconos comprobados por separado en ambos modos
- Cambio automático según la preferencia del sistema (prefers-color-scheme) probado
¿Todo sitio necesita modo oscuro?
No todos los sitios lo necesitan; pero para un público que usa un producto técnico (software, una app, un panel), las expectativas son altas. Un sitio de folleto puede dejar el modo oscuro como prioridad baja, en cuyo caso el esfuerzo se invierte mejor en dejar bien el contraste del modo claro, porque la accesibilidad no es un asunto exclusivo del modo oscuro.
Confiar solo en el color: el riesgo del daltonismo
Marcar un campo inválido solo con rojo puede no significar nada para un visitante con daltonismo; una parte considerable de la población presenta alguna forma de daltonismo rojo-verde. El color siempre debería ir acompañado de un icono o de texto, nunca llevar el mensaje por sí solo.
Si un indicador de stock muestra «disponible» en verde y «agotado» en rojo sin ninguna etiqueta que lo acompañe, esa información nunca llega a algunos visitantes; añadir un pequeño icono o una etiqueta de texto corta evita que el color sea la única señal.
Cómo se recuerda una preferencia manual
Cuando un visitante cambia del modo oscuro al modo claro a mano, esa elección debería mantenerse en su siguiente visita; volver a la preferencia del sistema en cada carga de página es una forma fácil de molestar al visitante. La preferencia vive en el almacenamiento local del navegador y se lee de ahí cada vez que carga la página.
Sin ese recordatorio en el sitio de un estudio de videojuegos, un visitante tiene que repetir el mismo ajuste en cada visita; un detalle técnico menor, pero un punto de fricción que se repite.
En lugar de depender solo del almacenamiento local, el ajuste también puede vivir como una preferencia de cuenta en el servidor; para un visitante que ha iniciado sesión, eso lleva la elección de un dispositivo a otro.
Con el ratio de contraste correcto, el modo oscuro protege la marca y mantiene el sitio legible para un público más amplio. rabbitclip entrega ambos modos de un sistema de diseño probados en contraste; podemos revisar juntos el ratio de contraste de su sitio actual.
Preguntas frecuentes
¿Cuál es el ratio de contraste mínimo?
4,5:1 para texto normal, 3:1 para titulares grandes; ambas cifras vienen del estándar W3C WCAG 2.1.
¿El modo oscuro debería activarse automáticamente?
Se recomienda el cambio automático según la preferencia del dispositivo o navegador (prefers-color-scheme), junto con un interruptor manual.
¿Nos afecta la Ley Europea de Accesibilidad?
Es una cuestión cada vez más relevante para productos digitales que atienden a clientes en la UE o el Reino Unido; el alcance depende del tipo de negocio.
¿El color de marca debería cambiar en modo oscuro?
Por lo general sí; una variante con la saturación ajustada funciona mejor que reutilizar exactamente el mismo tono.
¿Qué tan común es el daltonismo?
Afecta a una parte considerable de la población, por eso la información nunca debería depender solo del color.
