Tarjeta Ally
El texto secundario también se valida sobre fondo y superficie.
Success
Info
Warning
Danger
Accessible color generator
Un color de marca. Una paleta Ally completa y accesible.
Elige únicamente tu color primario. Ally genera automáticamente el complementario, Success, Info, Warning y Danger, además de escalas 50–950 y tokens funcionales para modo claro y oscuro. Si un color no alcanza el contraste mínimo, el motor ajusta su luminosidad sin cambiar su propósito semántico.
Accesibilidad por defecto.
La exportación no permite saltarse el control de contraste. El perfil AA exige al menos
4.5:1 para texto normal y 3:1 para texto grande, controles y gráficos.
Puedes elevar el objetivo a AAA. El cálculo usa luminancia relativa WCAG.
1
Brand Color
Como en un generador de paletas: tú defines el origen; Ally calcula el resto.
El motor compone el color sobre el fondo antes de calcular contraste y tokens.
Ajusta la luminosidad conservando tono y saturación del color de entrada.
2
Semantic Colors
Todos estos colores se generan automáticamente desde Primary; no necesitas escogerlos uno por uno.
Cada muestra incluye un color de texto recomendado con contraste AA de al menos 4.5:1. Las escalas son primitivas; los componentes Ally consumen los tokens semánticos accesibles.
3
Vista previa real de Ally
Ally custom
Tu marca, con contraste protegido
Botones, alertas, formularios, texto, bordes y foco consumen los tokens calculados por el motor accesible.
Operación completada.
Revisa esta información.
Existe un error.
Información adicional.
Borde, texto de ayuda y foco usan tokens validados.
4
Validación automática
Se comprueban combinaciones reales de los componentes en modo claro y oscuro: texto, botones, estados semánticos, bordes de interfaz e indicador de foco.
No existe “exportar igual”. Si una comprobación crítica fallara por un error del motor,
Ally bloquea CSS y ZIP. El usuario no puede desactivar este control.
5
Contrast Lab
Comprueba cualquier combinación manual con HEX, Alpha y Lightness.
Texto de muestra Aa
Foreground efectivo:
#4f46d8
Contrast ratio 6.56:1
Explicación de los mínimos
WCAG nivel AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande. Para gráficos y componentes de interfaz, WCAG 2.1/2.2 establece un mínimo de 3:1 cuando el contraste es necesario para identificarlos.
Nivel AAA eleva el requisito a 7:1 para texto normal y 4.5:1 para texto grande. Texto grande significa al menos 18 pt (aprox. 24 px), o 14 pt (aprox. 18.66 px) cuando está en negrita.
Ver contraste de texto en W3C · Ver contraste no textual en W3C
Alcance: esta validación garantiza las combinaciones de tokens que Ally comprueba. Si el proyecto aplica colores sobre imágenes, gradientes, transparencias adicionales o CSS propio, debe volver a evaluar esas combinaciones.
6
Export
Descarga el tema o un Ally completo ya personalizado.
El ZIP incluye ally.min.css, ally-theme.css, JavaScript,
debug, manifest con ratios de contraste, README y ejemplo.
CSS generado
Si usas Ally desde CDN, puedes alojar solo este archivo en tu dominio y cargarlo después de la hoja de estilos pública versionada de Ally.
Tokens generados
| Familia | Propósito |
|---|---|
--ally-brand-50 … 950 | Escala primaria derivada automáticamente. |
--ally-accent-50 … 950 | Escala complementaria. |
--ally-success-* / info-* / warning-* / danger-* | Escalas semánticas generadas desde Primary. |
--ally-*-STEP-text | Color de texto recomendado para cada muestra, con contraste AA. |
--ally-color-primary | Primario funcional ajustado para componentes y texto. |
--ally-color-primary-text | Texto sobre el primario funcional. |
--ally-color-text / muted | Texto general validado sobre fondo y superficie. |
--ally-color-border | Borde funcional con mínimo 3:1 frente a fondos relevantes. |
--ally-color-focus | Indicador de foco con mínimo 3:1. |