Calculadora de Ratio de Contraste de Color WCAG
Calcula el ratio de contraste relativo WCAG 2.1 entre un color de primer plano y fondo, y verifica el cumplimiento AA y AAA para texto normal y grande.
Cómo usar la Calculadora de Ratio de Contraste de Color WCAG
- Introduce el color de primer plano como código hex (#rrggbb).
- Introduce el color de fondo como código hex.
- Haz clic en Calcular para ver el ratio de contraste y los veredictos AA/AAA.
Casos de Uso
- •Revisión de tokens de diseño durante el proceso de branding.
- •Auditorías de accesibilidad de interfaces existentes.
- •Verificación de composiciones de texto sobre imagen.
Fórmula
Ratio = (L1 + 0.05) / (L2 + 0.05) donde L1 es la luminancia relativa más clara y L2 la más oscura. Luminancia simplificada: 0.2126·R + 0.7152·G + 0.0722·B en una escala sRGB de 0–1.
Preguntas Frecuentes
¿Por qué AA es el mínimo?
El nivel AA de WCAG 2.1 es el objetivo adoptado por la mayoría de los reguladores (EN 301 549, Section 508, jurisprudencia ADA). AAA es un ideal para material de lectura extensa.
¿Qué se considera texto grande?
El texto grande es de al menos 18 pt (24 px) regular, o 14 pt (18.66 px) en negrita. Todo lo demás es texto normal y debe cumplir con 4.5:1.
¿Es la luminancia simplificada compatible con WCAG?
Para la mayoría de los pares sRGB, el resultado redondeado coincide con el veredicto de aprobado/reprobado de la fórmula completa. En casos límite alrededor del umbral, verifique con la fórmula oficial de WCAG o APCA para proyectos nuevos.