Probaste texto normal?
No basta revisar un titular grande si tambien habra texto pequeno.
Guia practica
Como comprobar contraste WCAG sin adivinar si un color se lee bien
Aprende como comprobar contraste WCAG entre texto y fondo para revisar AA y AAA sin complicarte.
Checklist
Antes de dar por bueno un par de colores
Revisaste el fondo real?
Un degradado o una tarjeta pueden cambiar la lectura respecto a un color liso.
El boton sigue destacando?
Legibilidad y jerarquia deben funcionar juntas.
El sistema completo mantiene coherencia?
No conviene arreglar una combinacion y romper otras.
Idea principal
Por que conviene revisar contraste
Mejoras legibilidad
Un buen contraste hace que el contenido se lea con menos esfuerzo.
Reduce errores visuales
A veces una combinacion parece bonita, pero falla en lectura real.
Facilita decisiones de color
Validar contraste antes de publicar evita ajustes tardios en el sistema visual.
Paso a paso
Como comprobar contraste WCAG
Elige texto y fondo
Define los dos colores que quieres comparar.
Mira el ratio
Ese numero resume la separacion luminosa entre ambos tonos.
Revisa AA y AAA
Confirma si la combinacion pasa para texto normal y texto grande.
Ajusta si hace falta
Cambiar un poco brillo, saturacion o tono puede resolver el problema.
Casos comunes
Donde suele hacer falta revisar contraste
Texto sobre botones
Conviene validar que las llamadas a la accion se sigan leyendo bien.
Tarjetas y banners
Sirve para bloques donde el fondo puede variar mas que un color plano.
Paletas de interfaz
Encaja cuando conviertes colores en estilos reutilizables.
Preguntas frecuentes
Dudas comunes sobre contraste WCAG
AA y AAA significan lo mismo?
No. AAA exige un nivel de contraste mas alto que AA.
Texto grande y pequeno usan la misma regla?
No. El texto grande puede pasar con un ratio menor.
Basta con ver si se ve bonito?
No. La percepcion visual sola no reemplaza una comprobacion real del contraste.
Necesito subir una captura?
No. Solo comparas los colores directamente en el navegador.
Sigue explorando
Paginas y herramientas relacionadas
Compruebalo ahora
Revisa contraste WCAG y valida tus colores en segundos
El verificador te muestra ratio, niveles AA y AAA y una vista previa editable.