WCAG Contrast Ratio Lab (2D)

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) — verified numerically against this exact formula (white vs black gives 21.000 exactly).
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 2D field plots every color by hue (x) and lightness (y) at fixed saturation; the two markers are draggable and sit at the foreground/background color's true position. The bar beneath maps both colors onto the 0→1 luminance scale the ratio is actually computed from — two very differently-hued points can land on almost the same luminance (and therefore fail contrast) if their gamma-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. Drag the field to pan, scroll/pinch to zoom.

Foreground marker (drag) Background marker (drag)

Drag markers · scroll/pinch to zoom · drag field to pan