Elegir colores de enlace que sigan siendo distinguibles

Separa legibilidad e identificación del enlace

Primero determina si el texto del enlace es legible sobre su fondo. Según el criterio 1.4.3 de WCAG 2.2, el texto ordinario suele requerir una relación de contraste mínima de 4,5:1, mientras que el texto grande que cumple las condiciones tiene un umbral de 3:1. Esa comparación no indica qué palabras son enlaces. El criterio 1.4.1 exige además que el color no sea el único medio visual para transmitir información o distinguir un elemento. Un subrayado permanente ofrece una solución directa: sigue visible en escala de grises y no depende de percibir el tono elegido. La tipografía y la posición añaden contexto, pero los enlaces dentro de prosa necesitan una decoración explícita.

• Mide cada color de enlace sobre su fondo real, incluidas tarjetas, avisos, filas de tabla y superficies oscuras.
• Mantén un subrayado u otra forma permanente en enlaces dentro de prosa, sin esperar al hover para revelarla.
• No distingas un enlace del texto vecino solamente por el color cuando comparten tamaño y peso de fuente.
• Escribe un texto significativo para que el nombre accesible describa el destino sin depender del color circundante.

Define una matriz completa de estados

Predeterminado, visitado, hover, foco y activo son estados renderizados diferentes. Cada primer plano debe seguir siendo legible sobre el fondo, y el cambio de estado no debería eliminar la característica que identifica el enlace. El estado visitado ayuda a reconocer el historial, pero no puede quedar tan tenue que falle el contraste textual. El hover ofrece respuesta al puntero, aunque no sustituye un indicador de foco para teclado. El estado activo puede durar poco y aun así no debería hacer desaparecer el texto. Documenta color y decoración permitidos en cada caso y después ensáyalos dentro de los componentes reales.

Implementa color y decoración conjuntamente

El CSS debe expresar el enlace mediante una combinación de color de primer plano, decoración y tratamiento del foco. El ejemplo mantiene el subrayado en los estados predeterminado y visitado, aumenta su grosor con hover y añade un contorno de foco independiente. Los valores son ilustrativos y deben volver a medirse sobre cada fondo admitido. El selector focus-visible apunta al foco de estilo teclado en navegadores compatibles, mientras el comportamiento nativo debería conservarse como alternativa. Evita outline: none salvo que exista un reemplazo igual de visible. El mismo código en todas las traducciones impide que se copien implementaciones diferentes.

a {
  color: #005FCC;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

a:visited {
  color: #6F42C1;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

a:focus-visible {
  outline: 3px solid #6D28D9;
  outline-offset: 3px;
}

Comprueba el contraste con ambos vecinos

Un enlace en línea tiene un fondo detrás y texto ordinario a los lados. El contraste textual trata la primera relación. Cuando una implementación usa deliberadamente el color para diferenciar, la técnica suficiente G183 del W3C describe una relación 3:1 entre enlace y texto próximo, acompañada por una señal visual adicional durante hover o foco. El subrayado permanente es más directo porque proporciona siempre una diferencia no cromática; aun así no elimina la necesidad de legibilidad frente al fondo. Calcula relaciones con los colores sRGB ya renderizados, incluido el resultado de la transparencia. Nombres como azul o morado no constituyen una medición. G183 es una técnica suficiente, no una implementación obligatoria ni la única forma de satisfacer el criterio.

• Calcula el contraste enlace-fondo para los primeros planos predeterminado, visitado, hover, foco y activo.
• Si el color diferencia enlaces en línea, evalúa también la relación con el texto próximo y consulta la técnica aplicable.
• Considera subrayados, contornos, iconos y formas como señales explícitas en vez de confiar en un cambio de tono.
• Recalcula tras opacidad, capas o mezclas porque el token de origen puede diferir de los píxeles finales.
• Examina enlaces dentro de contenedores atenuados: un enlace real no debe parecer contenido deshabilitado.

Conserva la semántica y el foco visible

Cuando ejecuta navegación, un enlace debe seguir siendo un ancla con destino válido. La semántica nativa aporta operación por teclado, comportamiento de foco e información para tecnologías de asistencia que un span coloreado no posee. El indicador visible debe probarse en cada contexto, especialmente dentro de una tarjeta, un menú o un aviso oscuro. Un contorno puede tocar varios colores, por lo que hay que observar todas las zonas adyacentes. El foco no debe indicarse solo mediante un cambio cromático. Tampoco conviene vestir como enlaces los botones que realizan acciones en la página; la semántica correcta reduce excepciones visuales y vuelve predecible la interacción.

Prueba contenido, estados y entornos

Revisa enlaces en párrafos, navegación, tarjetas, tablas, alertas, pies y mensajes de error. Recorre la página con teclado para examinar orden y visibilidad del foco; después visita destinos y revela el color visitado. Aumenta el zoom y prueba alto contraste o forced colors donde estén disponibles. Las pruebas automáticas verifican parejas de tokens y pueden detectar la retirada del subrayado, pero no juzgan si las palabras describen bien el destino ni si overflow recorta el foco. Incluye etiquetas traducidas largas, pues el ajuste de línea puede trasladar partes del enlace entre fondos. Repite la matriz cuando cambien tipografía, superficies o tokens compartidos.

• Renderiza enlaces en línea, independientes, de navegación, de tarjeta y de tabla sobre cada superficie permitida.
• Recorre cada ejemplo con teclado y confirma que el foco se ve sin requerir hover del puntero.
• Abre destinos para mostrar el estado visitado y vuelve a medirlo, sin limitar la prueba al navegador limpio.
• Comprueba zoom, ajuste de línea, forced colors y traducciones antes de aprobar la matriz de estados.