Verificador de Contraste de Color
Verifica ratios de contraste de color para cumplimiento WCAG 2.1. Valida estándares AA y AAA al instante.
¿Qué es la relación de contraste WCAG?
La relación de contraste WCAG mide la diferencia de luminancia entre colores de primer plano y fondo. Va de 1:1 a 21:1. Ratios más altos significan mejor legibilidad.
¿Cuáles son los requisitos WCAG AA y AAA?
WCAG AA requiere un mínimo de 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 y 4.5:1 respectivamente.
¿Qué cuenta como texto grande?
Texto grande se define como 18pt (24px) o mayor, o 14pt (18.66px) negrita o mayor. Tiene requisitos de contraste más bajos.
¿Por qué es importante el contraste de color?
El contraste adecuado asegura que el texto sea legible para personas con discapacidades visuales y mejora la legibilidad para todos en diversas condiciones.
¿Cómo calculo la relación de contraste?
Se calcula usando los valores de luminancia relativa. La fórmula es (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro y L2 el más oscuro.
¿Cuál es el contraste mínimo para elementos UI?
WCAG requiere un mínimo de 3:1 para componentes UI y objetos gráficos. Esto asegura que botones e iconos sean visibles.
¿Puedo usar cualquier combinación de colores?
No todas las combinaciones cumplen estándares de accesibilidad. Use este verificador para validar sus elecciones de color.
¿Qué es la luminancia relativa?
Es el brillo percibido de un color, de 0 (negro) a 1 (blanco). Se calcula usando el espacio de color sRGB.
¿Debo verificar el contraste en imágenes?
El texto dentro de imágenes debe cumplir los mismos requisitos. Para imágenes decorativas no aplica.
¿Qué herramientas ayudan con el contraste?
Use herramientas de desarrollador del navegador, plugins de diseño o verificadores online como este.