Calculadora de Relación de Contraste de Color (WCAG)
Calculadora de Relación de Contraste de Color (WCAG)
Introduce un color de primer plano (texto) y un color de fondo como códigos hex. Esto calcula su relación de contraste usando la fórmula WCAG y te dice qué niveles de conformidad de accesibilidad (AA, AAA) cumple la combinación.
- Fórmula: Relación de Contraste = (L1 + 0.05) ÷ (L2 + 0.05), donde L1 y L2 son la luminancia relativa del color más claro y más oscuro, según la fórmula WCAG 2.x.
- Umbrales WCAG: AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt+ negrita); AAA requiere 7:1 para texto normal y 4.5:1 para texto grande.
- Se ejecuta completamente en tu navegador: tus colores se calculan localmente con JavaScript y nunca se envían a un servidor.
¿Qué cuenta como "texto grande" para el umbral inferior AA/AAA?
18pt (24px) de peso regular o 14pt (~18.5px) negrita o mayor — el texto grande es más fácil de leer con menor contraste.
Mis colores no pasan WCAG AA — ¿qué debo cambiar?
Oscurece el color más oscuro, aclara el más claro, o ambos — incluso pequeños ajustes de luminosidad pueden aumentar significativamente la relación de contraste.
Calculadora de Relación de Contraste de Color (WCAG)
Introduce un color de primer plano (texto) y un color de fondo como códigos hex. Esto calcula su relación de contraste usando la fórmula WCAG y te dice qué niveles de conformidad de accesibilidad (AA, AAA) cumple la combinación.
- Fórmula: Relación de Contraste = (L1 + 0.05) ÷ (L2 + 0.05), donde L1 y L2 son la luminancia relativa del color más claro y más oscuro, según la fórmula WCAG 2.x.
- Umbrales WCAG: AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt+ negrita); AAA requiere 7:1 para texto normal y 4.5:1 para texto grande.
- Se ejecuta completamente en tu navegador: tus colores se calculan localmente con JavaScript y nunca se envían a un servidor.
¿Qué cuenta como "texto grande" para el umbral inferior AA/AAA?
18pt (24px) de peso regular o 14pt (~18.5px) negrita o mayor — el texto grande es más fácil de leer con menor contraste.
Mis colores no pasan WCAG AA — ¿qué debo cambiar?
Oscurece el color más oscuro, aclara el más claro, o ambos — incluso pequeños ajustes de luminosidad pueden aumentar significativamente la relación de contraste.