Accessibility / 02

Contrast ratio.

Reads this page's text and background via getComputedStyle and computes the WCAG contrast ratio. AA needs 4.5:1 for text, AAA needs 7:1.

Notes

The reading is for body text vs body background as currently rendered. For per-block audits, paste your colours into a dedicated contrast checker.

How it works

We read getComputedStyle(document.body).color and .backgroundColor, parse the RGB triple, and compute relative luminance per the sRGB formula (gamma-correct, weighted by human eye sensitivity).

The contrast ratio is (L1 + 0.05) / (L2 + 0.05). WCAG thresholds: 3:1 for large text (18pt+), 4.5:1 for normal text (AA), 7:1 for normal text (AAA).

Related
Colour-blindness simulator
See your design through Protan / Deutan / Tritan filters.
Motion + a11y prefs
OS-level accessibility preferences readout.
Gamma calibration
Make sure your monitor isn't lying about brightness.
Frequently asked

What is WCAG?

Web Content Accessibility Guidelines — the W3C standard for accessible web content. WCAG AA requires text to have at least a 4.5:1 contrast ratio (3:1 for large 18pt+ text). AAA tightens that to 7:1 (4.5:1 for large). Most regulations (Section 508, EAA, AODA) reference WCAG.

Why is contrast ratio important?

Roughly 1 in 12 men and 1 in 200 women have some form of colour-vision deficiency. Many more have low vision or use devices in bright sunlight. High contrast helps everyone read more comfortably — and is legally required for government / regulated industries in many countries.

How is the ratio calculated?

Both colors are converted to relative luminance using the sRGB formula. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 is the darker. The 0.05 fudge factor accounts for ambient room light reflecting off the screen.

What about background images or gradients?

We sample the computed background of the body element. If the page has a complex background (gradient, image, semi-transparent layers), this becomes approximate. For production sites, audit each text block against its actual visible background.

Does dark mode help?

Yes, if implemented carefully — pure black text on pure white is 21:1, but pure white on pure black is also 21:1. The pitfall is mid-grey on dark backgrounds: looks elegant, fails contrast. This tool surfaces the actual numbers for whatever scheme is currently rendered.

Related tools in Accessibility
Colour-blindness
Protan, Deutan, Tritan simulators.
Reduced motion + prefs
OS-level a11y preferences readout.