Contrast Checker
WCAG contrast ratios for any two colours, with the nearest passing shade when a pair fails.
Sample text against this background
Nearest passing colour
Contrast ratio
21.00:1
- AA (normal)
- Pass
- AA (large text)
- Pass
- AAA (normal)
- Pass
Everything here runs on your device. Nothing you enter is uploaded or stored.
Enter a foreground and background colour and get the exact WCAG contrast ratio, checked against AA, AA Large Text and AAA simultaneously. If the pair fails, this tool searches for the nearest colour that would pass, rather than just telling you no.
How to use it
- Enter or pick your foreground (text) colour and background colour.
- Read the contrast ratio and the three pass/fail badges — AA, AA Large Text, and AAA.
- If the pair fails AA, a suggested fix appears with a preview swatch. Press Apply to use it.
- Press Copy link to share the exact pair with a teammate or a design reviewer.
Why “nearest passing colour” is the useful half of this tool
Telling someone their colour pair fails WCAG AA is easy — that’s a single ratio calculation. Telling them what to do about it is the part almost every contrast checker skips, leaving a designer to nudge a hex value up and down by trial and error until a separate check passes.
This tool instead walks the foreground colour’s lightness in OKLCH space — a colour space designed so lightness changes are perceptually even — in small steps, darker or lighter, until it finds the closest value that reaches the target ratio (4.5:1 for AA). Because only lightness moves, the suggested fix keeps the same hue and roughly the same saturation character as your original colour. It’s a nudge, not a swap to an unrelated colour that happens to pass.
AA versus AAA, and which one to target
WCAG defines two conformance levels relevant to text contrast. AA requires 4.5:1 for normal text and 3:1 for large text (defined as 18pt regular or 14pt bold and larger). AAA is stricter: 7:1 for normal text, 4.5:1 for large text.
AA is the level referenced by most legal accessibility frameworks, including the ADA in the United States and the EN 301 549 standard in the EU, and it’s the realistic target for the vast majority of body text, buttons, and UI labels. AAA is achievable and worth pursuing for primary reading content, but many real interfaces — particularly ones using brand colours with specific hue requirements — cannot hit AAA everywhere without abandoning the brand palette, and WCAG itself does not require AAA for general conformance.
Why this matters beyond compliance
Insufficient contrast isn’t a hypothetical edge case. Colour vision deficiency affects roughly 1 in 12 men and 1 in 200 women, glare and screen quality vary enormously across real devices, and contrast sensitivity decreases naturally with age. A pair that looks fine on a calibrated monitor in a dim room can become unreadable on a budget phone screen in direct sunlight. Contrast ratio is one of the few accessibility properties that is both objectively measurable and directly fixable, which is why it’s such a heavily emphasised WCAG criterion.
What it does not do
This checks contrast ratio only — it is not a full accessibility audit, and passing this check does not mean a page is WCAG conformant overall. It does not account for font weight or size automatically; you choose which threshold (normal or large text) applies to your case. It has no way to test against a background image or gradient — both colours must be solid.
WCAG thresholds
| Level | Normal text | Large text (18pt+/14pt bold+) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Common pairs and their ratios
| Foreground | Background | Ratio | AA normal |
|---|---|---|---|
| #000000 | #ffffff | 21:1 | Pass |
| #767676 | #ffffff | 4.54:1 | Pass (barely) |
| #999999 | #ffffff | 2.85:1 | Fail |
| #ffffff | #2563eb | 4.03:1 | Fail |
| #ffffff | #0f5c4a | 6.94:1 | Pass |
Questions
What is the difference between AA and AAA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (3:1 for large text, 18pt or 14pt bold and above). AAA is the stricter tier, requiring 7:1 for normal text and 4.5:1 for large text. AA is the level most legal accessibility requirements (like the ADA in the US) reference; AAA is a higher bar most sites do not attempt for all text.
How does the "nearest passing colour" suggestion work?
When a pair fails, this tool walks the foreground colour's lightness in OKLCH space — darker or lighter, in small steps — until it finds the closest lightness value that reaches the target ratio, then reports that colour. It changes lightness only, so the suggested fix keeps the same hue and saturation character as your original colour, rather than snapping to an unrelated shade.
Why does contrast ratio matter for accessibility?
Roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, and many more people read screens in bright sunlight, on low-quality displays, or with age-related vision changes. Insufficient contrast makes text genuinely unreadable for a meaningful fraction of any audience, which is why it's a WCAG requirement rather than a stylistic suggestion.
Is this a complete WCAG accessibility audit?
No. This checks one specific criterion (contrast ratio) in isolation. A full WCAG conformance review covers many other criteria — keyboard navigation, screen reader semantics, focus indicators, and more — and this tool does not replace manual testing with assistive technology or a qualified accessibility review.
Last updated