Comprobador de contraste de color de enlace

• Verificación instantánea de doble contraste: el verificador de contraste de color del enlace evalúa el contraste TANTO con el fondo como con el texto del cuerpo circundante en cada pulsación de tecla. No es necesario presionar ningún botón: ingrese sus tres colores y vea instantáneamente los resultados de aprobación/rechazo de WCAG para todos los criterios críticos de contraste de enlaces.
• Identificación de enlaces WCAG SC 1.4.1: valida específicamente el Criterio de éxito 1.4.1 de WCAG (uso de color) para enlaces. Comprueba que los colores de los enlaces tengan al menos una relación de contraste de 3:1 con respecto al texto del cuerpo, lo que garantiza que los usuarios con deficiencias en la visión del color puedan distinguir los enlaces del contenido normal.
• Procesamiento 100% privado del navegador: todos los cálculos de contraste se ejecutan completamente en su navegador utilizando la fórmula de luminancia relativa WCAG 2.1. Sus valores de color nunca salen de su dispositivo y nunca se envían a ningún servidor: completamente seguro para colores de marcas patentadas y proyectos de clientes.
• Gratis y sin necesidad de registrarse: verifique el contraste de color del enlace tantas veces como sea necesario sin registro, suscripción ni límites de uso. La herramienta es completamente gratuita para siempre con una vista previa en vivo que se actualiza en tiempo real.

• Desarrollo web y diseño CSS: los desarrolladores de aplicaciones para el usuario utilizan el verificador de contraste de color de los enlaces para verificar que los estilos de los enlaces pasen WCAG SC 1.4.1 antes del envío. Garantizar que los enlaces se distingan del texto del cuerpo tanto por el color como por el contraste evita fallos de accesibilidad en las hojas de estilo de producción.
• Validación de token de enlace del sistema de diseño: los mantenedores del sistema de diseño utilizan el verificador de contraste de color de enlace para validar que los tokens de color de enlace (predeterminado, visitado, flotante, activo) tengan suficiente contraste con los tokens de fondo y los tokens de color del cuerpo del texto antes de la publicación.
• Sitios de contenido y comercio electrónico: los equipos de comercio electrónico utilizan el verificador de contraste de color de los enlaces para garantizar que los enlaces de las páginas de productos, los enlaces de navegación y los enlaces de pie de página cumplan con los requisitos WCAG, algo fundamental para los usuarios con baja visión que dependen de una diferenciación clara de los enlaces para la navegación.
• Auditorías WCAG y cumplimiento de accesibilidad: los auditores de accesibilidad utilizan el verificador de contraste de color del enlace durante las auditorías WCAG 2.1 AA. SC 1.4.1 es un punto de falla común: esta herramienta proporciona resultados claros de aprobación/rechazo y sugerencias prácticas para remediar.
• Gestión y publicación de contenido: los editores y publicadores de contenido utilizan el verificador de contraste de color de los enlaces para verificar que los enlaces en línea dentro de los artículos y publicaciones de blogs se distingan claramente del texto del cuerpo circundante, lo que mejora la legibilidad para todos los usuarios.
• Diseño móvil y responsivo: los diseñadores móviles utilizan el verificador de contraste de color de los enlaces para garantizar que los colores de los enlaces funcionen en temas claros y oscuros en pantallas pequeñas donde distinguir los enlaces solo por el color es más difícil debido al brillo y los tamaños de texto más pequeños.

El contraste de color de los enlaces se refiere a la distinción visual de los hipervínculos tanto del fondo sobre el que se encuentran como del texto del cuerpo circundante, según lo medido por la fórmula de relación de contraste WCAG 2.1. A diferencia de la verificación de contraste de texto estándar, la evaluación del color del enlace implica dos comprobaciones distintas: el enlace debe tener suficiente contraste con el fondo (estándar SC 1.4.3) Y el color del enlace debe tener al menos un contraste de 3:1 con el color del cuerpo del texto circundante (SC 1.4.1 Uso del color). Este doble requisito existe porque los usuarios necesitan identificar enlaces incluso si no pueden percibir diferencias en el tono; por ejemplo, los usuarios con protanopía (ceguera al rojo) pueden no ser capaces de distinguir un enlace azul del texto del cuerpo gris oscuro si la diferencia de luminancia es demasiado pequeña. Nuestro verificador de contraste de color de enlaces basado en navegador evalúa ambos criterios simultáneamente, brindando una evaluación integral de aprobación/rechazo con sugerencias prácticas.

1. Ingrese sus tres colores: escriba valores HEX o RGB (o use el selector de color) para el color del enlace, el color del cuerpo del texto y el color de fondo. El área de vista previa en vivo muestra exactamente cómo se verán sus colores junto con un párrafo de muestra que contiene un enlace en línea.
2. Cálculo instantáneo de doble eje: la herramienta calcula la luminancia relativa WCAG 2.1 para cada color y calcula tres relaciones de contraste: vínculo versus fondo, vínculo versus texto del cuerpo y texto del cuerpo versus fondo. Todos los cálculos utilizan la fórmula WCAG estándar y se ejecutan completamente en su navegador.
3. Revisar resultados y solucionar problemas: el panel de resultados muestra el estado de aprobación/reprobación de cada criterio con barras de proporción, una tabla de cumplimiento detallada y una lista de problemas específicos con sugerencias procesables. Utilice el botón "Copiar informe" para exportar los resultados para la documentación.

• SC 1.4.1 - Uso del Color (Nivel AA): El color no debe ser el único medio visual de transmitir información. Para los enlaces identificados únicamente por color, el color del enlace debe tener una relación de contraste de al menos 3:1 con respecto al color del cuerpo del texto circundante. Esto garantiza que los usuarios puedan distinguir enlaces incluso si no pueden diferenciar tonos. Se recomienda agregar subrayados, íconos u otros indicadores sin color.
• SC 1.4.3 - Contraste mínimo (Nivel AA): El texto del enlace (como todo el texto) debe tener al menos un contraste de 4,5:1 con respecto al fondo para texto normal y 3:1 para texto grande (≥18 pt o ≥14 pt en negrita). Esto se aplica al color del enlace contra el color de fondo.
• SC 1.4.11 - Contraste sin texto (Nivel AA): si los enlaces utilizan subrayados, bordes u otros indicadores que no son de texto, esos indicadores deben tener al menos un contraste de 3:1 con el fondo. Esto se aplica al límite visual de cualquier elemento de enlace interactivo.

Si bien el verificador de contraste de color del enlace evalúa las relaciones de contraste matemático, la verdadera accesibilidad del enlace implica algo más que el color:

• No confíe únicamente en el color: combine siempre el color con subrayados, íconos, grosor en negrita u otros indicadores que no sean de color. WCAG SC 1.4.1 requiere esto explícitamente: la identificación de enlaces solo por color no cumple el criterio incluso si las relaciones de contraste son suficientes.
• Considere todos los estados de los enlaces: los estados predeterminado, visitado, flotante, enfocado y activo tienen colores diferentes. Cada estado debe pasar independientemente controles de contraste tanto con el fondo como con el texto del cuerpo.
• Prueba con simulaciones de deficiencia de visión de colores: una combinación de colores que pasa las pruebas de contraste aún puede ser indistinguible para usuarios con ciertos tipos de daltonismo. Utilice simuladores de daltonismo para verificar la distinción de los enlaces.
• Proporcione un texto de enlace descriptivo: incluso con un contraste perfecto, los enlaces "haga clic aquí" y "leer más" son inaccesibles para los usuarios de lectores de pantalla. Utilice texto de enlace descriptivo que tenga sentido fuera de contexto.