Colour Contrast Checker
Whether text is genuinely readable against its background, measured, not eyeballed.
In short
WCAG AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. On white, #767676 is the lightest grey that passes, the common #999999 is 2.85:1 and fails.
Last reviewed
Runs entirely in your browser. Nothing you type here is uploaded, stored or logged.
How contrast is measured
Not by how different two colours look, but by relative luminance: how much light each reflects, weighted for the eye's differing sensitivity to red, green and blue.
ratio = (L1 + 0.05) ÷ (L2 + 0.05)Where L1 is the lighter colour's luminance and L2 the darker. The range runs from 1:1 (identical) to 21:1 (pure black on pure white).
This is why perceptually pleasing pairs can fail badly. Two colours can look distinct while sitting at similar luminance. Mid-blue on mid-green is a common example. The eye distinguishes them by hue; a luminance-based measure does not.
The thresholds
| Content | AA | AAA |
|---|---|---|
| Normal text (under 18pt) | 4.5:1 | 7:1 |
| Large text (18pt+, or 14pt bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
| Incidental / decorative | None | None |
AA is the practical target. It's what accessibility legislation generally references and what most organisations audit against. AAA is worth aiming for in body text but is genuinely hard to hit across a whole brand palette.
The grey text problem
Light grey body text has been a design convention for years, and most of it fails:
| Grey on white | Ratio | AA normal |
|---|---|---|
| #999999 | 2.85:1 | Fails |
| #8C8C8C | 3.35:1 | Fails |
| #767676 | 4.54:1 | Passes, just |
| #666666 | 5.74:1 | Passes |
| #595959 | 7.00:1 | Passes AAA |
#767676 is worth memorising: it's the lightest grey that passes AA on white. Anything lighter fails, however good it looks on your calibrated monitor in a dim room.
Why this matters beyond compliance
The people affected are not a niche:
- Roughly 1 in 12 men and 1 in 200 women have some colour vision deficiency.
- Everyone's contrast sensitivity declines with age, noticeably from around 40.
- Sunlight destroys contrast. A phone screen outdoors loses most of its effective range, this affects every user, not a subset.
- Cheap displays, projectors and dark-mode inversions all compress contrast further.
Designing at 4.5:1 in a dark studio on a good monitor means designing at considerably less than that for the person reading on a bus.
Things the ratio doesn't capture
Never rely on colour alone. Red and green error states at identical luminance are indistinguishable to someone with deuteranopia, and both may pass contrast against the background. Add an icon, a label or a pattern.
Font weight matters. Thin weights at small sizes are hard to read even at passing ratios. The strokes are physically fewer pixels. WCAG accounts for this only crudely via the large-text threshold.
Text over images needs a floor. Contrast varies across the image, so the worst region governs. Use an overlay, a scrim or a solid text panel rather than hoping.
Placeholder text and disabled states are exempt from WCAG but still need to be readable by someone actually filling in the form.
Fixing a failing pair
- Darken the text before anything else, usually the smallest visible change.
- Lighten the background if the text colour is fixed by brand.
- Increase the size or weight to move into the large-text threshold.
- Reserve the brand colour for large elements: headings, buttons, icons. And use a darker neutral for body text. Most brand palettes were chosen for logos, not for 14px paragraphs.
The suggestions above the fold adjust lightness while holding hue and saturation, so the result still looks like your colour rather than a different one.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1 and 4.5:1 respectively. Interface components and meaningful graphics need 3:1. AA is the level most legislation references.
Why does my light grey text fail?
Because contrast is measured on relative luminance, not on how different two colours look to you. Light grey on white is a small luminance gap however tasteful it appears. #999 on white is 2.85:1 and fails AA outright. It is probably the single most common accessibility failure on the web.
What counts as large text?
At least 18pt (24px) regular, or 14pt (18.66px) bold. Larger glyphs have thicker strokes, so they stay legible at lower contrast. Which is why the threshold drops from 4.5:1 to 3:1. It applies to the rendered size, not the intended one.
Does this matter legally?
In many places, yes. The European Accessibility Act, the UK Equality Act, Section 508 in the US and similar laws elsewhere reference WCAG AA. Beyond compliance, roughly one in twelve men has some colour vision deficiency, and everyone struggles with low contrast on a phone in sunlight.
Is opacity accounted for?
Not directly. Enter the final rendered colour rather than a semi-transparent one. Text at 60% opacity over white is effectively a lighter colour, and that blended result is what needs checking. Browser dev tools will show you the computed value.