Colour contrast checker (WCAG 2.2)
Enter a foreground and background colour and get the exact WCAG 2.2 contrast ratio, pass/fail against AA and AAA, a live preview, and a one-click passing alternative if it fails. No signup, no watermark, works before you have typed anything.
Contrast checker
The background is assumed fully opaque -- that is what your foreground colour is actually read against.
Contrast ratio
2.84:1
- Fail -- AA -- normal text (needs 4.5:1)
- Fail -- AA -- large text (needs 3.0:1)
- Fail -- AAA -- normal text (needs 7.0:1)
- Fail -- AAA -- large text (needs 4.5:1)
- Fail -- UI components & graphical objects (needs 3.0:1)
This fails AA. Try a passing alternative:
Want AAA (7:1) instead? Try (7.04:1).
Live preview
Normal text, 16px. The quick brown fox jumps over the lazy dog. This is roughly what a body paragraph looks like at this contrast.
Large bold text, 24px
What the ratio and badges actually mean.
The ratio
Contrast ratios range from 1:1 (identical colours, invisible text) to 21:1 (pure black on pure white). It is calculated from each colour's relative luminance -- how much light it reflects -- not from how the colours look side by side, which is why two pairs that look similarly "different" can score very differently.
AA vs AAA
AA (4.5:1 normal text, 3:1 large text) is the minimum most standards and laws reference. AAA (7:1 / 4.5:1) is a stricter, optional target -- good for body copy on content-heavy sites, but often impractical for a full brand palette.
What counts as "large"
18.66px (14pt) bold, or 24px (18pt) and above at any weight. A 20px regular-weight heading does not qualify -- it is judged against the normal-text thresholds, which trips up a lot of designs that look fine at a glance.
UI components
Non-text elements that carry meaning -- icons, form field borders, focus indicators, button outlines -- have their own WCAG 2.2 threshold of 3:1 against their surroundings, separate from the text rules.
A passing ratio is necessary, not sufficient.
This tool checks one specific, well-defined thing correctly. It cannot tell you whether colour is the only way you are conveying a piece of information, whether your focus states are visible, whether your markup is readable by a screen reader, or whether the page still works when someone increases their browser's text size or overrides your colours entirely. Automated contrast checking clears one accessibility check among many -- treat it as a floor, not a finish line.
Common questions
What is a good contrast ratio for text?
For WCAG 2.2 Level AA, the minimum is 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 for normal text and 4.5:1 for large text. Most teams design to AA -- it is the level referenced by most accessibility laws and procurement standards, including the UK's public sector accessibility regulations.
What counts as "large text" under WCAG?
Large text is defined as 18.66px (14pt) and bold, or 24px (18pt) and above at any weight. Everything smaller than that is judged against the stricter "normal text" thresholds, even if it looks reasonably big on screen.
Why does this tool give a different number to another contrast checker?
It shouldn't, if both tools implement the WCAG 2.2 relative luminance formula correctly -- the maths is a published standard, not a matter of opinion. If you see a different result, check whether the other tool is reading the same two hex values, and whether either colour has transparency (opacity changes the effective colour actually rendered, which changes the ratio).
Is passing WCAG contrast enough to make a design accessible?
No. Contrast is necessary but not sufficient. It says nothing about whether the underlying information is conveyed by colour alone, whether interactive elements have a visible focus state, whether the page works with a screen reader, or whether text remains readable when a user overrides font size or applies their own colour scheme. Treat a passing ratio as one check cleared, not a finished accessibility review.
How does the "suggest a passing alternative" feature work?
When a pair fails, the tool keeps your foreground colour's hue and saturation and searches for the smallest change in lightness -- darker or lighter, whichever is closer to your original colour -- that reaches the target ratio. It is a starting point for a design decision, not a replacement for choosing a colour that still fits your brand and layout.
Want the full accessibility picture, not just contrast?
Contrast is one check among many. If you want a proper look at your product's accessibility -- or you are weighing up training your team to do this themselves -- tell us a little about what you are working on.
Checking contrast for your whole team's workflow, not just one page? See in-house UX training. Learning UX yourself? Watch the free UX/UI masterclass.