WCAG Contrast Checker

Check any two colours against every WCAG 2.1 threshold at once, with a live preview of real text, computed in your browser.

Large heading textBody text at a normal size, which is the harder case to pass.
5.35:1out of a maximum of 21:1
  • PassesAA, body text4.5:1
  • PassesAA, large text (18pt, or 14pt bold)3:1
  • FailsAAA, body text7:1
  • PassesAAA, large text4.5:1
  • PassesIcons, borders and form outlines3:1

How to use Contrast Checker

  1. 1Enter your text colour and your background colour. Hex, rgb() and hsl() all work.
  2. 2Read the ratio, then check which thresholds pass in the list below it.
  3. 3Use the preview to sanity-check the result against real text at two sizes.

What a color contrast checker actually measures

Relative luminance, not brightness as it appears to you.

WCAG converts each colour to a single luminance value using a weighted formula that treats green as contributing far more than blue, because human vision is far more sensitive to green. The ratio is then the lighter luminance plus 0.05 over the darker plus 0.05, which lands between 1:1 for identical colours and 21:1 for black on white.

This is why eyeballing it fails. Two colours with the same HSL lightness can differ by a factor of three in luminance, and a saturated blue in particular looks much lighter than it measures. Pure blue on white is 8.6:1; pure yellow on white is 1.07:1 and effectively invisible, despite both being fully saturated primaries.

The WCAG contrast ratio thresholds, and which one to care about

4.5:1, AA body text. The one that matters. Most accessibility legislation references WCAG AA, and most of the text on any page is body text, so treat this as the floor rather than the goal.

3:1, AA large text. Applies at 18pt (about 24px) or 14pt bold (about 18.66px) and above. Larger glyphs have thicker strokes, which is why they get a lower bar.

7:1 and 4.5:1, AAA. Worth targeting for anything people read for a long time. Not usually a legal requirement.

3:1, non-text. From WCAG 1.4.11, covering the visible boundary of any control: input outlines, focus rings, toggle states, icons that carry meaning. This one is missed constantly, because designers check their text and forget that a 1.5:1 input border is invisible to a lot of people.

The trap worth naming

Passing large text but failing body text. It happens because designers check the headline, see a pass, and move on. The headline was never the problem: it is big and bold and passes easily. The 15px paragraph in a slightly lighter grey is what someone actually has to read for two minutes, and it is the one that fails.

Check your body colour first. If it passes, your headings almost certainly do too.

Why the preview is there

The numbers are the answer, but a ratio does not tell you whether the result looks right. The preview above renders real text at both sizes in your two colours, so you can see the thing the ratio is describing.

Everything is computed in this tab from the two values you type. No file, no upload, no request.

Frequently asked questions

Why does 4.5:1 apply to body text but 3:1 to large text?
Because larger glyphs have thicker strokes, so the same ratio is easier to read. WCAG defines large as 18pt (24px) or 14pt (18.66px) bold and above. Below that, body text rules apply.
My colours look fine to me. Why do they fail?
Because the test is relative luminance, not how bright the colours seem. Two colours with the same HSL lightness can have very different luminance, and blue in particular reads as much darker than its lightness suggests. Your own eyes on your own calibrated screen are not the case the standard is protecting.
Does this cover icons and borders?
Yes. The last row is the 3:1 threshold from WCAG 1.4.11, which applies to the visual boundary of a control: a form field's outline, a toggle's state, an icon carrying meaning. Text ratios do not apply to those.
Which level should I aim for?
AA on body text is what most legislation references and what to treat as the floor. AAA is worth targeting for long-form reading. Passing AA large text only is a common trap: it means your headings are fine and your paragraphs are not.

More free tools

All free tools