Informe de cumplimiento de las WCAG

• Informe instantáneo de cumplimiento de la paleta completa: el informe de cumplimiento de las WCAG calcula las relaciones de contraste para cada par de primer plano y fondo en su paleta al instante mientras escribe. No es necesario presionar ningún botón: agregue o cambie cualquier color y todo el informe se actualizará en tiempo real, mostrando aprobación/rechazo para todos los criterios WCAG 2.1.
• Cobertura integral de criterios: cada par de colores se evalúa según el Criterio de cumplimiento WCAG 2.1 1.4.3 (Contraste mínimo - AA), 1.4.6 (Contraste mejorado - AAA) y 1.4.11 (Contraste sin texto - AA). Los resultados se muestran para texto normal, texto grande y componentes de interfaz de usuario con un indicador claro de aprobación/rechazo para cada uno.
• Procesamiento 100% privado del navegador: todos los cálculos de contraste se realizan localmente en su navegador mediante JavaScript. Los valores de su paleta de colores 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: genere informes ilimitados de cumplimiento de las WCAG sin registro, suscripción ni límites de uso. La herramienta es completamente gratuita para siempre y no hay anuncios que bloqueen la interfaz.

• Validación del sistema de diseño: los encargados del mantenimiento del sistema de diseño utilizan el informe de cumplimiento de las WCAG para validar que cada ficha de color del sistema cumpla con los estándares de accesibilidad. Ingrese a la paleta completa (texto, fondo, acento, enlace, éxito, error y advertencia) y obtenga una matriz de cumplimiento completa para todas las combinaciones.
• Desarrollo de temas CSS: los desarrolladores de frontend utilizan el informe de cumplimiento de WCAG para verificar que las paletas de colores de sus temas claros y oscuros cumplan con los requisitos de accesibilidad antes de la implementación. El informe detecta problemas de contraste a tiempo, evitando regresiones de accesibilidad en la producción.
• Auditoría de accesibilidad: los auditores de accesibilidad utilizan el informe de cumplimiento WCAG para evaluar rápidamente el contraste de color de un sistema de diseño completo. El análisis integral par por par identifica exactamente qué combinaciones de colores fallan y en qué nivel, lo que agiliza el proceso de remediación.
• Documentación de cumplimiento: los consultores de accesibilidad utilizan el informe de cumplimiento WCAG para generar documentación para informes VPAT (Plantilla voluntaria de accesibilidad de productos) y declaraciones de conformidad de accesibilidad. La función copiar al portapapeles facilita la inclusión de resultados en la documentación formal.
• Diseño de marca y marketing: los diseñadores de marca utilizan el informe de cumplimiento de las WCAG para garantizar que los materiales de marketing, las páginas de destino y las pautas de la marca utilicen combinaciones de colores que cumplan con los estándares de accesibilidad sin comprometer la identidad de la marca.
• Plataformas SaaS y de comercio electrónico: los equipos de productos utilizan el informe de cumplimiento de WCAG para validar que todo su sistema de color de interfaz de usuario (desde botones y enlaces hasta estados de formulario y alertas) proporciona suficiente contraste para todos los usuarios, lo que reduce el riesgo legal y mejora las tasas de conversión para los usuarios con discapacidad visual.

Un informe de cumplimiento de las WCAG evalúa si las combinaciones de colores en una paleta de diseño cumplen con los requisitos de contraste definidos en las Pautas de accesibilidad al contenido web (WCAG) 2.1. Dado un conjunto de colores (normalmente texto, fondo, acento, enlace y otros colores de la interfaz de usuario), el informe calcula la relación de contraste para cada par significativo de primer plano y fondo y lo compara con los umbrales WCAG para texto normal (AA: 4,5:1, AAA: 7:1), texto grande (AA: 3:1, AAA: 4,5:1) y componentes de la interfaz de usuario (AA: 3:1). El resultado es una matriz completa que muestra exactamente qué combinaciones de colores superan o no cada criterio.

1. Ingrese su paleta de colores: comience con los cuatro colores esenciales (texto, fondo, acento y enlace) escribiendo valores HEX o usando el selector de color. Agregue colores opcionales como encabezado, borde, éxito, error y advertencia según sea necesario. También puede cargar una paleta de muestra para ver cómo funciona el informe.
2. Se calculan las relaciones de contraste: la herramienta convierte cada color a sus componentes sRGB y calcula la luminancia relativa utilizando la fórmula WCAG 2.1. Para cada par único de primer plano y fondo, la relación de contraste se calcula como (L₁ + 0,05) / (L₂ + 0,05) donde L₁ es la luminancia más clara. El resultado es un valor entre 1:1 (sin contraste) y 21:1 (contraste máximo).
3. El informe se genera instantáneamente: cada par de colores se evalúa según los cinco criterios WCAG (texto normal AA y AAA, texto grande AA y AAA, componentes de interfaz de usuario AA). El informe muestra una puntuación de cumplimiento general, calificaciones por par y recomendaciones de uso para los pares que no superan todos los criterios. Todo el procesamiento se realiza íntegramente en su navegador: nunca se cargan datos.

• Texto normal - AA (4,5:1): la relación de contraste mínima requerida para el cuerpo del texto de menos de 18 puntos (o 14 puntos en negrita). Este es el requisito de accesibilidad más común y lo exigen la mayoría de las leyes de accesibilidad en todo el mundo, incluidas ADA, EN 301 549 y AODA.
• Texto normal - AAA (7:1): una relación de contraste mejorada para texto normal que proporciona una mejor legibilidad para usuarios con discapacidad visual. Se recomienda AAA para contenido esencial, pero no es obligatorio para el cumplimiento general de las WCAG.
• Texto grande - AA (3:1): un requisito de contraste reducido para texto que tiene al menos 18 puntos o 14 puntos en negrita, ya que los caracteres más grandes son más fáciles de distinguir. El texto grande que pasa 3:1 se considera aceptable para el cumplimiento de AA.
• Texto grande - AAA (4.5:1): el requisito de contraste mejorado para texto grande. El texto grande que pasa 4.5:1 cumple con los estándares AAA.
• Componentes de la interfaz de usuario - AA (3:1): se aplica a objetos gráficos y componentes de la interfaz de usuario (botones, campos de formulario, iconos) donde la información visual debe ser distinguible. Esto se define en el Criterio de Conformidad 1.4.11 de las WCAG 2.1.

La puntuación de cumplimiento general muestra el porcentaje de pares de colores que pasan las WCAG AA para texto normal; esto representa el criterio más estricto comúnmente requerido. Una puntuación del 100% significa que cada combinación de colores de su paleta es segura para usar en el cuerpo del texto. La tabla por par le brinda la relación de contraste exacta y el estado de aprobación/rechazo para cada criterio. Los pares marcados como AA Grande se pueden usar para texto grande y elementos de la interfaz de usuario, pero no para el texto del cuerpo. Los pares marcados como Fallido no deben usarse juntos para ningún texto o elemento interactivo. Utilice la sección de recomendaciones para comprender las limitaciones de cada par no pasante y planificar sus ajustes de color.