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.0
• 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.

• Visual total – Barrera grave
• Sordoceguera – Barrera grave
• Baja visión – Barrera grave

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: Using semantic markup whenever color cues are used
• G14: Ensuring that information conveyed by color is also available in text
• G182: Providing multiple visual cues to identify active user interface components

Recursos de apoyo

Consejos

• No usar color como único indicador
• Complementar el color con texto, iconos o atributos ARIA
• No marcar un error de un campo en un formulario (por ejemplo) solo con un borde de color rojo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Usando la herramienta de inspección de código del navegador, verificar que siempre que el color se emplee para transmitir información, se utilizan elementos de marcado semántico.

Resultado esperado

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

Ejemplo ilustrativo

Se muestra un error con icono, texto y ARIA (no depende solo del color).

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

Otras herramientas de evaluación

• Inspección del navegador: revisar el código para comprobar que el color no es el único mecanismo para transmitir información. Verificar que existe texto o marcado semántico adicional (por ejemplo: iconos con texto, etiquetas, mensajes "Correcto"/"Error", etc.).
• Lector de pantalla: (NVDA, JAWS, VoiceOver) comprobar que los usuarios que no perciben el color reciben la misma información, es decir, que el contenido relevante se anuncia en texto o mediante roles/atributos accesibles.
• Herramientas de contraste: (Contrast Checker, DevTools Accessibility, Colour Contrast Analyser) validar que los colores utilizados tienen suficiente contraste cuando se presentan junto a texto u otros indicadores visuales.

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...