Comprobador de Contraste

Comprueba las proporciones de contraste de color para el cumplimiento de accesibilidad WCAG AA/AAA. Gratis, al instante y funciona sin conexión.

Large Text
Normal text sample for contrast testing
Small / UI text sample
--
Contrast Ratio
--
AA Normal (4.5:1)
--
AA Large (3:1)
--
AAA Normal (7:1)
--
AAA Large (4.5:1)

About WCAG Contrast

WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios for text to be readable:

LevelNormal TextLarge Text (≥18px or bold ≥14px)
AA4.5:13:1
AAA7:14.5:1

Contrast ratio ranges from 1:1 (same colors) to 21:1 (black on white). Higher = better readability.

About Contrast Checker

Comprueba las proporciones de contraste de color para el cumplimiento de accesibilidad WCAG. Prueba el texto contra los colores de fondo. Ve las calificaciones AA y AAA para texto normal y grande. Esencial para diseñadores web y desarrolladores que crean interfaces accesibles.

Cumplimiento WCAG

Comprueba los estándares WCAG 2.1 AA y AAA. Sabrás al instante si tu combinación de colores cumple los requisitos de accesibilidad.

Vista previa en vivo

Ve tu texto sobre el fondo en tiempo real. Ajusta los colores con deslizadores o introduce valores HEX/RGB directamente.

Texto normal y grande

Calificaciones separadas para texto de cuerpo y texto grande/encabezados. Diferentes umbrales para cada uno, mostrados claramente.

Sugerencias de color

Obtén sugerencias más claras/oscurecidas que cumplan los requisitos de contraste. Encuentra alternativas accesibles al instante.

📋 Common Use Cases

Accesibilidad Web

Verifica que los colores de tu texto y fondo cumplan las pautas de contraste WCAG AA/AAA para sitios web legibles y accesibles.

Revisión de Diseño

Comprueba las combinaciones de colores en diseños de interfaz, botones y tipografía antes de publicarlos a los usuarios.

Elección de Colores de Marca

Confirma que los colores de tu marca funcionen en superficies claras y oscuras con suficiente contraste.

Diseño de Documentos y Diapositivas

Asegura que el texto en documentos, presentaciones y PDFs sea legible para todas las audiencias.

🪜 How to Use This Tool

  1. Introduce tus colores
    Elige o pega un color de texto (primer plano) y un color de fondo.
  2. Ve la proporción
    La herramienta calcula la proporción de contraste y muestra el resultado al instante.
  3. Comprueba la calificación
    Ve si la combinación pasa WCAG AA o AAA para texto normal y grande.
  4. Ajusta según sea necesario
    Modifica los colores hasta que cumplan tu nivel de accesibilidad objetivo.

📚 Related Guides

Frequently Asked Questions

¿Esta herramienta de color es gratuita?▼
Sí. Todas las herramientas de color son completamente gratuitas. No se requiere registro.
¿Cómo funciona el comprobador de contraste?▼
Calcula las proporciones de contraste WCAG 2.1 entre los colores de primer plano y fondo, mostrando aprobado/fallo para AA y AAA en tamaños de texto normal y grande.