TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
El color nunca debe ser el único medio visual para transmitir información. Si dentro de un párrafo quitas el subrayado de un enlace y solo lo pones de color azul, una persona usuaria con acromatopsia (o bajo ciertos reflejos de luz) será incapaz de saber que allí hay un enlace.
La tiranía del diseño ultra-limpio
Una tendencia común en agencias de diseño es aplicar text-decoration: none globalmente para hacer los bloques de texto más "limpios". Esto vulnera de frente la WCAG 1.4.1 (Uso del Color), que es de Nivel A (Crítico).
El patrón erróneo: Código Accesible Deficiente
Solo quienes distinguen correctamente los espectros de luz pueden ubicar la zona interactiva.
<!-- MAL: Solo el color azul delata al enlace -->
<style>
p a { color: #0056b3; text-decoration: none; }
</style>
<p>Para más información sobre el trámite, <a href="/docs">consulte nuestra guía de ayuda</a> antes de continuar.</p>La Solución Accesible: Código Recomendado
Dejar el comportamiento nativo del navegador (subrayado) o agregar un indicador visual inconfundible (un icono o un fondo contrastante).
<!-- BIEN: Subrayado explícito en enlaces integrados en párrafos -->
<style>
p a {
color: #0056b3;
text-decoration: underline;
text-decoration-thickness: 2px;
}
</style>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Usar el emulador de deficiencias visuales de Chrome DevTools (Rendering → Emulate vision deficiencies) seleccionando protanopia, deuteranopia y acromatopsia. Verificar que todos los enlaces en párrafos posean al menos un indicador visual además del color (subrayado, borde, ícono).
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.4.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: la regla link-in-text-block verifica que los enlaces en párrafos tengan un diferenciador visual adicional al color. Usar el emulador de visión de Chrome DevTools para confirmar la percepción bajo deficiencias cromáticas.
