Palette Balancer
Check palette contrast against a base color and auto-suggest accessible tweaks.
Summary
No colors meet target
No adjustments needed
Results
Add HEX colors to evaluate contrast.
Tips
- Keep at least AA (4.5:1) for text on brand surfaces.
- Test both light and dark modes—base color shifts can change results.
- Export CSS variables or JSON to sync with design systems.
Overview
Balance brand palette swatches against a chosen background to hit accessibility targets fast.
How to use
- Set the base background color and desired contrast ratio.
- Paste palette HEX values or a comma-separated list.
- Review suggested tweaks and export CSS/JSON tokens.
Use cases
- Ensure brand palettes meet AA in dashboards and UI shells.
- Propose accessible alternates for marketing campaigns.
- Audit dark-mode variants before design reviews.
Tips & knowledge
- Validate final colors in real components—overlays can shift contrast.
- Keep palette docs synced with design tokens to avoid drift.
- Share JSON exports with design systems or QA teams.