Back to courseLesson 2 of 6

Contrast is not a feeling

What you'll learn

Measure legibility instead of guessing it: relative luminance weights green seven times heavier than blue, and the same pure hue can score 15:1 against black and fail against white.

"Those two colors pop." Maybe. But pop is a report about your experience, and the question a professional actually has to answer is narrower and harsher: can someone read text in this color on that background? That one has a number.

Luminance is weighted, and the weights are lopsided

Screen light isn't democratic. Your eye is far more sensitive to green than to blue, and the sRGB standard encodes exactly how much:

L=0.2126R+0.7152G+0.0722BL = 0.2126R + 0.7152G + 0.0722B

(after each channel is linearized — screens don't store light proportionally, they store it bent by a gamma curve, and the formula undoes that first).

What a channel contributes to luminanceRed0.2126Green0.7152Blue0.0722Green counts about ten times heavier than blue — so:#0000ffAa8.59:1AAA — reads on whiteAa2.44:1Fail — unreadable on black#00ff00Aa1.37:1Fail — unreadable on whiteAa15.30:1AAA — reads on black

Green carries almost ten times the luminance of blue. That single asymmetry explains a result that looks like a paradox:

  • Pure blue #0000ff scores 8.59:1 on white — passes AAA — and 2.44:1 on black, a clear fail.
  • Pure green #00ff00 is the exact mirror: 1.37:1 on white, fail; 15.30:1 on black, AAA.

Both are fully saturated primaries. Both are "vivid". One is nearly black to the eye and the other is nearly white, and nothing about the hue wheel from the last lesson can tell you which is which.

The ratio, and what the thresholds mean

ratio=Llighter+0.05Ldarker+0.05\text{ratio} = \frac{L_\text{lighter} + 0.05}{L_\text{darker} + 0.05}

The 0.05 is a flare term — it models the light your screen never quite stops emitting, which is why the scale tops out at 21:1 (white on black) instead of running to infinity, and bottoms at 1:1 for a color against itself.

RatioVerdict
≥ 7AAA
≥ 4.5AA — the working standard for body text
≥ 3AA for large text only (≥ 24 px, or 19 px bold)
< 3Fail

Note what the thresholds are indexed to: size. The same pair of colors can be legal as a headline and illegal as a caption. Contrast is a property of the combination in use, not of the palette in the abstract.

Two axes, not one

This is the lesson the two tools teach together:

  • Hue distance — the angle from last lesson — governs whether colors feel related, tense, or opposed.
  • Luminance distance — this lesson — governs whether anything can be read.

They are independent. A complementary pair sits at maximum hue distance and can still have nearly identical luminance, which is exactly the combination that vibrates and defeats readers. Meanwhile a monochromatic scheme has zero hue distance and can be perfectly legible, because it spends its entire budget on value.

The professional habit that follows: design in hue, verify in luminance. Choose the scheme on the wheel, then check every text pair against the number before it ships.

Run it

Open the color theory explorer with pure green loaded:

  1. Read the two contrast panels: 1.37:1 on white, 15.30:1 on black. Then swap the hex to #0000ff and watch the two verdicts trade places.
  2. Keep a hue and drag lightness alone. The wheel geometry never moves; the contrast verdict crosses every threshold. That's the two axes, one slider apart.
  3. Find the lightness where your favorite brand hue first reaches 4.5:1 on white. That value — not the hue — is the one your body text has to live with.

Check your understanding

Question 1 of 3

Pure blue #0000ff scores 8.59:1 as text on white but only 2.44:1 on black. Why?

Next lesson