Analizador de Contraste de Color
Verifica que tus combinaciones de colores cumplan con los estándares de accesibilidad WCAG.
Colores
Selecciona los colores a analizar
Ratio de Contraste
21.00:1
Excelente
Resultados WCAG
Cumplimiento de estándares de accesibilidad
Texto Normal (menor a 18px)
WCAG AA (4.5:1)
WCAG AAA (7:1)
Texto Grande (18px+ o 14px+ bold)
WCAG AA (3:1)
WCAG AAA (4.5:1)
Vista Previa
Título Grande
Este es un ejemplo de texto normal con los colores seleccionados.
Texto pequeño para verificar la legibilidad en diferentes tamaños.
WCAG AA: Nivel mínimo recomendado
WCAG AAA: Nivel mejorado de accesibilidad
¿Qué es el contraste de color?
El contraste de color es la diferencia de luminosidad entre el texto y su fondo. Un contraste adecuado asegura que el contenido sea legible para todas las personas, incluyendo aquellas con discapacidades visuales.
Estándares WCAG
- WCAG AA (Nivel A): Ratio mínimo de 4.5:1 para texto normal, 3:1 para texto grande
- WCAG AAA (Nivel AAA): Ratio mínimo de 7:1 para texto normal, 4.5:1 para texto grande
- Texto grande: 18px o mayor, o 14px bold o mayor
- Nivel AA es el estándar legal en muchos países
¿Cómo usar el analizador?
- Selecciona el color del texto (foreground)
- Selecciona el color del fondo (background)
- Revisa el ratio de contraste calculado
- Verifica si cumple con WCAG AA o AAA
- Usa "Sugerir" para obtener un color con mejor contraste
- Usa "Intercambiar" para invertir los colores
Importancia de la accesibilidad
- Mejora la experiencia para usuarios con baja visión
- Ayuda a personas con daltonismo
- Facilita la lectura en diferentes condiciones de luz
- Cumple con requisitos legales de accesibilidad
- Mejora la usabilidad general del sitio