Principio 1/1.4 Distinguible/1.4.1-C

De WCAG Wiki

1.4.1-C. Evitar el color como único recurso en imágenes

Discapacidades afectadas

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

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En las imágenes no se debe emplear el color como único medio visual para transmitir información.

Comprensión del criterio

Descripción resumida

Si una imagen utiliza colores para diferenciar información (gráficas, diagramas, mapas, iconos…), también debe aportar señales adicionales como texto, patrones, formas, bordes o iconos. Esto asegura que las personas con dificultades para percibir colores puedan comprender el contenido.

Objetivo

Garantizar que la información contenida en imágenes sea accesible para usuarios con daltonismo o baja percepción del color, así como para quienes visualizan contenidos en entornos monocromos o con alto contraste.

Importancia de cumplir el criterio

Si la información depende únicamente del color, muchas personas no podrán interpretarla correctamente. Patrones, formas, etiquetado y otros elementos redundantes evitan la pérdida de significado.

Referencias WCAG

  • G111: Uso de color y patrones
  • G14: Información por color también disponible en texto
  • F13: Fallo cuando el texto alternativo no incluye la información basada en color

Recursos de apoyo

  • Usar patrones, texturas o formas distintas además del color.
  • Asegurar que la información basada en color también está disponible en texto.
  • Verificar que el texto alternativo de la imagen refleja diferencias clave.
  • Simular la visualización en monocromo o modo daltónico.

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Identificar imágenes donde el color transmite información.
  2. Paso 2. Comprobar que existen pistas adicionales (patrones, formas, iconos, bordes…)
  3. Paso 3. Revisar que el texto alternativo incluye la información diferenciada por color.

Resultado esperado

La información visual transmitida por color en imágenes también se ofrece mediante señales adicionales, garantizando su comprensión en ausencia de percepción cromática.

Ejemplo ilustrativo

Ejemplo accesible: 
<!-- Gráfica donde cada barra tiene color y un patrón -->

Las barras se diferencian por color y patrón (rayas, puntos, cuadrícula).

Ejemplo no accesible: 

<!-- Gráfica donde solo cambia el color de las barras -->

Las barras solo se diferencian por color.


Otras herramientas de evaluación

  • Inspector del navegador
  • Simuladores de daltonismo (Chrome DevTools / Stark)










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ 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> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ 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

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ 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.1-C. Evitar el color como único recurso en imágenes

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.1-C&oldid=3338»