Pick one base color and you get the combinations classic color theory suggests.
On top of that, every swatch is judged on whether text on it would actually be readable, and
the ones that fall short can be nudged up to the target by moving lightness only, leaving the hue alone.
There is no shortage of tools that produce pretty palettes, so this one leans on the other question: can you use the colors it gave you?
This page makes no network requests at all.
The palettes and the contrast maths all happen inside your browser.
Once it has loaded, it works in aeroplane mode.
Export as CSS variables
How the nudge works, and where this tool stops
Only the lightness (the L of HSL) moves. Hue and saturation stay exactly where they
were, and a binary search finds the nearest lightness that meets the target. Because the hue
does not move, the palette still hangs together.
It searches both up and down and takes the smaller move. Darker if darker gets there,
lighter if lighter is closer. The label tells you how many points of L it moved.
There is a ceiling on the move (30 points). In HSL, lightness 0 is black and 1 is white,
so in principle any color can be made to meet any target. But being able to and being
allowed to are different things. Take yellow #ffff00 with white text: reaching 4.5:1
means dropping the lightness by 26 points, and what comes out is #7a7a00, which is
not yellow any more. Anything past the ceiling is left alone, and you are told how much it
would have taken. It never quietly swaps in a different color.
The contrast ratio is the WCAG 2.1 formula. Relative luminance, then
(lighter + 0.05) / (darker + 0.05). 4.5:1 or above passes AA for body text, 3:1 or
above for large text (24px or larger, or 18.66px or larger in bold).
That formula is not the last word. The WCAG 2.x ratio is known to flatter light text on
a dark background — it scores better than it looks. Meet the number, then look at it yourself.
Color vision deficiency simulation is not in this tool. It is in the
Contrast Ratio Checker published in the same place.
That is the one to use when you are pinning down two specific colors.
Click a swatch to copy its hex. With the nudge turned on, what you copy is the
nudged value.