Principio 1/1.4 Distinguible/1.4.1-B

De WCAG Wiki

1.4.1-B. Diferenciar los enlaces del texto circundante

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)

  • Los enlaces no se deben diferenciar del texto que los rodea únicamente mediante el color o al menos tienen un contraste de 3:1 con el texto que los rodea y se deben emplear pistas visuales adicionales cuando reciben el foco.

Comprensión del criterio

Descripción resumida

Los enlaces dentro de un párrafo no pueden distinguirse únicamente por el color.

Si solo se usa color, deben cumplirse dos requisitos:

  • Contraste mínimo 3:1 entre el enlace y el texto adyacente.
  • Se deben añadir pistas visuales adicionales (subrayado, negrita u otra señal) cuando el enlace recibe foco o interacción.

Objetivo

Garantizar que los usuarios con baja visión o daltonismo distingan claramente los enlaces del resto del texto, especialmente en contenido en línea.

Importancia de cumplir el criterio

Si la diferenciación depende solo del color, los usuarios con baja visión o déficit de color pueden no identificar enlaces, afectando navegación y comprensión. Las pistas visuales complementarias evitan la ambigüedad y mejoran la usabilidad.

Referencias WCAG

  • G183: Contraste 3:1 y pistas visuales al recibir foco
  • F73: Fallo al crear enlaces no evidentes sin visión del color

Recursos de apoyo

  • Comprobar contraste mínimo 3:1 con el texto cercano.
  • Aplicar subrayado, negrita u otras señales visuales al enfocar/enlazar.
  • Evitar enlaces indistinguibles del texto, incluso si la persona no percibe color.
  • Usar cambios visuales consistentes en hover y focus.

Evaluación del criterio

Tipo de evaluación

Procedimiento de evaluación

  1. Paso 1. Identificar enlaces en línea.
  2. Paso 2. Verificar contraste 3:1 con el texto adyacente.
  3. Paso 3. Confirmar pistas visuales adicionales en foco o interacción (subrayado, negrita, etc.).

Resultado esperado

Los enlaces son distinguibles del texto adyacente mediante color con contraste adecuado y señales adicionales al recibir foco.

Ejemplo

Ejemplo accesible:
<p>Visita nuestra <a href="#" style="text-decoration:underline;">página de ayuda</a> para más información.</p>

Ejemplo no accesible:

<p>Visita nuestra <a href="#" style="color:blue;">página de ayuda</a> para más información.</p>

Otras herramientas de evaluación

  • Colour Contrast Analyser
  • Zoom del navegador
  • Herramientas de inspección visual










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.1-B. Diferenciar los enlaces del texto circundante

Loading comments...