All tools › Contrast
Accessible palette
A ladder of shades from one colour, each with its contrast on light and dark
It runs entirely in this browser tab: the colours you type are never uploaded, and the tool makes no network request while it works. Open your browser's network panel and try it — nothing leaves the page. There is no sign-up and no account.
Settings
- View
- Choices: Swatches, Result.
- Steps
- A number from 3 to 12.
- Level
- Which of the two conformance levels the marks and the suggestion aim at. Choices: AA, AAA.
- Large text
- Bold from about 19 pixels, or plain from 24, which the standard allows a lower ratio for.
- Judged against
- Which background the shades have to work on. Choices: Both, Light, Dark.
- Light background
- The page colour of the light theme.
- Dark background
- The page colour of the dark theme.
How to use it
- Paste your text into the box above, or open a file.
- Adjust the settings beside it until the result is what you wanted.
- Copy the result, or save it as a file. The result updates as you type.
Questions
- Do these answers depend on my screen?
- Yes, and that is stated on every result. Every number here is defined over sRGB, which is what a browser assumes. A wide-gamut or uncalibrated panel shows something else, and no page can see the screen it is being read on. The numbers are still the right ones to design against, because they are the numbers the standards are written in.
- Why does a ratio of 4.49 fail?
- Because 4.5 : 1 is a threshold somebody wrote into a standard, not a rounded figure. A checker that rounded first would pass a page that does not pass, which is the one mistake a contrast checker must not make. The colour difference numbers are the opposite kind: those are rules of thumb, and the tools that report them say so.
- Is the colour blindness simulation accurate?
- It is a simulation built from published matrices, and it is not a claim about any person. Colour vision differs between people with the same diagnosis, the partial forms are far commoner than the complete ones modelled here, and nobody's experience is a matrix. What it is genuinely good for is the designer's question: do these two colours still tell apart?
- Is what I type uploaded anywhere?
- No. This page carries the whole tool as WebAssembly and runs it on your own device. A palette is a product nobody has launched yet, and a brand colour arrives months before the brand does; none of it is sent anywhere.
Other tools for contrast
Contrast checker
The ratio between two colours, what it passes, and the nearest colour that does
Contrast matrix
Every pair in a palette against every other, with the failing ones marked
All fifteen tools