Conceptos

forced-colors

También: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

Consulta de medios CSS que detecta los modos de alto contraste del usuario —el Modo de alto contraste de Windows (HCM) y los Colores forzados de Chrome/Edge— para que los autores adapten el renderizado cuando el sistema anula los estilos del sitio.

forced-colors es la consulta de medios CSS que detecta cuándo el usuario ha activado un modo de colores forzados —habitualmente el Modo de alto contraste de Windows (HCM), que sustituye los colores elegidos por el sitio web por una paleta de sistema reducida definida por el usuario (blanco sobre negro, negro sobre blanco, amarillo sobre negro o una paleta personalizada).

El modo de colores forzados es ampliamente utilizado por personas con baja visión, en particular aquellas con sensibilidad a la luz o necesidades de contraste extremo. También lo usan como preferencia personal usuarios sin una discapacidad documentada que simplemente prefieren el alto contraste.

Qué hace realmente el HCM

Cuando el Modo de alto contraste de Windows está activo, el sistema operativo sustituye los colores del sitio por un conjunto reducido de colores de sistema:

  • Canvas — fondo de la página.
  • CanvasText — color de texto predeterminado.
  • LinkText — color de los enlaces.
  • VisitedText — color de los enlaces visitados.
  • ButtonText — texto de los botones.
  • ButtonFace — fondo de los botones.
  • HighlightText / Highlight — colores del texto seleccionado.
  • GrayText — texto deshabilitado.
  • Mark / MarkText — texto resaltado.

Los navegadores en modo de colores forzados reemplazan la mayoría de los colores definidos por el autor por estos colores de sistema. También eliminan las imágenes de fondo y restablecen varias propiedades visuales a los valores predeterminados del sistema.

Esto es intencionado: el usuario ha elegido una paleta de contraste que funciona para él, y no desea que el sitio la anule. La responsabilidad del sitio es cooperar, no resistirse.

La consulta de medios CSS

El autor detecta el modo de colores forzados con:

@media (forced-colors: active) {
  /* el usuario está en HCM o equivalente; adaptar el CSS aquí */
}

El valor asociado prefers-color-scheme es independiente: un usuario puede estar en modo de colores forzados oscuro (paleta de sistema blanco sobre negro) y que la consulta prefers-color-scheme devuelva light porque el usuario no ha seleccionado explícitamente el «modo oscuro».

Qué falla en producción

  • Las imágenes de fondo se vuelven invisibles. Los colores forzados eliminan las imágenes de fondo. Si el icono de «expandir» es un SVG de imagen de fondo sin texto alternativo, el usuario no verá nada. Solución: usar <svg> o iconos en línea con currentColor para que adopten el color CanvasText; o proporcionar un texto alternativo.
  • Los bordes desaparecen. Algunos bordes se eliminan o se reemplazan por bordes del color CanvasText. La jerarquía visual que dependía de colores de borde sutiles desaparece. Hay que revisar los bordes de los componentes en HCM.
  • Los indicadores de foco dejan de funcionar. Los anillos de foco personalizados dibujados con box-shadow pierden su color. Usar outline (que sí se preserva) o detectar los colores forzados y proporcionar un valor alternativo basado en colores de sistema.
  • Los elementos visibles solo al pasar el cursor desaparecen permanentemente. Los componentes tipo tooltip que dependen de estados hover con imagen de fondo fallan.
  • forced-color-adjust: none. Algunos diseñadores usan esta propiedad CSS para excluir un elemento específico del procesamiento de colores forzados. Esto casi siempre es incorrecto: significa que el usuario pierde los colores que pidió explícitamente. Usar con mucha cautela, solo para elementos genuinamente decorativos en los que la identidad del diseño es esencial (logotipos, iconos de marca), y nunca en texto o controles interactivos.

Cómo probar

En Windows: Configuración → Accesibilidad → Temas de contraste → elegir una de las paletas integradas (Acuático, Desierto, Crepúsculo, Cielo nocturno) y recargar la página. Chrome y Edge adoptarán la configuración del sistema; Firefox utiliza su propio interruptor de colores forzados en los ajustes del navegador.

La mayoría de los problemas se detectan en la primera inspección: iconos ausentes, bordes invisibles, anillos de foco rotos. Se corrigen con CSS basado en colores de sistema dentro de la consulta de medios forced-colors: active.