Principio 1/1.3 Adaptable/1.3.1-P

1.3.1-P. Color e información

1_Perceptible 1.3_Adaptable

• Nivel: A
• Versión: 2.2
• Principio: 1_Perceptible
• Pauta: 1.3_Adaptable
• Grupo: Estructura
• Subgrupo: Color y significado

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
• Visual total – Barrera grave
• Cognitiva – Barrera moderada

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Cuando el color se emplea para transmitir información también se debe transmitir dicha información mediante el marcado semántico o estructural, o al menos en forma de texto.

Comprensión del criterio

Descripción resumida

Si el color transmite información (por ejemplo, rojo para error o verde para éxito), esa información debe estar disponible también en texto u otro método que pueda interpretar el software.

Objetivo

Asegurar que la información basada en color sea accesible para todas las personas, especialmente para quienes no pueden percibir o distinguir colores.

Importancia de cumplir el criterio

El color no puede ser el único medio para indicar un estado, diferencia o mensaje. Sin alternativas en texto o elementos visuales adicionales, las personas con baja visión, daltonismo o ceguera no reciben la información.

Referencias WCAG

• G138: Marcar semánticamente cuando se usan claves de color
• G14: La información transmitida por color debe estar también en texto
• G182: Ofrecer pistas visuales adicionales al color

Recursos de apoyo

• No usar color como único indicador
• Complementar el color con texto, iconos o atributos ARIA
• Fallo si un error se marca solo con color rojo

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

1. Identificar elementos en los que el color transmita significado
2. Verificar que también existe texto u otro indicador programático
3. Inspeccionar código para confirmar marcado semántico correcto

Resultado esperado

El color no se usa como único método para transmitir información; existe alternativa textual o semántica.

Ejemplo ilustrativo

Ejemplo correcto:

<p><span aria-hidden="true">⚠️</span> <strong>Error:</strong> Introduce un email válido.</p>

Ejemplo incorrecto:

<p style="color:red;">Campo incorrecto</p>

Otras herramientas de evaluación

• Inspección de código del navegador
• Lectores de pantalla para comprobar mensajes alternativos

Ejemplos accesibles y no accesibles creados por alumnos

	Última modificación
2526UFV1.3.1-P-001	9 enero 2026 21:26:12
2526UPSA1.3.1-P-000	18 diciembre 2025 12:46:56

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-P. Color e información

Loading comments...