Accessible Palette Generator
Accessible foreground colors (AA)
You Might Also Need
The accessible palette generator picks a background and rolls foreground colours that clear WCAG AA against it, keeping five that reach a 4.5:1 contrast ratio.
What is Accessible Palette Generator?
Contrast is a property of a pair, not of a colour, so this tool starts where the problem actually is: you choose the background, and it hunts for foreground colours that work on top of it. That is the reverse of the way most palettes are built, and it is the reason the page exists — a set of wcag aa colors is far easier to assemble when the surface is fixed first and the text colours are fitted to it.
The mechanism is rejection sampling against the WCAG ratio. A random colour is generated, its contrast ratio against your background is computed with the same formula the rest of the domain uses, and the colour is kept only if the ratio reaches 4.5:1 — the AA threshold for normal-size text. The loop repeats until five colours have passed or two hundred attempts have been spent, and it runs again whenever the background changes.
- Threshold: a 4.5 contrast ratio, the AA requirement for body text, applied to every candidate.
- Target: up to five foreground colours, each previewed as sample text on your chosen background with its hex value underneath.
- Budget: two hundred attempts per run, which is generous for most backgrounds and occasionally insufficient for hard ones.
- Refresh: changing the background colour regenerates the set rather than adding to it.
The failure mode is worth knowing, because it is predictable rather than random. Mid-grey backgrounds are the hardest case: at 4.5:1 against a mid-tone, the acceptable colours form two narrow bands at the extremes, so a run can end with fewer than five swatches or with a set dominated by near-black and near-white. Very dark and very light backgrounds are easy, which is why the tool is most useful against the pale surfaces that most interfaces actually use. Two hundred attempts is a budget rather than a guarantee: an accessible palette generator can return three colours on an awkward surface, and that is the mechanism working as designed rather than a fault.
- AA only. There is no 7:1 AAA mode, and no 3:1 option for large text, icons or component boundaries.
- One background at a time: a palette that has to work on both light and dark surfaces needs two runs and a merge.
- The colours are random apart from the contrast rule, so they carry no hue relationships and no curation.
- Nothing is checked for colour-vision deficiency, and nothing is exported — the values are copied by hand.
Use it to fill the last awkward slot of a palette: the text colour, the icon tint, the border that has to be seen against a known surface. Where the relationship runs the other way — a fixed foreground colour that needs a background — the pair finder searches for partners instead, and where the question is not compliance but legibility, the readability checker adds the APCA reading that WCAG ratios do not provide. It is built for the case where the surface is settled and the foreground colors for a background are the open question, so run it after the layout is decided rather than before.
How to use Accessible Palette Generator
- Set the background colour the interface will actually use.
- Read the five candidates: each is previewed as sample text on that background.
- Copy the hex values that fit the design; regenerate by nudging the background if the roll is unpromising.
- Confirm each pair with the contrast checker, and add an APCA read if you need more than compliance.
When to use Accessible Palette Generator vs related tools
Use this when the surface is fixed and the text colours are the open question. The contrast checker verifies any pair afterwards, the 10 colour palette generator builds a related hue family instead of a contrast-filtered set, and the WCAG AAA checker is the tool when the requirement is 7:1 rather than 4.5:1.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.