Accessibility checks built into brand kits
Beautiful palettes fail in production when button labels or muted text drop below 4.5:1 contrast. Our brand accessibility checker tests every semantic pair in your kit — the same checks included in DESIGN.md contrast reports.
Pair with the color palette generator and playground to fix tokens and re-export.
What the checker validates
WCAG 2.1 contrast ratios with AA and AAA grades.
- Body text on background and card surfaces
- Primary and accent button label contrast
- Destructive and success state pairs when present
- Live grade: AAA, AA, AA Large, or Fail
- Same logic embedded in DESIGN.md zip exports
Check brand accessibility in three steps
Load a palette, review the report, adjust failing tokens.
- Pick a preset palette or edit hex values in the checker below
- Review the contrast table for any Fail rows
- Open playground to fix colors and export an accessible kit
When to run contrast checks
Before handing tokens to engineering or AI agents. After importing colors from a URL. When randomizing palettes and need a quick WCAG sanity check.
FAQ
- What WCAG level do you target?
- We grade against WCAG 2.1 — AA (4.5:1 normal text, 3:1 large text) and AAA (7:1). Failing pairs are flagged in red.
- Is contrast included in exports?
- Yes. DESIGN.md and zip exports include a full WCAG contrast report for light and dark modes.
- Can AI agents fix failing contrast?
- Use the brand refiner or describe contrast issues — tokens adjust toward WCAG-compliant foreground colors.
Related
Free tools
Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.