Comprobador de contraste de color

Comprueba ratios de contraste para cumplir WCAG AA/AAA con vistas previas instantáneas, sugerencias de corrección y comprobaciones para compartir.

WCAG AA: 4.5:1 (texto normal) y 3:1 (texto grande). WCAG AAA: 7:1 (texto normal) y 4.5:1 (texto grande). Texto grande es 18pt+ (24px) o 14pt+ en negrita.

Color de primer plano (texto)

Color de fondo

Vista previa en vivo

Incluye muestras de texto normal y grande
Texto sobre fondo

Texto de muestra (normal)

Texto de muestra (grande)

Texto de muestra (negrita grande)

Fondo sobre texto

Texto de muestra (normal)

Texto de muestra (grande)

Texto de muestra (negrita grande)

Ratio de contraste y WCAG

¿Qué significan AA y AAA?

AA es el requisito mínimo de contraste para la mayoría del texto (4.5:1 para texto normal, 3:1 para texto grande).

AAA es accesibilidad mejorada (7:1 para texto normal, 4.5:1 para texto grande).

Texto grande significa 18pt (24px) o más, o 14pt (18.66px) en negrita.

Ratio de contraste
—
Ajusta los colores para ver resultados.

WCAG AA

Texto normal (≥4.5:1) —
Texto grande (≥3:1) —

Nivel WCAG AAA

Texto normal (≥7:1) —
Texto grande (≥4.5:1) —

Revisados recientemente

Aún no hay pares de colores recientes.

Casos de uso

Formas comunes de usar un comprobador de contraste.

  • Verificar contraste en botones

    Confirma rápidamente que el texto de tus botones es legible y cumple WCAG.

  • Corregir una combinación que falla

    Ajusta la luminosidad y aplica sugerencias para alcanzar AA/AAA manteniéndote cerca del color original.

  • Auditar colores del sistema

    Prueba combinaciones de tu sistema de diseño y documenta cuáles cumplen AA/AAA en distintos tamaños.

  • Comparar fondos de marca

    Compara fondos de marca con texto negro/blanco para elegir la opción más legible.

  • Validar cumplimiento para texto grande

    Comprueba cuándo un par sirve para texto grande aunque falle para texto normal.

Preguntas frecuentes del Comprobador de Contraste de Color

¿Cómo uso el comprobador de contraste de color?
Introduce o elige un color de texto y un color de fondo, revisa el ratio de contraste y los resultados AA/AAA en vivo, y usa los deslizadores o las sugerencias si la combinación falla. Usa Restablecer para volver al ejemplo predeterminado negro sobre blanco.
¿Este comprobador de contraste es gratuito?
Sí. La app es gratuita y no requiere una cuenta.
¿El comprobador guarda o comparte mis colores?
El comprobador funciona en tu navegador. Los pares recientes se guardan solo en el almacenamiento local de este navegador para que puedas reabrirlos, y el par actual también se escribe en la URL de la página para que puedas compartir el resultado. En producción la página puede cargar analíticas estándar del sitio.
¿Por qué obtengo un error de color o un resultado inesperado?
Comprueba que cada valor sea un HEX, RGB o HSL válido. Si la combinación sigue fallando, usa Restablecer, Par accesible aleatorio o los botones de sugerencias para encontrar una alternativa que cumpla.
¿Dónde encuentro la guía WCAG y los atajos de teclado?
Usa el panel de ayuda integrado. Explica los formatos aceptados, los umbrales AA/AAA, los atajos, el comportamiento del historial local y el cierre de diálogos con Escape.