Introducción a Windows con alto contraste

13/02/2021

El sistema operativo incluye una opción para mejorar la legibilidad a través de un modo de alto contraste (desde Windows 7 en adelante). Esto es especialmente beneficioso para personas con baja visión o con deficiencia en la percepción del color. Al activarlo, es posible elegir entre distintas temáticas de alto contraste usando una cantidad de colores limitados, pero también se pueden escoger los colores a gusto personal. Estos colores son aplicados a la interfaz de Windows, aplicaciones desarrolladas por Microsoft y algunos navegadores.

Soporte en navegadores

Windows con alto contraste tiene soporte en Internet Explorer (10 y 11), Edge, Firefox (con ciertas diferencias) y en Chrome utilizando una saliendo del sitio: extensión de alto contraste o activando una opción experimental de colores forzados.

Actualización 25 de marzo 2021: a partir de su versión 89, Chrome tiene soporte por defecto, y no solo como una opción experimental.

Cómo activar el modo de alto contraste en Windows 10

  1. Selecciona el botón Inicio y, a continuación, selecciona configuración > facilidad de acceso > contraste alto.
  2. Para activar el modo de contraste alto, selecciona el botón de alternancia en Activar contraste alto. Windows puede mostrar una pantalla “Espere” durante unos segundos, después de los cuales cambiarán los colores de la pantalla.
  3. Selecciona el tema que más te convenga del menú desplegable Elegir un tema.

También se puede activar usando las teclas alt + shift + imp pant (imprimir pantalla).

Captura de pantalla de configuración facilidad de acceso en Windows 10 con la opción de alto contraste activada

Efecto en un sitio web

El modo de alto contraste anula los colores definidos por el autor y los reemplaza dependiendo del elemento HTML que es usado. Las propiedades de CSS afectadas son:

  • background-color
  • color
  • border-color
  • box-shadow
  • column-rule-color
  • outline-color
  • text-shadow
  • -webkit-tap-highlight-color
  • background-image

Si un sitio no está optimizado para funcionar con el modo de alto contraste de Windows, es normal encontrarse con distintos problemas como elementos, íconos, imágenes y focos invisibles o estados activos que no se logran distinguir.

Por ejemplo acá vemos la diferencia de un saliendo del sitio: componente de Material-ui usando React con y sin el modo de alto contraste activado:

Captura de pantalla de un componente switch en Material-ui. Existen 6 ejemplos mostrando el componente en distintos estados Captura de pantalla de un componente switch en Material-ui con modo de alto contraste activado. Los ejemplos son invisibles

Al activar Windows con alto contraste el componente es completamente invisible. El motivo es que ha sido construido dependiendo exclusivamente de colores de fondo, los cuales son ignorados por el sistema operativo. Los colores solo son forzados en algunos elementos html semánticos, y como este componente switch usa un elemento div, se vuelve invisible.

Consejos

Si bien muchas propiedades son sobrescritas, existen buenas prácticas que se pueden implementar para evitar los problemas más comunes.

Bordes

No dependas únicamente de colores de fondo para crear perímetros visibles en un elemento, ya que esto puede resultar en elementos invisibles en un modo de alto contraste. Ten además cuidado con quitar los bordes de elementos nativos como botones y controles de entrada.

Si no quieres que el elemento tenga un borde, puedes darle un color transparente. Esto permitirá que sea invisible cuando el modo no esté activado, pero será visible cuando lo esté. El motivo es que el color transparente del borde será reemplazado por otro color cuando está en modo de alto contraste, haciéndolo visible.

A continuación veremos ejemplos de cómo se ve un control de entrada con y sin modo de alto contraste en el navegador Edge.

Control de entrada con borde

El control de entrada tiene el borde por defecto del elemento nativo.

Etiqueta y un control de entrada con un borde gris en un fondo blanco Etiqueta y un control de entrada con modo de alto contraste activado. El fondo es negro y el borde del control blanco

Control de entrada sin borde

El borde ha sido removido, y se ha utilizado un color de fondo.

Etiqueta y un control de entrada sin borde y un color de fondo gris sobre un fondo de página blanco Etiqueta y un control de entrada con modo de alto contraste activado. El control no es visible

Control de entrada con borde transparente

Se ha utilizado un color de fondo, y un borde transparente solid 1px transparent.

Etiqueta y un control de entrada con un color de fondo gris y un borde transparente Etiqueta y un control de entrada con modo de alto contraste activado. El control tiene un borde de color blanco

Foco

Es bastante común y recomendable utilizar un estilo de foco personalizado que sea consistente en todos los navegadores y que tenga un buen contraste. Si bien se pueden utilizar distintas propiedades de css para crear un foco que cumpla con los requisitos del saliendo del sitio: criterio de conformidad contraste no textual de las pautas de accesibilidad, hay que tener cuidado con suprimir la propiedad outline dado que el resto de las propiedades (a excepción bordes) son ignoradas al usar Windows con alto contraste, lo que puede resultar en un foco invisible.

A continuación veremos ejemplos de como se ve con y sin modo de alto contraste en el navegador Internet Explorer 11.

Foco usando color de fondo

Puedes usar colores o sombras para crear estilos de focos personalizados, pero si suprimes la propiedad outline, el foco podría no ser consistentemente visible al usar el modo de alto contraste.

*:focus { outline: none; background: #000; color: #fff }
2 botones, uno en estado normal con fondo gris, otro en estado enfocado con un color de fondo negro 2 botones con modo de alto contraste activado. Ambos tienen un fondo negro y borde blanco

En modo de alto contraste no es posible diferenciar los estados del botón.

Foco usando un outline transparente

Si no quieres usar un outline, y prefieres usar otras propiedades para establecer un estilo de foco, la recomendación es usar un outline transparente.

*:focus { outline: solid 3px transparent; background: #000; color: #fff }
2 botones con un outline transparente, uno en estado normal con fondo gris, otro en estado enfocado con un color de fondo negro 2 botones con modo de alto contraste activado. Ambos cuentan con un borde blanco, pero el botón enfocado tiene un borde más grueso

Imágenes

En Internet explorer las imágenes usando la propiedad background-image serán quitadas. Si tienes imágenes usando sprites, en modo de alto contraste no serán visibles.

Captura de pantalla de Internet explorer 11 con una pestaña mostrando imagen de un gato Captura de pantalla de Internet explorer 11 en modo de alto contraste mostrando un fondo de color negro

Es posible utilizar una media query para hacerla visible en modo de alto contraste.

@media (-ms-high-contrast: active) { .elemento { background-image: url('img.png'); } }

Sin embargo, si estás usando una sprite de imágenes con íconos, es recomendable reemplazarla por elementos svg ya que existen métodos para que los colores de estos sean más fáciles de ver al activar el modo de alto contraste.

SVG

Las propiedades stroke y fill no son afectadas por Windows con alto contraste, por lo tanto un elemento svg puede tener cualquier color usando esas propiedades y el color no será sobrescrito. En algunos casos eso puede ser útil, pero si tienes un sistema de íconos puede generar resultados inesperados. Si el ícono tiene una propiedad fill con un valor de un color oscuro, será difícil de distinguir en una temática de alto contraste oscura.

ícono de la red social twitter con forma de pájaro y un color de borde negro sobre un fondo blanco ícono de la red social twitter con forma de pájaro en modo alto contraste. No se logra distinguir con el fondo

En vez de usar cualquier color directamente en el elemento svg, puedes usar currentColor , definir el color que desees en un elemento padre y usar un color de sistema en una media query de colores forzados que solo será visible al activar el modo de alto contraste.

.icono { color: #d4284d; svg { fill: currentColor; } } @media (forced-colors: active) { .icono { color: canvastext; } }

El valor de currentColor será definido por la propiedad color del elemento padre, y este será sobreescrito por el color de sistema al activar el modo de alto contraste, permitiendo que el elemento svg reciba un color visible independiente de la temática elegida por el usuario.

ícono de la red social twitter con forma de pájaro y un color de borde rojo sobre un fondo blanco ícono de la red social twitter con forma de pájaro en modo alto contraste, el borde es blanco sobre un fondo negro

Usar una media query

Existen media queries que devuelven parte del control al autor, y permiten sobrescribir los colores impuestos por el modo de alto contraste.

La media query -ms-high-contrast tiene soporte en Internet explorer y versiones antiguas de Edge (antes de estar basado en Chromium).

@media (-ms-high-contrast: active) { /* Reglas para todos los modos de alto contraste */ } @media (-ms-high-contrast: black-on-white) { /* Reglas para el modo de alto negro encima de blanco */ } @media (-ms-high-contrast: white-on-black) { /* Reglas para el modo de alto blanco encima de negro */ }

Es importante tener en cuenta que esta media query en algún momento dejará de tener relevancia, debido a la creación de la saliendo del sitio: media query forced-colors que será el estándar adoptado por distintos navegadores.

forced-colors actualmente solo tiene soporte en Edge (basado en Chromium) y está disponible como una opción experimental en Chrome y Firefox.

Actualización 25 de marzo 2021: a partir de su versión 89, Chrome tiene soporte por defecto, y no solo como una opción experimental.
Actualización 24 de junio 2021: a partir de su versión 89, Firefox tiene soporte por defecto, y no solo como una opción experimental.
@media (forced-colors: active) { /* Reglas cuando el modo de alto contraste se encuentra activado */ }

La media query detecta cuando un modo de colores forzados está activado, y nos devuelve el control sobre propiedades relacionadas con el color, pero antes debemos indicarle al navegador que no sobrescriba los colores del elemento al cual queremos aplicar estilos. Podemos hacer esto usando la propiedad forced-color-adjust. Su valores son:

  • auto: los colores del elemento son ajustados por el navegador, este es el valor por defecto.
  • none: los colores no son automáticamente ajustados por el navegador.

forced-color-adjust: none nos da la libertad de usar otros colores, ya que el navegador no va a sobrescribir los colores en el elemento que la use.

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

Es importante tener en cuenta que esta propiedad solo tiene soporte en Edge (basada en Chromium), y en Chrome cuando activas la opción experimental, en Firefox aun no, ni siquiera en la opción experimental.

Ampliando el soporte

Para garantizar un mejor soporte en distintos navegadores es posible hacer lo siguiente:

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

Así incluyes a Internet Explorer, Edge (pre y post Chromium) y en un futuro cercano a Chrome que debiese incluir soporte por defecto y no como una opción experimental.

Colores de sistema

A pesar de que con la propiedad forced-color-adjust tenemos la posibilidad de utilizar cualquier color, esto no es recomendable y debe ser evitado. El motivo es que un color estático no se va a ajustar a las paletas de colores predeterminadas del sistema, o una elegida por el usuario, para eso existen los colores de sistema.

Los saliendo del sitio: colores de sistema han sido estandarizados y su uso correcto debiese garantizar una buena legibilidad mediante el uso de una paleta de colores restringida, pero que se integrará correctamente con los colores forzados en modo de alto contraste. Los 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: 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.
  • 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 deshabilitado.

Artículos recomendados