Principio 1/1.4 Distinguible/1.4.1-B

De WCAG Wiki
< Principio 1‎ | 1.4 Distinguible
Revisión del 15:22 12 feb 2026 de 202526UdL22 (discusión | contribs.) (he añadido ejemplos)
(difs.) ← Revisión anterior | Revisión actual (difs.) | Revisión siguiente → (difs.)

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

Recursos de apoyo

Consejos
  • 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

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta ‘’’Colour Contrast Analyser’’’
  1. Paso 1. Localizar todos los enlaces que están rodeados de texto.
  2. Paso 2. Comprobar que presentan un contraste de al menos 3:1 con el texto que lo rodea.
    • a. Pulsar en el icono en la sección “Foreground colour” y seleccionar el color del enlace en la página.
    • b. Pulsar en el icono en la sección “Background colour” y seleccionar el color del texto adyacente en la página.
    • c. Comprobar que el “Contrast ratio” que aparece junto a “WCAG 2.1 results” es superior a 3:1.
  3. Paso 3. Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco con el ratón.
  4. Paso 4. Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco a través del teclado.

Resultado esperado

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

Ejemplo ilustrativo

En el código CSS se indica que el enlace esté subrallado.
HTML: 

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

CSS: 

a {
  text-decoration: underline;
}


Otras herramientas de evaluación

  • Inspección del navegador: comprobar que los enlaces se distinguen del texto circundante no solo por el color (p. ej., subrayado, estilo de texto, ícono) y que conservan un indicador visible al pasar el foco.
  • Navegación por teclado: recorrer la página con Tab para verificar que los enlaces muestran una pista visual clara de foco.
  • Filtros de visión / sin estilos: activar simuladores de daltonismo o desactivar CSS para confirmar que los enlaces siguen siendo identificables por más de un atributo visual.










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
2526UdL1.4.1-B-00117 febrero 2026 20:00:14
2526UFV1.4.1-B-0012 enero 2026 17:37:28


Comentarios

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

Loading comments...




Ejemplo de Violeta Gómez

2. SUB-CRITERIO 1.4.1: Uso del color

ID del Criterio: 1.4.1 Uso del color (Nivel A)

Enlace a la Wiki: https://www.wikiwcag.udl.cat/index.php/2526UdL1.4.1-000

Este criterio dice que el color no debe ser la única forma de dar información o distinguir un elemento. Por ejemplo, un enlace no puede ser solo azul; debería estar también subrayado o tener un icono.

2.1. Ejemplo NO Accesible (NOA) - Instagram

  • URL de origen: https://www.instagram.com/
  • Explicación: En la parte inferior de la página, Instagram presenta una lista de enlaces que se distinguen del texto estático únicamente por su color (un tono gris o azul suave). Estos enlaces no tienen subrayado, negrita ni ningún otro indicador visual que no sea el cambio cromático.
  • Impacto: Este diseño infringe la pauta de accesibilidad porque confía exclusivamente en el color para transmitir información. Un usuario con daltonismo o con una pantalla mal calibrada no podrá identificar qué elementos son clicables y cuáles no, ya que verá todo el texto de un tono uniforme.

2.2. Ejemplo Accesible (ACC) - Fundación ONCE

  • URL de origen: https://www.fundaciononce.es/
  • Explicación: En este caso, el enlace "Convenios INSERTA" no utiliza el color azul estándar; es de un tono granate/marrón oscuro. Sin embargo, cumple perfectamente con el criterio porque está subrayado permanentemente.
  • Impacto: Al estar subrayado, el usuario no necesita identificar el color para saber que es un enlace. El subrayado es una "pista de forma" que funciona para todo el mundo, incluidos usuarios con daltonismo severo o aquellos que ven la web en blanco y negro.
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.1-B&oldid=4490»