Colour Contrast Checker

What the ratio means

Contrast is expressed as a ratio between the relative luminance of two colours. Black on white is 21:1, the maximum. Two identical colours are 1:1. Everything else sits between.

(lighter + 0.05) ÷ (darker + 0.05)

The 0.05 accounts for ambient light reflecting off a screen, which stops very dark pairings producing absurdly high numbers that would not be readable in a real room.

Luminance is not brightness

The calculation is not a simple average of the three channels. Each is weighted — green counts for 71.5 %, red 21.3 % and blue only 7.2 % — because human eyes are far more sensitive to green light than to blue.

This is why pure blue text on black is close to unreadable while pure yellow on black is fine, despite both being "one bright colour on black". It is also why a saturated blue and a saturated red of similar apparent vividness can have wildly different contrast against the same background.

Each channel is also linearised first, undoing the gamma curve that screens apply, so the numbers reflect actual light output rather than stored pixel values.

The thresholds, and which ones matter

• 4.5:1 — AA, body text. This is the one that matters. It is what accessibility regulations in most jurisdictions require, and what an audit will check.
• 3:1 — AA, large text. Large means 24px, or 18.66px if bold. Larger letterforms are legible at lower contrast.
• 3:1 — interface components. Icons, input borders, focus rings, chart lines. Frequently missed, because people check their text and stop.
• 7:1 — AAA, body text. A stricter target, rarely a legal requirement, and worth aiming for on anything read at length.

Where the standard stops helping

This calculation has known weaknesses. It is poor at predicting legibility for very light text on dark backgrounds, where it tends to be too generous, and it ignores font weight and size entirely except through the crude large-text exception. Thin text at 4.5:1 can be considerably harder to read than the number suggests.

Newer approaches such as APCA model this better and may eventually replace it. For now, WCAG 2 is what standards and regulations reference, so it is what this checks — but passing it is a floor, not proof that something reads well.

Practical advice

• Grey body text is the most common failure. #999 on white is 2.85:1 and fails outright. It looks refined in a design mockup and is genuinely hard work on a phone outdoors.
• Check your placeholder and disabled states, which are almost always the lightest text on a page.
• Check both themes. A pairing that passes in light mode frequently fails in dark.
• Never use colour alone to convey meaning. A red border on an invalid field means nothing to someone who cannot distinguish it — add an icon or text.

Common uses

• Checking a palette before it is built into anything.
• Fixing an audit finding by adjusting the lightness until the number passes.
• Choosing text colour for a brand background.
• Settling an argument about whether something is too light.

Questions people ask

What contrast ratio do I need?

4.5:1 for body text and 3:1 for large text or interface components. AAA asks for 7:1, which is a stricter target rather than a common legal requirement.

What counts as large text?

24px, or 18.66px if bold. Below that the 4.5:1 rule applies.

Why is green weighted so heavily in the calculation?

Because human eyes are far more sensitive to green light. Green contributes 71.5 % of perceived luminance, red 21.3 % and blue only 7.2 %.

Does passing WCAG mean my text is easy to read?

Not necessarily. The formula ignores font weight and size except through the large-text exception, and is known to be over-generous for light text on dark backgrounds. Treat it as a floor.

Does this apply to icons and borders too?

Yes, at 3:1. Interface components are covered and are frequently missed because people check text and stop.

Is grey text on white acceptable?

It depends which grey. #999 on white is 2.85:1 and fails. #767676 is 4.54:1 and passes, which is why that value appears so often.