Your colour
Name
Used for the variable names in the exported code.
Judge against
Simulate colour vision
Repaints the swatches only. The ratios always describe your real colours.
Your scale
Every step is solved to hit a target contrast against white. Select any swatch to copy its hex.
Tinted neutral
The same scale at low saturation, for text, borders and backgrounds that still belong to your hue.
What is safe for body text
Every pair
Rows are the text colour, columns the background. Select a cell to open that pair in the contrast checker with this palette loaded.
Copy the code
How this works, and why it is backwards
Most palette generators choose colours that look good together and leave you to discover afterwards which combinations are legible. You end up with a handsome scale and a spreadsheet of failures.
This one runs the other way around. WCAG contrast is a pure function of relative luminance, and contrast against white is just 1.05 divided by the luminance plus 0.05. That inverts: name a ratio and you get the exact luminance that produces it. Each of the eleven steps is defined by the ratio it must reach, and the generator solves for the lightness that lands there.
The practical result is that step 600 clears AA for body text on white and step 700 clears AAA, whatever hue you started from. You are not checking whether the scale works. It was built from the requirement.
What it does not tell you
A ratio measures luminance difference and nothing else. Two colours can pass AA comfortably and still be indistinguishable to someone with deuteranopia, which is why the simulation toggle exists and why colour should never be the only thing carrying meaning.
It also cannot judge taste. Preserving your hue and saturation while moving lightness is a blunt instrument, and at the extreme ends of the scale a saturated hue can look chalky or muddy. Nudge the seed until the middle of the scale is the colour you actually wanted, then use the ends for backgrounds and borders rather than for brand moments.
Questions
What makes a palette accessible?
Strictly, nothing does. A palette cannot pass or fail on its own, only a pairing can: 4.5:1 for normal text at AA, 3:1 for large text, 7:1 for normal text at AAA. That is why this tool gives you a ratio per step and a matrix for every combination rather than a badge on the palette.
Why did my exact brand hex not appear in the scale?
Your colour sets the hue and saturation, but every step has to move to the lightness that hits its target ratio. Your hex will usually sit nearest whichever step matches its own contrast. The scale is built around your hue rather than being a list that happens to contain it.
Does passing contrast mean colour blind safe?
No, and the two are often confused. Contrast is a luminance measurement, so a red and a green can pass AA and still look the same to a large number of people. Check with the simulation, and make sure colour is never the only signal.
Is anything uploaded?
No. Every calculation happens in your browser. Nothing is sent anywhere, logged or stored.
Checking a specific pair instead? Use the colour contrast checker. Testing type rather than colour? Try the dyslexia font tester, or see all our free tools.