How to use the contrast checker
- Set your text and background colours — use the picker or paste a hex code.
- Read the ratio and the pass/fail cards for each WCAG level.
- Check the live preview — if the small text looks strained to you, it will be worse for others.
What the levels actually mean
WCAG measures contrast as a ratio between the lightest and darkest of the two colours, from 1:1 (identical) to 21:1 (pure black on pure white). AA is the level most organisations are legally expected to meet: 4.5:1 for normal text and 3:1 for large text (18pt/24px, or 14pt/18.66px bold). AAA is the stricter target at 7:1. Buttons, form borders and icons need at least 3:1 against their surroundings.
Why this matters beyond compliance
Roughly one in twelve men has some form of colour vision deficiency, and almost everyone struggles with low-contrast text on a phone in bright sunlight. Good contrast isn't a box-ticking exercise for a minority — it's the difference between your content being readable on a train platform at midday or not. Light grey text on white is the single most common design mistake on the web, and it fails AA almost every time.
Benefits
- Gives the exact WCAG contrast ratio between any text and background colour.
- Separate pass/fail for AA and AAA, normal and large text, plus UI components.
- Live preview at three real text sizes so you can judge it yourself.
- Swap colours in one click and paste hex codes directly.
Limitations to know
- Contrast ratio is one part of accessibility — it does not check colour-blind safe pairings.
- It tests two flat colours, not text sitting on a photo or gradient.
- Meeting AA does not by itself make a page accessible.
Common mistakes to avoid
- Using light grey body text on white — the most common failure on the web.
- Relying on colour alone to convey meaning without labels or icons.
- Testing only your headings and forgetting small print, placeholders and disabled states.
Alternatives
To build a palette use the Color Palette Generator; to convert a code use the Color Converter.
Last updated: August 2026 · Reviewed by the AI Toolbox editorial team.
Frequently asked questions
What counts as "large text"?
18pt (24px) regular, or 14pt (18.66px) bold and above. Large text gets a lower threshold because bigger shapes are easier to distinguish.
Should I aim for AA or AAA?
AA is the practical standard and what most accessibility laws reference. AAA is worth targeting for body text if your palette allows it.
Does this cover colour blindness?
Contrast ratio helps a great deal, but also avoid using colour alone to convey meaning — add labels, icons or patterns.
Is anything uploaded?
No — the calculation runs entirely in your browser.