Contrast Ratio Field Map | mysimulator.uk

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 left half of the canvas plots every possible (L_bg, L_fg) pair as a 2D field — a whole luminance-vs-luminance parameter space, not just your one chosen pair. It's colored by the same formula:

Contrast = (L1 + 0.05) / (L2 + 0.05)   where L1=max(Lbg,Lfg), L2=min(Lbg,Lfg)

≥ 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.

The bright contour lines are the exact 3.0/4.5/7.0 iso-contrast boundaries — every point on a given line shares that contrast ratio. Your current bg/text pair is the white crosshair; drag the sliders and watch it move across the field instead of just reading one number. The top-right curve shows the gamma linearization itself, and the bottom-right bars are the three cone-weighted terms that sum to each color's luminance — this is the exact check behind a real prefers-color-scheme implementation.

AAA ≥ 7:1 AA ≥ 4.5:1 Large-only ≥ 3:1 Fail < 3:1