Principio 1/1.4 Distinguible/1.4.11-A

1.4.11-A. Contraste en componentes y gráficos

1_Perceptible 1.4_Facilitar_ver_y_escuchar_contenido

• Nivel: AA
• Versión: 2.2
• Principio: 1_Perceptible
• Pauta: 1.4_Facilitar_ver_y_escuchar_contenido
• 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)

• La presentación visual de los siguientes elementos tiene una ratio de contraste de al menos 3:1 con los colores adyacentes:
  • Componentes de la interfaz de usuario: información visual necesaria para identificar los componentes y los estados, excepto en los componentes inactivos o cuando la apariencia la determina el agente de usuario y no la modifica el autor.
  • Objetos gráficos: partes de los gráficos necesarias para comprender el contenido, excepto cuando una presentación concreta es esencial para la información que se transmite.

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

• G207: Contraste mínimo de 3:1 para iconos
• G209: Contraste en límites entre colores contiguos
• G195: Indicador de foco visible proporcionado por el autor

Recursos de apoyo

• 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

1. Paso 1. Identificar componentes interactivos y gráficos esenciales.
2. Paso 2. Comprobar contraste entre borde/icono/elemento y el fondo adyacente.
3. Paso 3. Verificar contraste del indicador de foco y estados activos.
4. Paso 4. Confirmar ratio ≥ 3:1 con herramienta de contraste.

Resultado esperado

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

Ejemplo

Ejemplo accesible:

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

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

Ejemplo no accesible:

<button style="border:1px solid #ccc; background:#eee;">Enviar</button>

Bajo contraste entre borde y fondo, difícil de percibir.

Otras herramientas de evaluación

• Colour Contrast Analyser
• Contrast Checker WCAG
• Herramientas del navegador

Comentarios

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

Loading comments...