Principio 1/1.4 Distinguible/1.4.11-A

1.4.11-A. Contraste en componentes y gráficos

1_Perceptible 1.4_Distinguible

• Nivel: AA
• Versión: 2.2
• Principio: 1_Perceptible
• Pauta: 1.4_Distinguible
• Grupo: Contraste
• Subgrupo: Componentes_y_gráficos

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Baja visión – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Se debe asegurar un ratio mínimo de contraste de al menos 3:1 en los colores adyacentes de:
  • Componentes de la interfaz de usuario: la información visual necesaria para identificar los componentes de la interfaz de usuario y los estados.
  • Objetos gráficos: todas las partes de los gráficos que sean necesarias para comprender el contenido.

Comprensión del criterio

Descripción resumida

Los componentes de interfaz (botones, iconos, campos de formulario, indicadores de foco) y las partes esenciales de gráficos deben tener contraste mínimo de 3:1 frente al color de fondo o colores adyacentes para ser perceptibles.

Objetivo

Facilitar la identificación clara de componentes interactivos y gráficos esenciales a personas con baja visión, garantizando que puedan localizar y comprender elementos interactivos y visuales.

Importancia de cumplir el criterio

Sin contraste suficiente, elementos como botones, iconos, estados activos o partes clave de gráficos pueden pasar desapercibidos, afectando la interacción y el acceso a la información visual.

Referencias WCAG

• G195: Using an author-supplied, highly visible focus indicator
• G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
• G207: Ensuring that a contrast ratio of 3:1 is provided for icons
• G209: Provide sufficient contrast at the boundaries between adjoining colors

Recursos de apoyo

Consejos

• Verificar contraste mínimo de 3:1 en iconos, botones y bordes de campos.
• Proporcionar indicadores de foco claramente visibles.
• Asegurar contraste suficiente en gráficos relevantes (líneas, marcadores, sectores).
• Evitar estados inactivos de bajo contraste si son relevantes para el usuario.

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta ‘’’Colour Contrast Analyser’’’

1. Paso 1. Localizar todos los elementos visuales necesarios para la comprensión o interactuación, como por ejemplo:
   • a. Componentes de interfaz de usuario como botones o campos de formulario.
   • b. Objetos gráficos como iconos (cuando representen funcionalidades esenciales), diagramas o gráficas.
   • c. Indicador del foco de los elementos.
2. Paso 2. Comprobar que presentan un contraste de al menos 3:1 con los colores adyacentes.
   • a. Con el icono de “Foreground colour”, seleccionar el color principal (por ejemplo: fondo de un botón, borde de un campo de formulario, línea de una gráfica…).
   • b. Pulsar en el icono de “Background colour” y seleccionar el color adyacente (p. ej., fondo de la página, fondo de otro componente…).
   • c. Comprobar que el “Contrast ratio” indicado junto a “WCAG 2.1 results” es superior a 3:1.

Resultado esperado

Elementos de interfaz y gráficos esenciales presentan contraste mínimo de 3:1 con el fondo o colores contiguos.

Ejemplo

El borde del botón contrasta claramente con el fondo.

<button style="border:2px solid #000; background:#fff;">Enviar</button>

Otras herramientas de evaluación

• Revisión visual: comprobar si bordes, iconos, estados de controles (p. ej. foco, hover, seleccionado) y elementos gráficos son claramente distinguibles del fondo.
• Medición de contraste: utilizar herramientas como Colour Contrast Analyser, WebAIM Contrast Checker o Chrome DevTools para confirmar una relación mínima de 3:1 para componentes interactivos y gráficos esenciales.
• Inspección del navegador: verificar colores definidos en CSS para elementos de interfaz como botones, enlaces, campos de formulario, iconos, y estados activos o de foco.
• Pruebas de accesibilidad visual: activar filtros de baja visión o simuladores (daltonismo, contraste reducido) para garantizar que los componentes siguen siendo reconocibles.

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.11-A. Contraste en componentes y gráficos

Loading comments...