Cómo funciona
Escribe un color de texto y un color de fondo para obtener su relación de contraste, una vista previa en directo y si se cumple o no cada nivel WCAG. Si la pareja no cumple, el comprobador sugiere el color de texto más cercano con el mismo tono que alcanza 4,5:1, y se aplica con un solo toque.
Relación de contraste = (luminancia más clara + 0,05) ÷ (luminancia más oscura + 0,05)
Requisitos de las WCAG
- Texto normal: al menos 4,5:1 para AA y 7:1 para AAA.
- Texto grande (24 px, o 18,66 px en negrita): al menos 3:1 para AA y 4,5:1 para AAA.
- Botones, iconos y bordes de formularios: al menos 3:1 frente a lo que los rodea.
Consejos
- El texto gris sobre blanco suele fallar — revisa también los textos de ejemplo de los campos y los pies de foto.
- Un buen contraste ayuda a todo el mundo, también a quien lee en el móvil al aire libre.
- Usa el botón de intercambiar para comprobar texto claro sobre fondo oscuro.
Criterios y fuentes
- La fórmula de contraste y los umbrales siguen los criterios de conformidad 1.4.3, 1.4.6 y 1.4.11 de las WCAG 2.2 (W3C)
Última revisión 7 de octubre de 2026
Preguntas frecuentes
¿Qué relación de contraste necesito?
El texto normal necesita 4,5:1 para WCAG AA y 7:1 para AAA. El texto grande necesita 3:1 para AA y 4,5:1 para AAA.
¿Qué se considera texto grande?
El texto de al menos 24 px, o de al menos 18,66 px si está en negrita.
¿Qué hago si mis colores no cumplen?
Usa el color sugerido. Mantiene tu tono y tu saturación y solo cambia la luminosidad hasta que la pareja alcanza 4,5:1.
¿Importa el contraste en botones e iconos?
Sí. Las WCAG piden al menos 3:1 entre las partes de la interfaz, como botones, iconos y bordes de campos, y lo que las rodea.
¿Afecta la transparencia al resultado?
El comprobador usa colores sólidos. Para texto semitransparente, comprueba el color que realmente ves sobre el fondo.