Accessible color palettes.
One click in Figma.

Generate WCAG-compliant light and dark themes from a single brand color. Built for designers who care about accessibility.

Install from Figma Community See Pricing

Everything you need for accessible design systems

Theme Generation

Light and dark palettes from one brand color using Material 3 HCT color science.

WCAG Contrast Control

AA or AAA contrast with auto-fix — every color pair meets the bar.

Style Variants

Modern, Minimal, Vibrant, or Soft — four personalities for any brand.

Vision Simulations

Preview palettes under grayscale, protanopia, deuteranopia, tritanopia, and low-vision blur. Your test frame updates in real time to show simulated colors, with a per-pair contrast report.

Color Preview

See your palette applied on common UI patterns — buttons, cards, forms, tables, and navigation. A contrast-only visual check, not a full WCAG audit of each component. Stays in place across palette changes.

Typography Control

Pick from 16 curated fonts with heading/body pairing, accessibility hints for serif body text, and conflict resolution when applying to existing layers.

Multiple Exports

CSS Variables, Tailwind Config, JSON — ship design tokens to your dev team.

How to use DesignAlly

1
Generate Palette — Pick a seed color, style (Modern/Minimal/Vibrant/Soft), and contrast level (AA/AAA). Click Generate Palette. DesignAlly creates light and dark palettes with WCAG auto-fixes.
2
Review colors — Toggle between Accessible (fixed) and Original modes. Switch Light/Dark tabs (dark is Pro-only). The fix banner shows how many colors were adjusted.
3
Color Preview — Click Color Preview to see your palette applied on common UI patterns (contrast-only check, not a full WCAG audit of each component). Light frame always created; Dark frame on Pro. Stays in place across palette changes.
4
Simulate vision types (optional) — Click a simulation chip (Grayscale, Protanopia, Deuteranopia, Tritanopia, Low Vision). The palette updates visually and a contrast report shows which pairs pass. Use Fix for Simulation to auto-adjust.
5
Apply Typography (optional) — Open the Typography section, choose heading and body fonts from 16 curated options. Click Apply Typography to update selected layers. If conflicts are found, choose to apply, apply to unstyled only, or skip.
6
Sync Variables — Click Sync Figma Variables to create/replace a DesignAlly variable collection with Light (and Dark, on Pro) modes, ready for developers.
7
Hand off to developers — Open Export to Code and choose CSS Variables, Tailwind Config, or JSON to share your design tokens with your dev team. Light palette always included; dark palette on Pro. Copy with one click.

Simple pricing

Free

$0

  • Light palette generation
  • WCAG AA/AAA auto-fix
  • 4 style variants
  • Color preview
  • Typography picker + apply
  • Code export (CSS, Tailwind, JSON)
  • Figma variable sync (light mode)
Get Started
Freemium

Pro

$22

  • Everything in Free
  • Full dark palette generation
  • Dark mode variable sync
  • Dark test frame
  • Dark palette in code export
  • Priority support
Upgrade in Figma

The Figma plugin handles payments — no separate account needed.

Make your designs accessible to everyone

Install DesignAlly from the Figma Community and start generating compliant themes in seconds.

Install Plugin