Qué hace
- Proporción de contraste WCAG en vivo mientras el fondo cambia
- AA los primeros veinte segundos, luego AAA con 7:1
- Control deslizante y flechas del teclado
- Tiempo de supervivencia para compartir
Preguntas frecuentes
¿Por qué los tonos medios son una trampa?
Sobre un fondo de luminosidad media ni el texto blanco ni el negro llegan a un contraste alto, así que el color correcto cambia justo en el medio. Por eso esos fondos son difíciles para texto.
¿Cuál es la diferencia entre AA y AAA?
AA pide 4.5:1 para texto normal y 3:1 para texto grande. AAA pide 7:1 y 4.5:1, lo que limita bastante los colores posibles.
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.
- Verificador de contraste - Pega dos colores, mira el ratio WCAG y corrige una combinación que falla con un clic.
- 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.
- Vista previa móvil - Abre cualquier sitio web dentro de marcos de iPhone, Pixel, Galaxy y iPad a su tamaño real. Gíralo o compara cuatro dispositivos a la vez.
- Caza de color - Iguala cinco colores a ojo con tono, saturación y luminosidad. Puntaje por distancia perceptual y un reto diario para compartir.
- Pasa o falla - Veinte rondas rápidas: ¿este texto pasa el contraste WCAG AA? Confía en tu ojo y luego mira las proporciones reales.
- Ojo óptico - Corrige siete detalles de layout a ojo: centra un ícono de play, iguala padding y ajusta un círculo frente a un cuadrado. Algunas respuestas son ópticas, no matemáticas.
- Pánico de estados - Los componentes caen con algo pasándoles. Elige hover, focus, presionado, cargando, error o deshabilitado antes de que toquen el piso.
- Golf de curvas - Minigolf con curvas de animación: dale forma a un cubic-bezier para que el disco pase cada bandera a tiempo y tira. El par es tres.
- Carrera de tokens - Reemplaza valores fijos con los design tokens correctos, rápido. Mismo valor no es el mismo token. Luego cambia el tema y mira qué se rompe.
- Ajusta el kerning - Espacia seis palabras a ojo. Cada una tiene un par de letras muy junto o muy separado; la respuesta es el kerning del diseñador de la fuente.
- Orden del Tab - Toca los botones, enlaces y campos de una pantalla en el orden en que debería recorrerlos la tecla Tab. Cinco pantallas, una regla de WCAG.