You've probably seen accessibility audits flag contrast ratio failures. Maybe Lighthouse gives your site a poor score, or a design review marks text as "unreadable for low-vision users." But what does a contrast ratio actually measure, and what do the thresholds mean?

Here's the practical explanation — with the math kept simple.

What contrast ratio means

The WCAG contrast ratio compares the relative luminance of two colours: foreground (text) and background. Luminance is a measure of perceived brightness, not just the raw RGB value.

The formula:

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

Enter fullscreen mode

Exit fullscreen mode

Where L1 is the lighter of the two luminance values and L2 is the darker.…