Dominar la accesibilidad: Buenas prácticas para el cumplimiento de las WCAG 2.1 en el diseño visual

El color por sí solo NO DEBE utilizarse para distinguir los enlaces del texto que los rodea, a menos que el contraste de color entre el enlace y el texto que lo rodea sea de al menos 3:1, y se ofrezca una diferenciación adicional cuando se pasa el ratón por encima del enlace o éste recibe atención.

Los usuarios deben comprender la diferencia entre un texto normal y un enlace; de lo contrario, es más probable que pasen por alto enlaces importantes.

Las mejores técnicas para conseguirlo son: colores diferentes y subrayado, colores diferentes y subrayado sólo al pasar el ratón por encima o al enfocar, colores de fondo diferentes al pasar el ratón por encima o al enfocar, añadir un contorno o borde al enfocar y al pasar el ratón por encima, o colocarlo en un menú. Los usuarios videntes entenderán que los elementos dentro de un menú son enlaces.

El color NO DEBERÍA utilizarse como único método para distinguir los componentes de la interfaz de usuario y/o el contenido que los rodea, a menos que el contraste de color entre los componentes de la interfaz de usuario y/o el contenido que los rodea sea de al menos 3:1.

Si utilizamos iconos como botones e iconos como parte del texto, si el contraste de color no es lo suficientemente alto, los usuarios con baja visión tendrán dificultades para entender qué iconos son botones. Sería mejor añadir un fondo o borde a los iconos que funcionan como botones.

El texto visible DEBERÍA ser texto estándar en el marcado (no imágenes o versiones gráficas del texto) para permitir la personalización del color y el contraste del texto por parte del usuario.

Incluso cuando las pautas de accesibilidad exigen un contraste mínimo entre el texto y el fondo, algunos usuarios son sensibles a los colores y necesitan cambiarlos utilizando otra tecnología de ayuda (como el modo de alto contraste de Windows). Para ello, el sitio web debe utilizar texto real en lugar de imágenes.

Los componentes visibles de la interfaz de usuario DEBERÍAN utilizar controles y funciones nativos (no imágenes o versiones gráficas de los controles) cuando estén disponibles para permitir la personalización por parte del usuario del color y el contraste de la interfaz.

Espero que nadie esté utilizando esta técnica hoy en día, pero lo mismo que la última regla: no utilice imágenes como controles, como botones. El software que permite personalizar los colores no puede personalizar el color de las imágenes.

Contraste de color

El texto pequeño DEBE tener una relación de contraste de al menos 4,5 a 1 con el fondo.

El fondo puede ser un color sólido, una imagen o un vídeo, y se considera texto pequeño si tiene menos de 18 puntos de fuente normal o 14 puntos de fuente negrita, en píxeles de 24px o 19px.

Si el contraste entre el texto y el fondo es de 4,5:1, es posible que los usuarios con baja visión no necesiten tecnologías de ayuda para mejorar el contraste. Esta regla también ayuda a las personas con deficiencia de color, en las que el color puede afectar a cómo perciben el contenido.

El texto pequeño DEBERÍA tener una relación de contraste de al menos 7 a 1 con el fondo.

Esta regla se aplica a las aplicaciones móviles. Debido al pequeño tamaño de la ventana gráfica, la mejor práctica es aumentar el contraste del texto pequeño (por debajo de 18 puntos de fuente normal o 14 puntos de fuente en negrita) por encima del mínimo, lo que hará que la aplicación sea más accesible.

El texto grande y las imágenes de texto grande DEBEN tener una relación de contraste de al menos 3 a 1 con el fondo.

El texto grande de 18 puntos o 14 puntos en negrita tiene trazos más anchos, lo que facilita su lectura con un contraste más bajo. Por lo tanto, la regla de contraste para el texto grande es menor.

Cualquier límite visual que indique la zona de impacto de un componente activo del usuario DEBE tener un contraste suficiente de al menos 3 a 1 con el fondo adyacente.

Es importante saber que no siempre es necesario un límite visual que indique el área de impacto en cada componente, pero si un indicador visual es la única forma de identificar un componente, debe tener suficiente contraste de color.

La mejor práctica consiste en garantizar que los usuarios con baja visión puedan percibir partes de la pantalla que no son necesariamente texto, pero que siguen siendo cruciales para utilizar y comprender el contenido. Entre estos elementos se encuentran los botones, los elementos de formulario, los enlaces y los controles de usuario. Sin un contraste suficiente en los botones y otros controles, los usuarios pueden ser incapaces de distinguirlos del fondo.

La excepción a esta regla se produce cuando la apariencia del componente depende del agente de usuario.

El estado visual de un componente activo de la interfaz de usuario DEBE tener un contraste suficiente de al menos 3 a 1 con el fondo adyacente.

Los estados visuales de los componentes de usuario son foco, seleccionado, deseleccionado, hover y otros. Las excepciones a esta regla son el estado desactivado y cuando el agente de usuario determina el color.

Las partes de los gráficos DEBEN tener una relación de contraste de al menos 3 a 1 con respecto al color o colores adyacentes.

Los gráficos que transmiten información también deben cumplir esta relación de contraste mínima no textual. Esto incluye los iconos que transmiten información, las líneas de los gráficos lineales y los cortes de los gráficos circulares. Una excepción a esta regla es cuando el cambio de color modifica el significado, por ejemplo, en el caso de las banderas.

El contraste de todos los indicadores visuales de enfoque respecto al fondo DEBE ser como mínimo de 3 a 1.

En algunos navegadores, el estilo por defecto del indicador de enfoque es difícil de ver, especialmente para usuarios con baja visión. La recomendación es mejorar el indicador visual para que sea más fácil y coherente en todos los navegadores.

Siempre que se utilicen límites visuales para distinguir controles, el contraste de los límites del control de la interfaz de usuario en comparación con las áreas adyacentes DEBE ser de al menos 3 a 1 para distinguir el control de la interfaz de usuario de las áreas adyacentes.

Las personas con baja visión y deficiencias en la visión de los colores pueden ser incapaces de ver los elementos de la interfaz de usuario si no tienen suficiente contraste con sus áreas adyacentes.