Fallo común Fallos comunes WCAG 2.2
F73Fallo del criterio de conformidad 1.4.1 debido a crear enlaces que no son visualmente evidentes sin visión del color
En resumen
Este fallo se produce cuando los enlaces dentro de un texto se distinguen únicamente por el color: se les quita el subrayado y no se añade ninguna otra pista visual. Las personas con deficiencias en la percepción del color no pueden saber qué palabras son enlaces. Si elimina el subrayado de los enlaces, añada otra diferencia visual (negrita, icono o una diferencia de luminosidad de al menos 3:1 con el texto circundante) que no dependa solo del hover o del foco.
Ejemplo práctico
Se ve a diario en textos legales, condiciones de envío, fichas de producto y noticias: el diseño quita el subrayado a los enlaces dentro de un párrafo y deja como única pista un color muy parecido al del texto.
Así no: Enlaces sin subrayado y de color casi igual al texto
Los enlaces solo se diferencian por el tono: lila oscuro (#412c56) frente al texto casi negro (#0B2239), con una relación de luminosidad de apenas 1,3:1. Sin percibir el color (o en una pantalla con brillo bajo) no se sabe que hay enlaces; el subrayado solo aparece al pasar el ratón o al recibir el foco, lo que sigue siendo un fallo.
<style>
.envio { color: #0B2239; line-height: 1.5; }
.envio a { color: #412c56; text-decoration: none; }
.envio a:hover, .envio a:focus { text-decoration: underline; }
</style>
<h2>Envíos y devoluciones</h2>
<p class="envio">
Los pedidos se entregan en 24-48 horas laborables en la Península.
Consulte las <a href="#">tarifas de envío</a> y la
<a href="#">política de devoluciones</a> antes de finalizar la compra.
Si tiene dudas, escriba a <a href="#">atención al cliente</a>.
</p>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Enlaces subrayados siempre
Se mantiene el color, pero los enlaces llevan subrayado permanente, una pista visual que no depende del color. Al pasar el ratón o con el foco el subrayado se engrosa como refuerzo, y el foco conserva el contorno del navegador.
<style>
.envio { color: #0B2239; line-height: 1.5; }
.envio a { color: #412c56; text-decoration: underline; }
.envio a:hover, .envio a:focus { text-decoration-thickness: 2px; }
</style>
<h2>Envíos y devoluciones</h2>
<p class="envio">
Los pedidos se entregan en 24-48 horas laborables en la Península.
Consulte las <a href="#">tarifas de envío</a> y la
<a href="#">política de devoluciones</a> antes de finalizar la compra.
Si tiene dudas, escriba a <a href="#">atención al cliente</a>.
</p>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Reset de CSS o tema de WordPress con a { text-decoration: none; } aplicado a todo el sitio, incluidos los enlaces del contenido.
- Mostrar el subrayado solo con :hover, lo que no ayuda a quien no usa ratón ni a quien todavía no ha pasado el puntero por el enlace.
- Elegir para los enlaces un color corporativo oscuro que contrasta bien con el fondo pero muy poco con el texto negro o gris oscuro.
- Sustituir el subrayado por un borde inferior muy fino y de color claro que apenas se percibe.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Cualquier tecnología.
Descripción
El objetivo de este fallo es evitar situaciones en las que las personas que no pueden percibir las diferencias de color no puedan identificar los enlaces (cuando las personas con visión del color sí pueden identificarlos). Se requiere el subrayado de los enlaces o alguna otra distinción visual que no se base en el color (cuando los enlaces son discernibles para quienes tienen visión del color).
Aunque algunos enlaces pueden ser visualmente evidentes por el diseño y el contexto de la página, como los enlaces de navegación, los enlaces dentro de un texto a menudo solo se reconocen visualmente por sus propios atributos de presentación. Eliminar el subrayado y dejar únicamente la diferencia de color en esos enlaces sería un fallo, porque no habría ninguna otra indicación visual (aparte del color) de que se trata de un enlace.
El rojo y el rosa son el mismo color (tono), pero tienen distinta luminosidad (que no es color). Así que el rojo y el rosa cumplirían el requisito de «no distinguirse únicamente por el color (tono)», puesto que difieren en luminosidad (que no es color), siempre que la diferencia de luminosidad (contraste) sea de 3:1 o superior. Por ejemplo, si el texto circundante es rojo y el enlace es rosa, cumpliría. De forma similar, un verde claro y un rojo oscuro difieren tanto en color como en luminosidad, por lo que cumplirían si la diferencia de contraste (luminosidad) es de 3:1 o superior antes de recibir el foco o de señalarlos con el puntero.
No se exige que los enlaces sean identificables por las personas que no pueden percibir el color si tampoco son perceptibles para quienes tienen visión del color (p. ej., si los enlaces están ocultos para todo el mundo, como en un juego o en un examen).
Si la pista no basada en el color solo aparece cuando el ratón pasa por encima del enlace o cuando el enlace recibe el foco, sigue siendo un fallo.
Si el enlace tiene un color distinto y además está en negrita, no fallaría, porque la negrita no depende del color.
Ejemplos
Enlaces sin subrayado y con un contraste similar al del texto del cuerpo
Una página web incluye un gran número de enlaces dentro del texto del cuerpo. Los enlaces están estilizados de modo que no tienen subrayado y su color es muy similar al del texto del cuerpo. Esto sería un fallo porque los usuarios no podrían diferenciar los enlaces del texto del cuerpo.
Eliminar el subrayado de un enlace en una frase o párrafo sin proporcionar otra pista visual aparte del color
<head>
<style>
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>
<body>
<p>There are many resources to find out more about the
<a href="rain-in-spain.html">rain in Spain</a>.
</p>
</body>Si la pista visual solo se proporciona al pasar el ratón por encima (como en el ejemplo anterior), seguiría fallando.
Pruebas
Procedimiento
- Comprobar que cada enlace de la página que es identificable por el color (tono) también es identificable visualmente por algún otro medio (p. ej., subrayado, negrita, cursiva, una diferencia suficiente de luminosidad, etc.).
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla este criterio de conformidad.
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F73 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
