Tools / 014
Accessible Colour Palette Generator
Build a brand colour scale, select readable text and export CSS variables.
Use this tool ↓Loading the interactive surface…
How to use it
- 01
Choose the core brand colour and the surface used by the interface.
- 02
Review contrast for real text, controls, borders, focus rings and interactive states.
- 03
Export the variables as a starting system, then test them in the actual product context.
Is one passing colour pair enough?
No. A usable system must cover text sizes, controls, focus, hover, disabled states and content placed over imagery.
Which standard does the ratio use?
The displayed ratio follows the WCAG 2 relative-luminance contrast formula.