Añade la entrada
Colores HEX para el primer plano y el fondo.
Mesa de diseño
Comprobador de contraste WCAG
Consulta de un vistazo los resultados AA y AAA.
Privacidad integradaTu trabajo permanece contigo
Legibilidad desde el diseño.
Previsualiza texto normal y texto grande antes de publicar tu interfaz.
Relación de contraste
17,85:1
Cumple AA
Texto normal AACumple
Texto grande AACumple
Texto normal AAACumple
Texto grande AAACumple
Componentes de interfazCumple
Tu trabajo permanece privado en el navegador mientras usas esta herramienta.
¿Qué hace comprobador de contraste wcag?
Calcula la relación de contraste WCAG 2 entre un color HEX de primer plano y otro de fondo, muestra la combinación y la compara con los umbrales AA, AAA, texto grande y componentes de interfaz.
- Entrada
- Colores HEX para el primer plano y el fondo.
- Resultado
- Relación de contraste, resultados WCAG y vista previa.
- Precio
- Gratis
- Cuenta
- No necesaria
Cómo usar comprobador de contraste wcag
Elige los ajustes
Consulta de un vistazo los resultados AA y AAA.
Guarda o copia
Relación de contraste, resultados WCAG y vista previa.
Consejo práctico
Busca al menos 4,5:1 para texto normal y no comuniques información solo mediante el color.
Cuándo usar comprobador de contraste wcag
Comprobar colores de texto antes de añadirlos a un sistema de diseño.
Comparar la etiqueta de un botón con su fondo para texto normal y grande.
Intercambiar primer plano y fondo para confirmar que la relación no cambia mientras revisas el aspecto visual.
Ejemplo
Un ejemplo concreto de comprobador de contraste wcag
- Entrada
- Texto #0F172A sobre fondo #FFFFFF
- Resultado
- La relación calculada es 17,85:1. Cumple AA y AAA para texto normal y grande y supera el umbral 3:1 de componentes de interfaz.
Qué puedes esperar
Cómo funciona
Cada canal sRGB se linealiza con la fórmula WCAG, se combina como luminancia relativa y se compara mediante (más claro + 0,05) / (más oscuro + 0,05). El resultado se evalúa frente a 4,5:1, 3:1 y 7:1 según corresponda.
Antes de usarla
Límites y casos especiales
- Solo se evalúan colores HEX opacos. La composición alfa, los degradados, las imágenes de fondo, el peso tipográfico, el suavizado y los estados quedan fuera del cálculo.
- Una relación válida no garantiza accesibilidad completa: también hay que revisar tamaño del texto, señales no basadas en color, foco y contexto real.
Normas y fuentes
Preguntas frecuentes
Preguntas sobre Comprobador de contraste WCAG
¿comprobador de contraste wcag es gratis?
Sí. Comprobador de contraste WCAG se puede usar gratis.
¿comprobador de contraste wcag mantiene privado mi trabajo?
Sí. Tu trabajo permanece privado mientras usas la herramienta; no se sube lo que introduces.
¿Qué se considera texto grande en estas comprobaciones WCAG?
WCAG define texto grande como al menos 18 puntos, o 14 puntos si está en negrita. La herramienta muestra relación y umbral, pero no puede conocer el tamaño ni el peso final de la interfaz.
¿Intercambiar los colores cambia la relación de contraste?
No. La fórmula siempre coloca la luminancia mayor sobre la menor, por lo que el orden no cambia el resultado numérico, aunque la vista previa sí puede percibirse de otra manera.