WCAG Contrast Checker

Here's what the numbers mean: Normal text needs at least a 4.5:1 contrast ratio for Level AA (the standard most websites aim for) and 7:1 for Level AAA (enhanced accessibility). Large text—that's 18pt or 14pt bold—gets a bit of slack: 3:1 for AA and 4.5:1 for AAA, because bigger letters are naturally easier to read.

Light gray text on a white background might look sleek, but it's nearly invisible to millions of users. Poor contrast is actually one of the most common accessibility issues on the web—and one of the easiest to fix.

Beyond accessibility, good contrast just makes your site easier to use for everyone. It reduces eye strain, speeds up reading, and looks more professional. Win-win.

Contrast ratio isn't about how different two colors look. It's built entirely from relative luminance — a weighted measure of how much light a color emits. Green carries the most weight (0.7152), red is next (0.2126), and blue counts for surprisingly little (0.0722). The two luminances go into (L1 + 0.05) / (L2 + 0.05), lighter over darker, and that's your ratio. It runs from 1:1 (identical) to 21:1 (pure black on pure white).

This explains something that trips up a lot of designers. Gray text on white is the classic case:

If you take one number away, make it #767676. That's the lightest gray that still passes AA for body text on white, and it settles a lot of arguments about whether placeholder text is "light enough."

Passing AA does not mean your colors are distinguishable from each other. Contrast is measured against a background, one pair at a time — nothing in the formula asks whether two foreground colors can be told apart.

Here's the case worth remembering. Take a red #D32F2F and a green #2E7D32. On white they measure 4.98:1 and 5.13:1 — both comfortably pass AA. Put them next to each other, though, and the ratio between them is 1.03:1. They carry almost identical luminance. Strip the hue away and they are the same color.

For body text on white, that's fine — each one is readable. For a chart legend, a pass/fail badge, or a status dot, it's a real problem: anyone with red-green color vision deficiency sees two shapes that match. Your contrast checker will report all-clear the whole time, because it was never asked that question.

The fix isn't more contrast — it's a second signal. Vary lightness as well as hue, or add an icon, label, or pattern. When color separates meaning rather than just carrying it, run the pair through our Color Blindness Simulator or the Color Blind Color Picker as well. Contrast and color distinction are two different tests, and you need both.