WCAG Contrast Ratio Lab | mysimulator.uk

Foreground Color

Hue 210°

Lightness 85%

Background Color

Hue 210°

Lightness 18%

Large text (≥18pt / 14pt bold)

Aa Sample

#000000

Aa Sample

#000000

1.00:1

contrast ratio (L1+0.05)/(L2+0.05)

AA normal 4.5:1—

AA large 3:1—

AAA normal 7:1—

AAA large 4.5:1—

Relative luminance L(fg)

0.000

Relative luminance L(bg)

0.000

How it works

WCAG 2.x (Success Criterion 1.4.3) defines contrast purely from each color's relative luminance. Each sRGB channel c ∈ [0,1] is first linearized:

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

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

The contrast ratio between the lighter luminance L1 and the darker L2 is then:

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

Ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
AA requires 4.5:1 for normal text, 3:1 for large text (≥18pt, or ≥14pt bold).
AAA requires 7:1 for normal text, 4.5:1 for large text — the guideline the source article's "minimum contrast 4.5:1" line is quoting is AA-normal.
The two markers in the 3D view sit at their actual position inside the sRGB color cube; the vertical bar below the cube maps both colors onto the 0→1 luminance scale that the ratio is computed from — notice two very differently-colored points can share almost the same luminance (and therefore fail contrast) if their weighted-channel sum matches.

This is the exact check every automated accessibility auditor (axe, Lighthouse, WAVE) runs on every text/background pair on a page.

Foreground / background markers sRGB unit cube

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