Principio 1/1.4 Distinguible/1.4.11-A
De WCAG Wiki
1.4.11-A. Contraste en componentes y gráficos
- 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.
Excepción: No tienen la obligación de pasar ratio de contraste:
- los campos deshabilitados,
- los logotipos,
- las banderas,
- los gradientes de colores,
- los dibujos naturalistas o
- las fotografías.
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’’’
- 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.
- 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 ilustrativo
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.
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 1.4.11-A. Contraste en componentes y gráficos
Loading comments...
