Técnica Técnicas generales WCAG 2.2
G183Usar una relación de contraste de al menos 3:1 para distinguir los enlaces de texto en línea del texto circundante
En resumen
Cuando los enlaces dentro de un párrafo solo se distinguen del resto del texto por el color (sin subrayado ni otro indicador), esta técnica exige que el color del enlace tenga una relación de contraste mínima de 3:1 con el texto no enlazado, además de cumplir el contraste con el fondo. Beneficia a las personas con deficiencias en la visión del color y a quienes no perciben el color, y se aplica al diseñar la paleta de enlaces de cualquier web.
Ejemplo práctico
Esta técnica se aplica cuando el diseño no quiere subrayar los enlaces dentro del texto, por ejemplo en la información de un trámite municipal, y la única diferencia entre enlace y texto normal es el color.
Así no: Color de enlace con 1,7:1 respecto al texto
El enlace lila oscuro (#412c56) contrasta bien con el fondo blanco (12,2:1), pero solo 1,7:1 con el texto negro que lo rodea, por debajo del 3:1 exigido. Sin subrayado ni otra marca, quien no distingue bien los colores no ve dónde están los enlaces hasta pasar el ratón.
<style>
.tramite { color: #000000; line-height: 1.5; }
.tramite a { color: #412c56; text-decoration: none; }
.tramite a:hover, .tramite a:focus { text-decoration: underline; }
</style>
<h2>Empadronamiento</h2>
<p class="tramite">
Para darse de alta en el padrón necesita su documento de identidad y un
justificante de domicilio. Puede <a href="#">solicitar cita previa</a>
en línea o consultar los <a href="#">documentos necesarios</a> según su caso.
</p>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Color de enlace con 3,3:1 respecto al texto
Se ha cambiado solo el color del enlace a lila (#744E9A): tiene 3,3:1 con el texto negro circundante y 6,4:1 con el fondo blanco, así que se distingue por luminosidad y sigue siendo legible. Al pasar el ratón o con el foco se añade el subrayado como refuerzo.
<style>
.tramite { color: #000000; line-height: 1.5; }
.tramite a { color: #744E9A; text-decoration: none; }
.tramite a:hover, .tramite a:focus { text-decoration: underline; }
</style>
<h2>Empadronamiento</h2>
<p class="tramite">
Para darse de alta en el padrón necesita su documento de identidad y un
justificante de domicilio. Puede <a href="#">solicitar cita previa</a>
en línea o consultar los <a href="#">documentos necesarios</a> según su caso.
</p>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Comprobar solo el contraste del enlace con el fondo (4,5:1) y olvidar el contraste con el texto que lo rodea (3:1).
- Usar colores oscuros de marca para los enlaces sobre texto negro o gris muy oscuro, con contrastes entre ellos de 1,5:1 o menos.
- Cambiar el color del texto del cuerpo en una plantilla (por ejemplo, de gris a negro) sin volver a medir el contraste con los enlaces.
- Confiar en el subrayado al pasar el ratón como única pista adicional, cuando en reposo los enlaces no alcanzan el 3:1.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Cuando los enlaces de texto en línea solo se distinguen del texto estático que no es enlace por el color y la luminosidad
Descripción
Para cumplir el criterio de conformidad 1.4.1 Uso del color, cuando los enlaces de texto en línea solo se distinguen del texto estático circundante mediante un color diferente —y sin ningún otro indicador visual, como un subrayado—, la relación de contraste entre el texto del enlace y el texto estático debe ser de al menos 3:1.
En esta situación, elegir colores adecuados para el texto de los enlaces y para el texto que no es enlace puede resultar complicado para los autores, ya que no solo deben garantizar un contraste adecuado entre el texto del enlace y el texto que no es enlace, sino que cada uno de esos colores debe seguir cumpliendo además los requisitos de contraste del texto respecto al fondo.
En esta técnica, la relación de contraste se refiere a la diferencia de luminancia relativa (luminosidad) entre un enlace de texto en línea y el texto no enlazado que lo rodea. En los criterios de conformidad 1.4.3 Contraste mínimo y 1.4.6 Contraste mejorado, la relación de contraste se refiere al contraste entre el texto y su fondo. La diferencia es que esta técnica trata de la capacidad de los usuarios para distinguir entre fragmentos de texto, mientras que la relación de contraste empleada en los criterios de conformidad 1.4.3 y 1.4.6 trata de la legibilidad del texto respecto a su fondo.
Aunque esta técnica es suficiente para superar el requisito normativo, los autores pueden plantearse igualmente utilizar una forma alternativa o adicional de indicar los enlaces, como un subrayado o texto en negrita. Especialmente con colores oscuros, puede ser difícil distinguir visualmente entre textos de distinto color incluso cuando el contraste del texto del enlace con el texto circundante cumple la relación exigida de 3:1.
Ejemplos
Colores de enlaces de texto que proporcionarían un contraste de 3:1 con texto no enlazado de color negro y un contraste de 4.5:1 con un fondo blanco
a { color: #3333FF; text-decoration: none; }Consulte el ejemplo práctico:
Enlaces con una relación de contraste de al menos 3:1 con el texto circundante
Los enlaces de hipertexto de un documento son de color azul medio claro (#3366CC) y el texto normal es negro (#000000). Más allá de la diferencia de color y luminosidad, los enlaces no presentan ninguna otra diferencia de estilo respecto al texto normal. Como el texto azul es lo bastante claro, tiene un contraste de 3.9:1 con el texto circundante y las personas con cualquier tipo de deficiencia en la visión del color, incluidas aquellas que no pueden ver el color en absoluto, pueden identificarlo como distinto del texto que lo rodea.
Pruebas
Procedimiento
Para cada caso en el que se utilice el color para distinguir los enlaces de texto en línea del texto circundante que no es enlace:
- Comprobar que el color del texto del enlace tiene una relación de contraste de al menos
3:1respecto al color del texto circundante que no es enlace.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Recursos
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. 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 G183 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.
