Verificador de contraste de colores WCAG

Calcula la relación de contraste WCAG 2.2 entre un color de texto y uno de fondo (HEX, RGB, HSL o selector visual), indicando si cumple AA y AAA para texto normal y texto grande, con vista previa de botón, enlace y párrafo, y sugerencias de un color más claro o más oscuro para alcanzar un objetivo. El contraste es solo una parte de la accesibilidad de una interfaz — la herramienta lo indica explícitamente.

Procesamiento en tu dispositivo, sin IA

Relación de contraste: 18.88:1

✓ AA texto normal (4.5:1)✓ AA texto grande (3:1)✓ AAA texto normal (7:1)✓ AAA texto grande (4.5:1)

Vista previa de párrafo con este contraste.

Enlace de ejemplo

El contraste es solo una parte de la accesibilidad de una interfaz.

Los datos se procesan en tu dispositivo y no se envían al servidor.

Casos de uso

Cómo utilizar esta herramienta

  1. Introduce o selecciona el color de texto y de fondo
  2. Revisa la relación de contraste y los niveles AA/AAA
  3. Copia las variables CSS o prueba una sugerencia de color

Preguntas frecuentes

¿Cumplir el contraste hace que mi sitio sea accesible?
No por sí solo. El contraste es solo una parte de la accesibilidad de una interfaz; también importan el orden de foco, las etiquetas, el texto alternativo y muchos otros factores.
¿Redondea la relación de contraste antes de decidir si aprueba?
No. Calcula la relación exacta y solo redondea el número mostrado; la aprobación AA/AAA se decide con el valor sin redondear.

Herramientas relacionadas

Sin IA
Extractor de paleta de colores
Sin IA
Generador de favicons
Sin IA
Conversor universal de unidades
← Volver al inicio