Contrast Checker
Check WCAG 2.1 colour contrast and get a passing colour suggestion.
What is a contrast checker?
A contrast checker measures how easy it is to read text on a background. It calculates the contrast ratio between two colours using the formula in the Web Content Accessibility Guidelines (WCAG) 2.1. The result runs from 1:1, where both colours are the same, to 21:1, which is black on white. Low contrast is one of the most common accessibility problems on the web and it affects everyone, from people with low vision to anyone reading a phone in bright sunlight.
How to check contrast
- Enter the text colour and the background colour with the pickers, or type HEX codes or colour names.
- Read the contrast ratio and the pass or fail result for each WCAG level.
- Look at the live sample to see how large text, body text and a small link look.
- If the pair fails, choose a target and whether to adjust the text or the background, then press Suggest a passing colour.
- Copy the CSS for the final pair.
WCAG levels explained
- AA normal text needs at least 4.5:1. This is the level most laws and policies refer to.
- AA large text needs 3:1. Large means at least 24px regular or about 18.66px bold.
- AAA normal text needs 7:1 for the highest level of readability.
- AAA large text needs 4.5:1.
- UI components and graphics, such as input borders and icons, need 3:1 against the colours next to them.
How the colour suggestion works
The suggestion keeps the hue and saturation of the colour you are adjusting and changes only its lightness, trying both lighter and darker. It picks the closest shade that reaches your chosen ratio, so your brand colour stays recognisable. If no lightness of that hue can reach the target against the other colour, the tool tells you, and you can try adjusting the other colour instead.
Tips for accessible colour
Grey text on a white background is the most common failure, so check light greys carefully. Placeholder text, disabled buttons and text over photos also deserve a test. The ratio is shown rounded down to two decimals, because WCAG does not allow rounding up: a ratio of 4.49 does not pass 4.5. Contrast is only part of accessibility, so also use clear font sizes and do not rely on colour alone to show meaning.
Checking a whole design
Make a short list of every text and background pair on your site: body text, headings, links, buttons, footer text and form fields. Test each pair here and note the result. Fixing contrast early in a project is much easier than changing brand colours after launch, and it makes your content more pleasant for every visitor.
Frequently asked questions
What contrast ratio do I need?
For WCAG 2.1 level AA, normal text needs at least 4.5:1 and large text needs at least 3:1. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
WCAG defines large text as at least 18 point (24px) in regular weight, or at least 14 point (about 18.66px) in bold.
Does the checker handle transparent colours?
No. It compares two solid colours. If your text is semi transparent, work out the blended colour first and check that.
Why did the suggestion not find a colour?
Some backgrounds sit in the middle of the brightness range, where even black or white text cannot reach a high target such as 7:1. In that case adjust the background instead.