Comprobador de Contraste de Color

Verifica tus combinaciones de color contra los estándares de accesibilidad WCAG — con vista previa en vivo y sugerencias automáticas.

💡 Elige un color de texto y uno de fondo. El ratio de contraste y los resultados WCAG AA/AAA se actualizan en vivo. Si algo falla, haz clic en un color sugerido para corregirlo al instante.

Ratio de Contraste
3.67:1
Texto normal
Menor de 24px (o 18.5px en negrita) — AA exige 4.5:1, AAA exige 7:1
✗ AA Falla✗ AAA Falla
Texto grande
24px o más (o 18.5px en negrita) — AA exige 3:1, AAA exige 4.5:1
✓ AA Pasa✗ AAA Falla
Componentes UI y gráficos
Botones, bordes de formularios, iconos — AA exige 3:1
✓ AA Pasa
Correcciones sugeridas

Mismo tono y saturación, con la luminosidad ajustada hasta pasar el test. Haz clic para aplicar.

Vista previa en vivo

Este es texto normal de 16px. Debe ser cómodo de leer en párrafos largos — la mayoría del contenido web se ve así.

Texto de encabezado grande

Componente botón
#6b7280/#111827

¿Qué es un comprobador de contraste de color?

Un comprobador de contraste mide la diferencia de luminancia entre dos colores — normalmente el texto y su fondo — y la expresa como un ratio desde 1:1 (colores idénticos) hasta 21:1 (negro sobre blanco). Este ratio determina si la combinación es legible para personas con baja visión, daltonismo, o cualquiera que mire una pantalla bajo luz solar intensa. Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen los ratios mínimos que un sitio debe cumplir para considerarse accesible, y en muchos países estos requisitos forman parte de la legislación, como la ADA en Estados Unidos o el Acta Europea de Accesibilidad.

WCAG AA vs AAA: ¿cuál es la diferencia?

WCAG define dos niveles de conformidad para el contraste. El nivel AA — el estándar que exigen la mayoría de leyes y auditorías — requiere un ratio mínimo de 4.5:1 para texto normal y 3:1 para texto grande (24px+, o 18.5px+ en negrita) y componentes de interfaz. El nivel AAA es más estricto: 7:1 para texto normal y 4.5:1 para texto grande, recomendado para contenido dirigido a usuarios con impedimentos visuales más severos. La mayoría de proyectos apuntan a AA como base y aplican AAA a contenido crítico como textos legales o información de salud.

¿Cómo se calcula el ratio de contraste?

La fórmula WCAG primero convierte cada color a su luminancia relativa — una medida del brillo percibido que pondera más el verde que el rojo o el azul, porque el ojo humano es más sensible al verde. Cada canal RGB se corrige con gamma y luego se combina como 0.2126×R + 0.7152×G + 0.0722×B. El ratio es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro. Esta herramienta ejecuta la fórmula exacta en tu navegador — tus datos nunca salen de tu dispositivo.

Consejos para diseño de color accesible

  • No dependas solo del color — acompáñalo de iconos, subrayados o etiquetas para estados como errores
  • Prueba tema claro y oscuro: una paleta que pasa en uno suele fallar en el otro
  • El texto gris sobre blanco debe ser #767676 o más oscuro para pasar AA
  • Verifica también los estados hover, focus y disabled — deben cumplir 3:1 como componentes UI
  • Usa las correcciones sugeridas de esta herramienta para mantener el tono de tu marca ajustando solo la luminosidad