Interactive Math & Science Lessons

Color Contrast Checker (WCAG Luminance)

Enter a foreground and background color to compute today's WCAG relative luminance and contrast ratio (AA/AAA) below. The right-hand swatches under the preview show what the modern WCAG formula 'sees' for each color; the left-hand swatches show what a 1953 NTSC broadcast engineer's luma formula would have shown for the exact same colors — a direct side-by-side of old versus new.

Loading interactive simulation...

Why green outweighs red and blue — and why the law still uses 1953's math 🖖

The weights in the luminance formula (0.2126 green-heavy today, 0.299/0.587/0.114 in 1953) aren't arbitrary: they trace to the CIE 1931 standard observer, which found the human eye's cone response and luminous-efficiency curve make us far more sensitive to green light than red or blue. NTSC needed exactly this kind of weighted sum in 1953 so a new color broadcast still produced a correct grayscale picture on the millions of black-and-white sets already in living rooms — 'luma' was invented as a backward-compatibility hack, not a perceptual ideal. That history matters today because the WCAG 2 contrast ratio checked above is legally load-bearing (cited by the ADA and EN 301549), yet vision scientists consider it flawed: it's known to overrate dark-text-on-light contrast and underrate light-text-on-dark — directly relevant since this very site defaults to a dark theme. WCAG 3's draft replacement, APCA, models that asymmetry properly; until it ships, the formula above remains the one you're actually required to satisfy.

What a contrast ratio actually measures 🖖

The number this tool reports is a ratio of relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. It runs from 1:1 (identical, invisible colors) to 21:1 (pure black on pure white). That 0.05 added to both isn't rounding — it models the faint ambient glare real screens reflect from the room, so even 'pure black' is never truly zero. Aim for 4.5:1 on body text and 3:1 on large text to clear the WCAG AA bar.

A typo frozen into the law 🖖

The formula linearizes each sRGB channel with a piecewise curve that switches from a linear toe to a gamma exponent at a threshold. WCAG 2 puts that switch at 0.03928 — but the actual sRGB standard sets it at 0.04045. The WCAG value is a typo, copied from an early sRGB draft before the number was corrected, and it has been frozen into an internationally cited accessibility law ever since. The error shifts results by less than 10⁻⁴, so no one has bothered to fix the wording.

Problem solved in full

  1. Contrast ratio between #e2e6f0 text and a #1a1d27 background 5 steps

    Work out the contrast ratio between #e2e6f0 text and a #1a1d27 background — this page's own colours. Averaging the channels gives 5.55. WCAG gives 13.46. Find out where the factor of two and a half comes from.

    1. The definition looks harmless: a ratio of two luminances, each nudged by 0.05 so that pure black does not divide by zero. The weights are not equal, and that is the first surprise — green is credited with ten times more luminance than blue.

    2. The second surprise is that the channel values cannot be used as they are. A byte in an image file is gamma-encoded: 128 does not mean half the light, it means roughly a fifth of it. The piecewise expression undoes that encoding, and it is the step that everyone who rolls their own contrast check omits.

    3. Run both colours through it. The light one lands at 0.79, the dark one at 0.0124 — a factor of 63 apart in physical light, from bytes that are only a factor of about 7 apart.

    4. The 0.05 offsets then compress that 63 down to 13.46, which is the number the panel shows. That offset is not cosmetic: it models the light your screen reflects even when displaying black, which is why a dark theme cannot achieve unbounded contrast in a lit room.

    5. The weights explain a designer's most common complaint. Pure green and pure blue are both a single channel at full strength, yet green carries 0.7152 of the luminance and blue only 0.0722.

    Answer

    The tool prints 13.46 : 1, comfortably past AA's 4.5 and AAA's 7. The reason to work it by hand is the gamma step: skip it, average the channels instead, and this pair scores 5.55 — still a pass, but wrong by a factor of 2.4, and on a closer pair that error is the difference between a pass and a failure. The weights are the other half. Green is 9.9 times brighter than blue at the same channel value, so blue text on black is far worse than it looks in a colour picker, and yellow on white far better than designers expect. Try #0000ff against #000000 and read the ratio.

References (2)

· Updated

Reviewed against published sources. Corrections welcome. Editorial policy · Corrections

All Computing lessons →

Example problems