Contraste de componentes no textuales

Qué exige este criterio

La regla de contraste del criterio 1.4.3 cubre únicamente el texto; el criterio 1.4.11 extiende una versión más laxa (3:1 en lugar de 4,5:1) a dos categorías adicionales. En primer lugar, los indicadores visuales de los componentes de interfaz —lo que le indica al usuario que un elemento es un botón, dónde se encuentra el anillo de foco, dónde está el límite del campo de formulario— deben alcanzar 3:1 respecto a la superficie adyacente. En segundo lugar, las partes de los gráficos significativos que el usuario necesita identificar —barras de gráficos, iconos que comunican estado, puntos indicadores— deben alcanzar 3:1.

Cómo cumplirlo

• Proporcione a cada campo de formulario un borde visible con un contraste mínimo de 3:1 respecto al fondo de la página.
• Estilice los indicadores de foco (contorno :focus-visible) con un mínimo de 3:1 respecto tanto al componente como a la página.
• En los botones fantasma o de contorno, el propio borde debe alcanzar 3:1 respecto al fondo de la página.
• En los interruptores de palanca, la pista y el pulgar en los estados activado/desactivado deben tener un contraste de 3:1 en el punto de contacto.
• En los iconos que transmiten significado (icono de información «i», triángulo de advertencia, marca de verificación), los trazos del icono deben alcanzar 3:1 respecto a su fondo.
• En las series de gráficos, los colores empleados para distinguir barras o líneas deben estar a 3:1 entre sí o combinarse con tramas o texturas.

Fallos frecuentes

• Campos de formulario sin borde visible, o con un borde #e5e5e5 sobre #fff con una relación de 1,3:1 —invisible para usuarios con baja visión.
• El estilo predeterminado del contorno de foco del navegador sobrescrito con outline: none sin reemplazo alguno.
• Botones fantasma con texto blanco sobre fondo transparente y un borde gris de 1 px —el botón es prácticamente invisible.
• Interruptores de palanca con un pulgar apenas visible sobre una pista casi idéntica en el estado desactivado.
• Iconos de estado en la esquina de una tarjeta (una marca verde, una x roja) donde el color apenas contrasta con el fondo de la tarjeta.
• Gráficos de sectores con colores a 2:1 entre sí —los usuarios con visión normal aún perciben los límites, pero con dificultad; los usuarios con baja visión ven una mancha uniforme.

Por qué importa

El criterio 1.4.11 se incorporó en la versión 2.1 y sorprende sistemáticamente a los equipos, ya que la mayoría de las comprobaciones de contraste se limitan al texto. Los bordes de campos de formulario, los anillos de foco y los botones fantasma son los patrones de incumplimiento más habituales. Herramientas como axe y Stark ya comprueban el contraste no textual, pero los diseñadores siguen pasándolo por alto en la fase de diseño porque el modelo mental predominante es «contraste = contraste de texto». La corrección suele implicar engrosar los bordes y oscurecer los grises en el sistema de diseño.