Guía de Windows con alto contraste parte 1

¿Qué es Windows con alto contraste?

El sistema operativo incluye una opción que mejora la legibilidad del texto y facilita la lectura a través de un modo de alto contraste (desde Windows 7 en adelante). Esto puede resultar útil para personas con baja visión, personas que desean reducir el ruido visual para concentrarse mejor, o aliviar el cansancio en los ojos.

Al activarlo, es posible elegir entre distintas temáticas usando una cantidad de colores limitados que serán aplicados a la interfaz de Windows, algunos navegadores y aplicaciones desarrolladas por Microsoft. Sin embargo, también es posible escoger un esquema de color a gusto personal. Debido a que el usuario puede elegir los colores, el nombre Windows con alto contraste es un tanto engañoso. Es perfectamente posible crear una temática personal con bajo contraste.

Soporte en navegadores

Windows con alto contraste tiene soporte en Internet Explorer (10 y 11), Edge, Chrome y Firefox.

¿Cómo activar Windows con alto contraste?

En Windows 11 puedes activar el modo de alto contraste siguiendo estos pasos:

1. Selecciona el botón Inicio y luego selecciona Configuración > Accesibilidad > Temas de contraste.
2. Para activar los temas de contraste, selecciona el tema que quieras en el menú desplegable Temas de contraste y, a continuación, selecciona el botón Aplicar. Windows puede mostrar una pantalla "Espere" durante unos segundos, tras los cuales cambian los colores de la pantalla.
3. Para desactivar los temas de contraste, seleccione la opción Ninguno en el menú desplegable Temas de contraste y, después, seleccione el botón Aplicar. Windows puede volver a mostrar una pantalla "Espere" durante unos segundos, tras los cuales los colores de la pantalla vuelven a ser los predeterminados.

También puedes seguir los pasos en la página oficial de cómo cambiar el contraste de color en Windows.

¿Cómo funciona?

Cuando Windows con alto contraste es activado entra en un modo de colores forzados y el sistema aplica un número limitado de colores a algunos elementos HTML semánticos.

Los usuarios tienen la opción de elegir una temática que viene lista, o crear una personalizada.

Cambios en los colores

Una lista de propiedades CSS relacionadas con el color serán ajustadas y reemplazadas por colores de sistema. Las propiedades afectadas son:

• color
• fill
• stroke
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• scrollbar-color
• -webkit-tap-highlight-color
• background-color
• caret-color
• flood-color
• lighting-color
• stop-color

Adicionalmente, las siguientes propiedades también son afectadas:

Debido a que los colores en el modo de alto contraste solo son aplicados en algunos elementos HTML semánticos, es común encontrarse con componentes o widgets personalizados invisibles. Esto se debe a que a veces estos componentes no están creados con elementos semánticos o su visibilidad depende de una de las propiedades de CSS afectadas.

Media query

La media query forced-colors existe para detectar si se ha activado el modo de colores forzados que es el nuevo estándar y así es como funciona Windows con alto contraste. Esta media query te devuelve parte del control y te permite hacer ajustes en caso de ser necesario.

@media (forced-colors: active) {
  .elemento { ... }
}

A veces el diseño con el que nos toca trabajar no permite una correcta visibilidad del componente en modo de alto contraste. Esto es debido a que su visibilidad depende únicamente de una de las propiedades CSS que son afectadas por el modo y eso puede resultar en efectos no deseados como componentes invisibles o sin un área activable que se pueda distinguir.

En estos casos podemos usar la media query para que el componente sea visible en Windows con alto contraste y al mismo tiempo cumplir con lo que indica la especificación que nos entregaron o el diseño deseado.

Colores de sistema

Cuando el modo de alto contraste está activado, los colores en la página se ajustan a una paleta restringida.

No es recomendado utilizar colores estáticos cuando quieras hacer optimizaciones al modo de alto contraste. El motivo es que estos no se van a ajustar a las paletas de colores predeterminadas del sistema, o una elegida por el usuario. Para eso existen los colores de sistema.

Los colores de sistema han sido estandarizados y su uso correcto garantizan una buena legibilidad. Estos colores son:

• Canvas

  Color de fondo para contenido de aplicación o documentos
• CanvasText

  Color de texto para contenido de aplicación o documentos
• LinkText

  Color de texto para enlaces no activos, no visitados
• VisitedText

  Color de texto para enlaces visitados
• ActiveText

  Color de texto para enlaces activos
• ButtonFace

  Color de fondo para botones.
• ButtonText

  Color de texto para botones.
• ButtonBorder

  Color de borde para botones.
• Field

  Color de fondo para control de entrada.
• FieldText

  Color de texto para control de entrada.
• Highlight

  Color de fondo para elementos seleccionados.
• HighlightText

  Color de texto para elementos seleccionados.
• SelectedItem

  Color de fondo de los elementos seleccionados, por ejemplo una casilla de verificación seleccionada.
• SelectedItemText

  Color de texto de los elementos seleccionados.
• Mark

  Color de fondo para texto que ha sido marcado, por ejemplo usando el elemento <mark>.
• MarkText

  Color de texto para texto que ha sido marcado, por ejemplo usando el elemento <mark>.
• GrayText

  Color de texto para elemento desactivado.
• AccentColor

  Color de fondo de los controles de interfaz de usuario acentuados.
• AccentColorText

  Color de texto de los controles de interfaz de usuario acentuados.

Propiedad forced-color-adjust

La propiedad CSS forced-color-adjust permite evitar que un elemento entre en modo de colores forzados. Esto se puede lograr dándole un valor de none.

@media (forced-colors: active) {
  .elemento {
    forced-color-adjust: none;
  }
}

Esto significa que el elemento no se verá afectado por los colores forzados del sistema y tendrás completo control de su apariencia usando propiedades CSS relacionadas con el color. Esto puede resultar útil cuando la apariencia por defecto en modo de alto contraste no cumple con lo esperado y quieres ofrecer una experiencia más apropiada.

Expectativas del usuario y consejos

Si utilizas elementos semánticos los cambios que debes realizar deberían ser mínimos. Sin embargo, si has creado algún componente o widget personalizado es posible que estos no estén optimizados para un correcto funcionamiento en modo de alto contraste. En estos casos es muy común encontrarse con componentes invisibles o con estados que no se logran distinguir.

Los usuarios que usan esta opción tienen conocimiento sobre cómo se ven ciertos elementos al activarla, y eso les permite poder diferenciarlos. Es decir, tienen ciertas expectativas de cómo se deben ver los elementos en la página. Debido a esto es recomendable no hacer cambios que interfieran con la apariencia por defecto de los elementos nativos.

Cómo evitar elementos de interfaz invisibles

Esto suele ocurrir cuando tenemos componentes cuya visibilidad depende de una de las propiedades CSS que se ven afectadas por los colores forzados que son aplicados al activar el modo.

Un ejemplo común es un botón que no tiene un borde y cuya área activable sólo se puede distinguir por el color de fondo. Por defecto un botón en modo de colores forzados utilizará el color de sistema ButtonFace como color de fondo, y en las temáticas predeterminadas de alto contraste ese color tiene el mismo valor que el color de sistema utilizado para el color de fondo de la aplicación (Canvas). Como el color de fondo de la aplicación y el color de fondo del botón son el mismo en este caso, no existe forma de distinguir el área activable del botón.

A continuación tenemos una simulación de esto que consiste de dos elementos: un botón y un campo de entrada. Ninguno de estos elementos tienen un borde y solo puedes identificar que son activables por su color de fondo.

El color de fondo de la página utiliza el color de sistema Canvas. El de fondo del botón utiliza el color de sistema ButtonFace que como ya explicamos por defecto en la temáticas predeterminadas de Windows tiene el mismo valor de Canvas. El campo de entrada también utiliza como color de fondo el color de sistema Canvas. Como todos los colores son iguales, el resultado son componentes no se logran distinguir.

Consejos

Bordes

Una solución muy común para evitar estos componentes invisibles es no eliminar el borde. Si el diseño no incluye un borde puedes utilizar un borde transparente border: solid 1px transparent, o usar la media query de colores forzados:

@media (forced-colors: active) {
  button {
    border: solid 1px;
  }
}

Íconos

Si bien fill y stroke son parte de la lista de propiedades CSS afectadas por el modo de colores forzados, estas mantienen su color original en elementos SVG. En el caso de tener imágenes, ilustraciones o logos en este formato esto no es un problema. Sin embargo, si tienes un sistema de íconos en SVG hay situaciones en que estos deben tener un buen contraste, lo cual no está garantizado sin colores de sistema.

Aquí es donde resulta útil currentColor. Al utilizarlo como valor de la propiedad fill en el elemento SVG heredará el color del elemento padre permitiendo que el ícono reciba un color legible.

svg {
  fill: currentColor;
}