What this tool does
It generates a UI-focused palette with roles like surface, raised surface, border, body text, muted text, accent, and accent text.
Accessible Palette Builder
Build interface palettes around a chosen accent hue while checking whether the text and accent combinations stay readable. This tool is designed for UI starting points rather than purely aesthetic swatches, so it keeps body text, muted text, and accent button contrast in view while generating the palette locally in your browser.
210deg
Body text on surface
--
Muted text on surface
--
Button text on accent
--
Accent against surface
--
Sample interface
Accessible preview
Readable interface card
Use this preview to see how the surface, text, muted copy, and accent button behave together before you export the palette.
Accent
Border
Why it is private
Palette generation and contrast math happen entirely in your browser. Your design experiments are not uploaded and never touch server memory.
What the targets mean
AA body text aims for 4.5:1, AAA aims for 7:1, and the large text / UI option uses 3:1 when you want a looser but still readable starting point.
Helpful note
This is a strong starting point for accessible UI colors, but real interfaces should still be checked in their final context with actual font sizes and states.