Comprobador de Contraste
Introduce un color de texto y uno de fondo para calcular la ratio de contraste WCAG, con resultados de aprobado/fallido en AA y AAA y una vista previa en vivo.
🔒 Procesado localmente en tu navegador
Loading…
Cómo usarlo
- Introduce un color de texto (primer plano) en el primer campo, o elígelo con el selector de color.
- Introduce un color de fondo en el segundo campo, o elígelo con el selector de color.
- La ratio de contraste y la vista previa de la combinación real se actualizan al instante.
- Revisa las cuatro insignias para ver si la combinación aprueba WCAG AA y AAA en texto normal y grande.
Características
- Admite los formatos de color hex, rgb() y hsl()
- Calcula con exactitud la ratio de contraste por luminancia relativa de WCAG 2.x
- Muestra insignias de aprobado/fallido para AA y AAA en texto normal y grande
- Vista previa en vivo de la combinación real de texto sobre fondo
- 100% en el navegador: tus colores nunca salen de tu dispositivo
Preguntas frecuentes
¿Cómo se calcula la ratio de contraste?
La ratio se calcula con la fórmula de WCAG 2.x: los canales sRGB de cada color se linealizan, se combinan en un valor de luminancia relativa y la ratio es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro. Las ratios van de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel estándar que buscan la mayoría de sitios; AAA es un nivel más estricto y mejorado. AA exige 4.5:1 en texto normal y 3:1 en texto grande, mientras que AAA exige 7:1 y 4.5:1 respectivamente.
¿Qué se considera texto grande según WCAG?
El texto grande se define como al menos 18pt (24px) en peso normal, o al menos 14pt (18.66px) en negrita. Los trazos más grandes y gruesos siguen siendo legibles con un contraste menor, por eso el requisito es más bajo.
¿Qué formatos de color puedo introducir?
Puedes escribir códigos hex (#000 o #000000), cadenas rgb()/rgba() o hsl()/hsla(), o usar los selectores de color junto a cada campo.
¿Esta herramienta guarda o sube mis colores?
No. Todo el análisis y el cálculo de contraste ocurren localmente en tu navegador con JavaScript puro. Nada se envía a un servidor ni se guarda.