Dark Mode Contrast & Luminance Lab

Presets

Background color

Text color

230

236

WCAG verdict

—

L (background)

0.000

L (text)

0.000

Contrast ratio

1.00 : 1

Threshold gap

—

How it works

Perceived brightness is not the raw 0–255 value — screens store colour in gamma-compressed sRGB, so each channel is first linearised:

c = value / 255
c_lin = c/12.92                    if c ≤ 0.04045
c_lin = ((c+0.055)/1.055)^2.4      otherwise

WCAG 2.x relative luminance weights the linear channels by the eye's cone sensitivity — green dominates, blue barely registers:

L = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin

The bars on the right show exactly those three weighted terms for both colors — that's why a pure-blue background still looks "dark" even at full intensity. Contrast ratio compares the lighter luminance L1 to the darker L2:

Contrast = (L1 + 0.05) / (L2 + 0.05)

≥ 7.0 : 1 — passes AAA for normal text.
≥ 4.5 : 1 — passes AA for normal text (the usual dark-mode target).
≥ 3.0 : 1 — passes AA only for large text (≥ 18pt) or UI components.
< 3.0 : 1 — fails; the pair is not readable enough for a dark-mode theme.

This is the exact check behind a real prefers-color-scheme implementation: a dark theme is not just "invert the colors" — it must keep this formula's output above 4.5:1 for body text, which is why near-black (not pure #000) backgrounds paired with off-white (not pure #fff) text are the common dark-mode choice: pure white-on-black overshoots to ~21:1 and can itself cause glare/halation for some readers.

R·0.2126 G·0.7152 B·0.0722

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.