Qué hace
- Ratio de contraste y resultado AA/AAA para texto normal, texto grande y componentes de interfaz
- Corrección en un clic que ajusta el texto o el fondo lo mínimo necesario para pasar
- Vista previa con títulos, texto, botones e iconos
- Enlace para compartir cada combinación de colores
Preguntas frecuentes
¿Qué ratio de contraste exige WCAG?
WCAG 2.2 AA exige 4.5:1 para texto normal y 3:1 para texto grande (24px, o 18.66px en negrita) y componentes de interfaz. AAA exige 7:1 para texto normal y 4.5:1 para texto grande.
¿Cómo funciona la corrección en un clic?
Mantiene el tono y la saturación del color que eliges cambiar y ajusta solo su luminosidad, lo mínimo necesario para alcanzar el siguiente nivel que falla.
📖 Cómo corregir el bajo contraste de color (WCAG 2.2)
Más herramientas gratuitas
- Generador de paletas — Elige un tono y una armonía y obtén una paleta accesible completa con verificación de contraste AA/AAA en vivo.
- Imagen → Paleta — Sube una imagen, extrae sus colores dominantes y descubre qué combinaciones se pueden usar juntas.
- Simulador de daltonismo — Mira una paleta con protanopia, deuteranopia, tritanopia y acromatopsia, y detecta los colores que se confunden.
- Generador de escala tipográfica — Elige un tamaño base y una proporción y obtén una escala tipográfica completa con vista previa, clamp() fluido y tokens.
- Generador de degradados — Degradados lineales, radiales, cónicos o de malla: arrastra los puntos, mezcla colores y copia el CSS.
- Explorador de estados de componentes — Botones, campos y tarjetas en todos sus estados (hover, foco, presionado, deshabilitado, error) con verificación de contraste.
- Convertidor de design tokens — Pega tokens W3C, Tokens Studio o Variables de Figma y obtén CSS, SCSS, Tailwind v4 o SwiftUI, con alias incluidos.
- Laboratorio de movimiento — Arrastra curvas cubic-bezier, ajusta un resorte real, míralos competir y exporta tokens de movimiento.
- Recorte automático — Suelta tus PNG y recupéralos sin los bordes transparentes vacíos, en lote, en tu navegador y en un solo ZIP.
- Prueba de expansión de texto — Mira cómo se rompe una interfaz en alemán, español o pseudotraducción, y qué CSS la hace resistir la traducción.
- Mini auditoría de accesibilidad — Pega HTML y encuentra textos alternativos y etiquetas que faltan, botones sin nombre, saltos de títulos, objetivos táctiles pequeños y bajo contraste.
- Vista previa multiformato — Un mensaje en tamaños de redes sociales y anuncios display, con zonas seguras y punto focal arrastrable. Exporta cada PNG.