Los enlaces deben ser distinguibles sin depender del color

Por qué es importante

Muchos usuarios no pueden percibir las diferencias de color de manera confiable. Aproximadamente el 8% de los hombres y el 0,4% de las mujeres tienen alguna forma de deficiencia en la visión del color, y hay casi tres veces más personas con baja visión que aquellas que son totalmente ciegas. Para estos usuarios, si un enlace dentro de un párrafo está estilizado solo con un color diferente — digamos, texto azul en un bloque de texto negro — puede ser completamente invisible como enlace.

Las personas con baja visión a menudo experimentan sensibilidad al contraste reducida, lo que significa que todo aparece aproximadamente con el mismo brillo. Sin una pista que no sea de color como un subrayado o una diferencia de luminancia suficiente, estos usuarios no pueden detectar que cierto texto es interactivo. Esto puede hacer que se pierdan completamente navegación importante, acciones o información.

Esta regla se relaciona con el Criterio de Éxito 1.4.1 de WCAG 2.0/2.1/2.2: Uso del color (Nivel A), que requiere que el color no se use como el único medio visual para transmitir información, indicar una acción o distinguir un elemento visual. Los enlaces incrustados en texto son uno de los lugares más comunes donde se viola este requisito.

Cómo funciona la regla

La regla de axe link-in-text-block verifica los enlaces que aparecen dentro de bloques de texto (como párrafos) y los evalúa en tres pasos:

1. Distinción que no es de color presente → Pasa. Si el enlace tiene un estilo visual que no depende del color — como un subrayado, un borde, un color de fondo o un peso/estilo de fuente distintivo — la regla pasa automáticamente.

2. No hay distinción que no sea de color y contraste menor a 3:1 → Falla. Si el enlace depende solo del color y la relación de contraste entre el color del texto del enlace y el color del texto circundante es menor a 3:1, la regla falla.

3. No hay distinción que no sea de color pero el contraste es 3:1 o mayor → Necesita revisión. Si el enlace depende solo del color pero cumple con el umbral de contraste 3:1, la regla lo marca para prueba manual. Debes verificar que el enlace recibe un estilo visual distintivo (como un subrayado) en los estados :focus y :hover.

Cómo solucionarlo

La solución más simple y confiable es dar a los enlaces un indicador visual que no sea de color. Aquí tienes tus opciones, en orden de recomendación:

• Subraya el enlace — Este es el indicador de enlace más universalmente entendido.
• Añade un borde — Un border-bottom puede funcionar como alternativa a text-decoration.
• Usa un estilo de fuente distintivo — Negrita o cursiva puede ayudar, aunque el subrayado es más convencional para enlaces.
• Añade un fondo o contorno — Una diferencia sutil en el color de fondo puede funcionar si es claramente visible.

Si eliges depender solo del contraste de color (mínimo 3:1 entre el texto del enlace y el texto circundante), también debes asegurarte de que el enlace gane un estilo distintivo que no sea de color en :hover y :focus. Este requisito de dos partes existe porque el contraste estático solo puede no ser suficiente para todos los usuarios, pero un cambio visual en la interacción confirma que el elemento es interactivo.

Ejemplos

Incorrecto: Enlace distinguido solo por color con contraste insuficiente

<style>
  p { color: #333333; }
  a { color: #555555; text-decoration: none; }
</style>

<p>
  Aprende más sobre nuestros
  <a href="/services">servicios de consultoría</a>
  y cómo podemos ayudarte.
</p>

En este ejemplo, el enlace no tiene subrayado y el contraste de color entre #555555 y #333333 está muy por debajo de 3:1. Los usuarios con baja visión o daltonismo no pueden identificar el enlace.

Correcto: El enlace tiene un subrayado (recomendado)

<style>
  p { color: #333333; }
  a { color: #0056b3; text-decoration: underline; }
</style>

<p>
  Aprende más sobre nuestros
  <a href="/services">servicios de consultoría</a>
  y cómo podemos ayudarte.
</p>

El subrayado proporciona una pista visual clara que no es de color, haciendo el enlace identificable independientemente de la percepción del color.

Correcto: El enlace usa un borde inferior en lugar de subrayado

<style>
  p { color: #333333; }
  a {
    color: #0056b3;
    text-decoration: none;
    border-bottom: 2px solid #0056b3;
  }
</style>

<p>
  Lee nuestra
  <a href="/guide">guía de accesibilidad</a>
  para instrucciones detalladas.
</p>

Correcto: Enlace solo de color con contraste suficiente más estilos hover/focus

<style>
  p { color: #333333; }
  a {
    color: #0000ee;
    text-decoration: none;
  }
  a:hover,
  a:focus {
    text-decoration: underline;
  }
</style>

<p>
  Visita nuestro
  <a href="/help">centro de ayuda</a>
  para respuestas a preguntas comunes.
</p>

Aquí el contraste entre #0000ee y #333333 supera 3:1, y el enlace gana un subrayado en hover y focus. Esto satisface el requisito, aunque nota que axe aún marcará esto para revisión manual ya que no puede verificar automáticamente los estilos hover/focus en todos los casos.

Incorrecto: Subrayado removido sin reemplazo

<style>
  a { color: #1a73e8; text-decoration: none; }
  p { color: #000000; }
</style>

<p>
  Echa un vistazo a nuestras
  <a href="/blog">últimas publicaciones del blog</a>
  para actualizaciones.
</p>

Aunque el color azul puede parecer obvio para usuarios videntes con visión completa del color, remover el subrayado sin proporcionar otro indicador que no sea de color hace que este enlace sea invisible para usuarios con daltonismo o sensibilidad al contraste baja.

Learn more:

Deque Reference

Deque University - How To Fix

→