Técnica Técnicas generales WCAG 2.2
G183Dar a los enlaces sin subrayar un contraste de 3:1 con el texto
Nombre oficial en el W3C: Usar una relación de contraste de al menos 3:1 para distinguir los enlaces de texto en línea del texto circundante
En pocas palabras
Si los enlaces de un párrafo se distinguen del texto solo por el color, ese color debe ser bastante más claro u oscuro que el texto. La diferencia de luminosidad debe ser de al menos 3:1. Así se ven los enlaces aunque no se perciban los colores.
Por qué es importante
Las personas con daltonismo o que no ven colores no notan la diferencia entre azul y negro, pero sí entre claro y oscuro. Por eso lo que cuenta aquí es la luminosidad, no el tono.
Si el enlace y el texto tienen una luminosidad parecida, esas personas no saben dónde están los enlaces. Pueden perderse información importante, como el enlace para pedir cita previa.
Cómo se hace
- Mida el contraste entre el color del enlace y el del texto que lo rodea. Debe ser de al menos 3:1.
- Mida también el contraste de cada uno con el fondo. Para texto normal debe ser de al menos 4,5:1.
- Elija colores que cumplan las dos condiciones. Con texto negro sobre fondo blanco, el margen es estrecho. Un azul medio como
#3366CCsí cumple. - Añada un subrayado o un cambio visible al pasar el ratón y al recibir el foco del teclado.
- Si puede, subraye los enlaces siempre. Es la solución más clara, sobre todo con colores oscuros.
Ejemplo práctico
Algunos diseños no subrayan los enlaces dentro del texto. Entonces la única diferencia entre enlace y texto es el color. El ejemplo es la información de un trámite municipal.
Así no: Enlace con contraste de 1,7:1 respecto al texto
El enlace es lila oscuro (#412c56). Con el fondo blanco tiene buen contraste (12,2:1). Pero con el texto negro que lo rodea solo llega a 1,7:1, y se exige 3:1. No lleva subrayado ni otra marca. Quien no distingue bien los colores no ve los enlaces hasta pasar el ratón por encima.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Enlace con contraste de 3,3:1 respecto al texto
Solo cambia el color del enlace, ahora lila más claro (#744E9A). Tiene 3,3:1 con el texto negro y 6,4:1 con el fondo blanco. Se distingue por su luminosidad y se lee bien. Al pasar el ratón o recibir el foco se subraya como refuerzo.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Medir 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 de marca oscuros para los enlaces sobre texto negro o gris muy oscuro. El contraste entre ambos queda en 1,5:1 o menos.
- Cambiar el color del texto en una plantilla, por ejemplo de gris a negro, sin volver a medir el contraste con los enlaces.
- Confiar solo en el subrayado al pasar el ratón cuando, en reposo, los enlaces no llegan a 3:1.
Para saber más, en nuestro blog
-
Los mejores analizadores de contraste de colorDescubre 7 herramientas que te ayudarán a dotar de un buen contraste a tu web o a tus documentos
Ver el texto completo del W3C (traducción al español)
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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G183 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.