Windows con alto contraste en la práctica

25/06/2021

En un artículo anterior hicimos una introducción a Windows con alto contraste donde explicamos qué es, enseñamos conceptos y ofrecemos consejos sobre cómo desarrollar un sitio para que funcione correctamente al activar esta opción que permite una mejor legibilidad. En esta ocasión asumimos un conocimiento previo sobre el tema y veremos ejemplos prácticos sin mencionar a fondo algunos de sus conceptos.

Colores de sistema y media query

Es recomendable el uso de saliendo del sitio: colores de sistema al crear componentes de un sitio. Estos colores de sistema te limitan a una paleta de colores restringida, pero que se integrarán correctamente con el modo de alto contraste, garantizando una buena legibilidad.

También recomendamos el uso de la saliendo del sitio: media query forced-colors que te permite cambiar los estilos y sobrescribir los colores impuestos por el modo de alto contraste.

La media query tiene soporte en Edge (Chromium), Chrome desde la versión 89, y Firefox desde la versión 89.

Expectativas de los usuarios

Cuando se activa el modo de alto contraste de Windows, el sistema operativo toma los colores definidos por el autor y los reemplaza en algunos elementos semánticos usando una cantidad de colores limitados, pero que tienen una mejor legibilidad. Los colores reemplazados van a depender de la temática de alto contraste que se elija, el usuario incluso tiene la posibilidad de cambiarlos de acuerdo a su preferencia.

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 cuando activan las opción de alto contraste. A continuación veremos cómo se deben ver distintos elementos al seleccionar la temática de alto contraste negra y cómo lograr que se vean de tal forma. Esto te permitirá hacer pruebas y verificar que todo esté funcionando correctamente.

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

Cabe mencionar que los elementos que veremos ya tienen una presentación correcta al usar el elemento nativo sin interferir en sus estilos. Es decir, si usas el elemento semántico que corresponde, no tendrás problemas al activar Windows con alto contraste. Sin embargo, esto no siempre es posible, sobre todo con algunos elementos como las casillas de verificación, radio botones o listas desplegables que no permiten grandes modificaciones en su diseño y por tanto es común utilizar un elemento personalizado.

Botones

Los botones tienen un color blanco, y es recomendable asegurarse de que tengan un borde para que no se confunda con texto normal que tiene el mismo color.

Un botón en modo de alto contraste. Tiene un borde y texto blanco con un fondo negro.

Si por algún motivo no puedes usar un botón con html semántico <button> (idealmente esto debe ser evitado), los colores de sistema para los botones son buttonface para el color de fondo, y buttontext para el color del texto.

Si además quieres distinguir el estado hover del estado normal, puedes invertir el uso de estos colores:

botones en modo de alto contraste. Uno en estado normal con un borde y texto blanco y fondo negro. El otro en estado hover con un color de fondo blanco y texto negro

Es además necesario usar la declaración forced-color-adjust: none para indicarle al navegador que no interfiera con los colores. De lo contrario, al invertir los colores, el botón en estado hover recibirá un color de fondo negro y no será posible disinguir el texto dado que tendrá el mismo color.

Botón en modo de alto contraste con un color de fondo blanco y un cuadrado negro que cubre el texto del mismo color.

Enlaces

Los enlaces deben ser de color amarillo, y el color de systema correspondiente es linktext en caso de tener que aplicarlo a otro elemento no semántico.

Enlace en modo de alto contraste con color amarillo

Campos de texto

Los campos de texto tienen un borde de color blanco. Es importante que tengan un borde, de lo contrario serán invisibles.

Etiqueta y campo de texto en modo de alto contraste. La estiqueta es de color blanco y el campo tiene un borde del mismo color

Los colores de fondo y de sombra son ignorados por el modo de alto contraste. En caso de que el diseño utilize las propiedades background-color o box-shadow en vez de un borde, puedes usar un borde de color transparente para que solo sea visible cuando esté activado el modo de alto contraste. De lo contrario, el campo de texto no será visible en Windows con alto contraste.

input { border: solid 1px transparent; }

Casilla de verificación

Al igual que los campos de texto, las casillas de verificación deben tener un borde para que no sean invisibles, su color en la temática negra es blanco. Además de esto, las casillas son seleccionables y por tanto tienen un estado activo. El estado activo o seleccionable en Windows con alto contraste es de color turquesa para el fondo, y negro para el color del ícono.

A continuación mostramos la presentación visual de una casilla de verificación en estado normal y seleccionado.

2 casillas de verificación en modo alto contraste. Una en estado normal con un borde blanco, otra en estado activo con un fondo turquesa y un ícono negro

Si necesitas crear una casilla personalizada, los colores de sistema a usar son highlight para el color de fondo activo, y highlighttext para el color del ícono.

Radio botón

Las expectativas de los radio botones son muy parecidas a las de las casillas de verificación. Deben tener un borde blanco para poder distinguir el área seleccionable, y también tienen un estado activo.

Esta es la presentación visual de un radio botón nativo en estado normal y seleccionado.

2 radio botones en modo alto contraste. Una en estado normal con un borde blanco, otra en estado activo con un fondo turquesa y un ícono negro

Si necesitas crear radio botones personalizados, el color de sistema a usar es highlight para el color activo.

Lista desplegable

Las listas también deben tener un borde, pero además hay que asegurarse que el indicador visual (el ícono de la flecha) tenga buen contraste ya que es importante para poder identificarlas como una lista desplegable. El ícono al igual que el borde deben ser de color blanco:

lista desplegable en modo alto contraste con un borde e ícono de flecha blanco

Si debes crear un componente personalizado, las opciones dentro de la lista en estado activo y hover deben tener un color de fondo turquesa usando el color de sistema highlight, y un color de texto negro usando el color de sistema highlighttext.

Lista desplegable abierta en modo alto contraste. La tercera opción está seleccionada y tiene un color de fondo turquesa con color de texto negro

A continuación mostramos ejemplos de listas desplegables personalizadas creadas por Sarah Highley para su saliendo del sitio: artículo en inglés Select your poison . Las modificamos un poco para que los estados seleccionables se vean como corresponde al usar Windows con alto contraste.

Elementos desactivados

Los elementos desactivados usando la temática negra de Windows de alto contraste son de color verde. Hay que fijarse que los bordes, texto e íconos de un elemento tenga este color. A continuación veremos ejemplos de elementos html nativos desactivados.

Ejemplos de botón, casilla de verificación, radio botón, campo de texto y lista desplegable desactivadas en modo alto contraste. Todas tiene un color verde

El color de sistema para los elementos desactivados es graytext en caso de necesitar aplicarlo en algún componente personalizado.

Cómo evitar elementos invisibles

Los problemas más comunes se deben al uso de elementos no semánticos que usan colores de fondo o sombras para crear un perímetro visible. Al activar el modo de alto contraste, estas propiedades son ignoradas y por tanto crean componentes invisibles.

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

Crear perímetros

Los bordes no son ignorados en modo de alto contraste y por tanto es posible usarlos para crear un perímetro que permita que el elemento sea distinguible. Si no deseas que el componente tenga un borde cuando no esté activado el modo de alto contraste, puedes usar un borde de color transparente o definirlo sólo dentro de la media query de colores forzados:

input { /* Este borde no será transparente al activar el modo de alto contraste */ border: solid 1px transparent; } @media (forced-colors: active) { input { border: solid 1px; } }

Íconos

Debes tener cuidado si usas un sistema de íconos con SVG. Windows con alto contraste ignora las propiedades stroke y fill, y si usas un color directamente en estas propiedades, el sistema operativo en este modo no las va a ignorar y es posible que tengas íconos con bajo contraste o prácticamente invisibles.

í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 colores directamente, puede usar fill: currentColor, definir el color que desees en un elemento padre, y luego usar una media query de colores forzados junto con el color de sistema canvastext para darle un color legible cuando esté activado el modo de alto contraste:

í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
.icono { color: #d4284d; svg { fill: currentColor; } } @media (forced-colors: active) { .icono { color: canvastext; } }

El color canvastext es equivalente al color de texto por defecto, que en la temática de alto contraste negra es blanco.