Comprobador de contraste
Elige un color de texto y de fondo y ve al instante la relación de contraste WCAG, los resultados AA/AAA y una vista previa en vivo de la combinación.
Vista previa de título grande
Este es texto normal con los colores elegidos, para juzgar la legibilidad directamente.
Umbrales WCAG 2.1: 4,5:1 (AA), 3:1 (AA grande ≥18pt/14pt negrita), 7:1 (AAA), 4,5:1 (AAA grande).
Prueba después
Your files are processed locally in your browser. They are not uploaded to our servers.
Cómo se usa
- Elige o escribe el color del texto y el del fondo.
- Lee la relación de contraste y los resultados AA/AAA para texto normal y grande.
- Ajusta los colores hasta que pasen todas las comprobaciones necesarias.
¿Qué es esta herramienta?
El Comprobador de contraste calcula la relación de contraste WCAG 2.1 entre dos colores con la fórmula oficial de luminancia relativa y la evalúa contra los cuatro umbrales: AA y AAA, para texto normal y grande. Una vista previa en vivo muestra texto real con tus colores para juzgar la legibilidad directamente. Un contraste suficiente es un requisito legal de accesibilidad en muchos países — y ayuda a cualquier usuario a pleno sol.
Usos habituales
- Verificar que los pares texto/fondo de un sistema de diseño cumplen WCAG AA
- Comprobar los colores de marca antes de lanzar una web
- Corregir avisos de bajo contraste de Lighthouse o axe
- Elegir un color de texto legible para un fondo dado
Preguntas frecuentes
¿Qué relación necesito para aprobar?
AA exige 4,5:1 para texto normal y 3:1 para texto grande (≥18pt o 14pt negrita). AAA lo eleva a 7:1 y 4,5:1 respectivamente.
¿Qué cuenta como texto grande?
Texto de 18pt (unos 24px) o mayor, o texto en negrita de 14pt (unos 18,5px) o mayor.
¿Cubre WCAG 3 / APCA?
No, esta herramienta implementa la fórmula WCAG 2.1, que es la que citan los estándares legales y las herramientas de auditoría actuales.
¿Puedo comprobar colores con transparencia?
No, la relación se define para colores sólidos. Aplana antes la transparencia contra su fondo real.