Modo oscuro, alto contraste y preferencias del usuario

Cada vez más personas configuran su sistema operativo según sus necesidades: tema oscuro para reducir la fatiga o el deslumbramiento, alto contraste de Windows para ver con muy poca visión, texto más grande, menos animaciones, colores invertidos. Un diseño accesible no impone una única apariencia: respeta estas preferencias y se asegura de que, cuando el sistema cambia los colores, la página sigue siendo usable. Esta lección explica qué preferencias existen, cómo detectarlas con CSS y qué errores hay que evitar.

Por qué importan las preferencias del sistema

Las preferencias del usuario son, en muchos casos, tecnología de apoyo: una persona con fotofobia, migraña crónica o cataratas puede depender del modo oscuro; una persona con baja visión severa, del modo de alto contraste; alguien con trastorno vestibular, de la reducción de movimiento. Las WCAG no exigen ofrecer un modo oscuro, pero si la web lo ofrece (y más aún si lo aplica automáticamente según la preferencia del sistema), debe evaluarse y cumplir los mismos criterios de contraste que el claro, y varios criterios (1.4.3, 1.4.11, 2.3.3) se ven afectados directamente por cómo se trata cada modo.

Modo oscuro

El modo oscuro se detecta con la media query prefers-color-scheme. Buenas prácticas:

• Respeta la preferencia del sistema por defecto y, si ofreces un selector manual en la web, recuerda la elección.
• Vuelve a medir el contraste. Invertir los colores no garantiza 4,5:1. El texto blanco puro sobre negro puro (21:1) deslumbra y produce el efecto «halo» en personas con astigmatismo; es preferible un gris muy claro (#E0E0E0 o similar) sobre un gris muy oscuro (#121212), que mantiene ratios muy altos sin el deslumbramiento.
• Los colores de acento cambian. Un azul de enlace que cumple sobre blanco (#0056B3, 7,0:1) sobre #121212 da solo 2,7:1. Necesitarás una variante más clara del mismo color para el tema oscuro; por eso, como viste en la lección sobre paletas, la matriz de combinaciones se repite para cada tema.
• Imágenes y logotipos: prepara versiones para fondo oscuro o usa SVG con currentColor. Un logotipo negro sobre fondo oscuro desaparece.
• Sombras y bordes: en oscuro, las sombras dejan de verse; usa bordes o cambios de tono para delimitar componentes (recuerda 1.4.11).

:root {
  --fondo: #FFFFFF; --texto: #1A1A1A; --enlace: #0056B3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121212; --texto: #E0E0E0; --enlace: #8AB4F8; /* 8,9:1 sobre #121212 */
  }
}
body { background: var(--fondo); color: var(--texto); }
a { color: var(--enlace); text-decoration: underline; }

Alto contraste de Windows (modo de contraste forzado)

El «Contraste alto» de Windows (en Windows 11, «Temas de contraste») sustituye todos los colores de la página por una paleta del sistema: fondo, texto, enlaces, botones, texto seleccionado. El navegador lo aplica a todo, ignorando casi todo el CSS de color. Para quien lo usa es imprescindible, y rompe muchos diseños:

• Los fondos de color desaparecen, incluidos los de botones: un botón que solo era un rectángulo de color pasa a ser texto suelto. Solución: dar a los botones un borde (aunque sea transparente en el tema normal; en contraste forzado se pinta con el color del sistema).
• Las imágenes de fondo CSS no se adaptan: los degradados se eliminan y un icono puesto como background-image conserva sus colores originales, de modo que un icono oscuro puede quedar invisible sobre el fondo negro del tema. Usa <img> con su alternativa o SVG en línea con currentColor.
• Los indicadores de estado basados en color de fondo (pestaña activa, fila seleccionada) se igualan. Añade un indicador adicional (borde, subrayado, icono).
• El outline del foco se respeta: no lo elimines nunca con outline: none sin alternativa.

La media query forced-colors: active permite ajustes específicos, y las palabras clave de color del sistema (CanvasText, LinkText, ButtonText, Highlight) permiten usar la paleta del usuario sin romperla. La propiedad forced-color-adjust: none desactiva la sustitución en un elemento, pero solo debe usarse en casos muy justificados (un selector de color, por ejemplo), porque anula la ayuda que la persona ha pedido.

/* El botón conserva su forma en contraste forzado gracias al borde */
.boton { background: #0056B3; color: #fff; border: 2px solid transparent; }

@media (forced-colors: active) {
  .pestana-activa { border-bottom: 3px solid CanvasText; }
  .icono-svg { fill: currentColor; }
}

Otras preferencias

• prefers-reduced-motion: la persona ha pedido menos animaciones. Desactiva o reduce transiciones, parallax, autoplay de carruseles y animaciones decorativas. Se relaciona con 2.3.3 Animación por interacciones (AAA) y con 2.2.2 Poner en pausa, detener, ocultar (A).
• prefers-contrast: more: la persona quiere más contraste (en macOS, «Aumentar contraste»). Puedes engrosar bordes y oscurecer textos secundarios.
• prefers-reduced-transparency: evita fondos translúcidos que reducen la legibilidad.
• Tamaño de letra del sistema: si usas unidades rem, la página respeta automáticamente el tamaño de letra configurado en el navegador o en el sistema.
• Hojas de estilo del usuario y extensiones (lectores de dislexia, modos de lectura, inversión de colores): funcionan si tu HTML es semántico y tu CSS no fuerza colores con !important por todas partes.

Resumen

• Las preferencias del sistema (modo oscuro, alto contraste, movimiento reducido) son tecnología de apoyo para muchas personas; detéctalas con media queries.
• En modo oscuro vuelve a medir el contraste: evita blanco puro sobre negro puro y prepara variantes de los colores de acento y del logotipo.
• En contraste forzado desaparecen los fondos de color y las imágenes CSS no se adaptan a la paleta: usa bordes en botones, SVG en línea y colores del sistema; no uses forced-color-adjust: none salvo casos justificados.
• prefers-reduced-motion, prefers-contrast y unidades rem completan el respeto a las preferencias.
• Un widget de accesibilidad no sustituye al respeto de las preferencias del sistema ni a un código accesible.