Colour Contrast Checker
Enter your foreground and background colours and instantly see whether they meet WCAG 2.2 contrast requirements for normal text, large text, and UI components. Free. No sign-up needed.
Colour Selection
Enter hex colour (e.g. #000000) or use the colour picker
Enter hex colour (e.g. #FFFFFF) or use the colour picker
Colour Presets
Preview
Sample Heading
This is normal text (16px) displayed with your selected colour combination. It helps you visualise how readable your content will be.
This is large text (18px bold) which has different accessibility requirements.
Accessibility Results
21.00:1
Contrast Ratio
WCAG AA (Minimum)
WCAG AAA (Enhanced)
Recommendation
Excellent contrast – meets all WCAG standards including AAA.
What does WCAG say about colour contrast?
WCAG 2.2 defines minimum contrast ratios under Success Criterion 1.4.3 (AA) and 1.4.6 (AAA).
AA Normal Text
Body text and text smaller than 18pt (or 14pt bold) must achieve a contrast ratio of at least 4.5:1 against its background.
AA Large Text
Text at 18pt or larger (or 14pt bold or larger) only needs a 3:1 ratio under WCAG AA, because it is easier to read at lower contrast.
AAA Enhanced
WCAG AAA requires a 7:1 ratio for normal text and 4.5:1 for large text, the gold standard for maximum readability.
Why colour contrast matters
Around 300 million people worldwide experience colour blindness, and many more have low vision or ageing eyesight. Insufficient contrast between text and background is one of the most common accessibility barriers on the web, and one of the easiest to fix.
Meeting WCAG contrast ratios helps your content stay readable across a wide range of devices, lighting conditions, and user abilities, and keeps you compliant with accessibility legislation in the UK, EU, and US.
Checking a whole brand palette
Testing one pair of colours tells you very little. A brand palette has to work as a set, because in practice your text colour will land on more than one background.
Take every colour in your palette and test it against every other colour you might realistically pair it with. Most palettes have one or two combinations that quietly fail, and it is almost always a mid-tone brand colour used for text on a light grey panel.
Record the pairs that pass and the pairs that do not, then write the failing ones down as a rule rather than trying to remember them. "Never use the mid blue on the light grey" is a rule a designer can follow. "Check the contrast" is not.
Two things people forget. Your brand colour on white might pass while white on your brand colour fails, because the ratio is the same but the text size usually is not. And a colour that passes at 18pt heading size will often fail at 16px body size.
Checking colours in Figma and Canva
Most colour decisions get made in a design tool rather than in a browser, which is where this check belongs too.
In Figma, the practical approach is to test your palette here first and record the results in your design system, so the contrast rules live next to the colour tokens. Figma also has contrast plugins, and they are useful, though they only check what is currently selected rather than the palette as a whole.
In Canva there is no built-in contrast check, so the workflow is to pull the hex values from your brand kit and test them here before they end up on a template that gets reused fifty times.
The point in both cases is the same. Catching a failing pair at the palette stage costs nothing. Catching it after it has been applied across a site is a redesign.
Print is a different problem
WCAG ratios apply to screens. Print is not covered by WCAG at all, because the standard is written for web content.
That does not mean contrast stops mattering on paper, but the numbers do not transfer directly. Ink behaves differently from light, paper stock changes perceived contrast, and there is no way for a reader to zoom or switch to a dark theme.
If you are producing something that exists in both places, test the digital version against WCAG AA and treat that as your floor for print rather than your target. Print has no fallback, so the safer ratio is the right one.
Need a full accessibility audit?
Colour contrast is just one of hundreds of WCAG criteria. Our manual audits test your entire site with assistive technology.
Learn about our audits →