The 4.5:1 rule: color contrast that keeps you legal

Gray text on white backgrounds looks refined in a design mockup and unreadable on a phone in sunlight. Roughly one in twelve men has some form of color vision deficiency, everyone’s eyes age, and every screen renders differently. That’s why the WCAG contrast rules exist — and why automated scans consistently find low-contrast text to be the number-one accessibility failure on the web.

The actual numbers

WCAG measures contrast as a ratio between the relative luminance of text and background, from 1:1 (invisible) to 21:1 (black on white). The requirements: 4.5:1 for normal body text, 3:1 for large text (24px and up, or 19px bold), and 7:1 for the stricter AAA level. Interface elements like button borders and icons need 3:1.

These aren’t style opinions — they’re the thresholds where research shows text stays readable for people with moderately low vision. And since the European Accessibility Act became enforceable in June 2025, contrast failures on commercial sites carry genuine legal exposure in the EU, adding to the ADA lawsuit risk that already existed in the US.

The failures everyone commits

Light gray placeholder text (#999 on white is 2.8:1 — fails). White text on brand pastels. Text over photos without an overlay. Disabled-looking buttons that are actually enabled. ‘Sleek’ dark modes with dark gray on darker gray. Every one of these ships daily from professional teams, because contrast failure is invisible to young eyes on bright monitors.

How to fix contrast without ruining the design

You don’t need black-on-white. Check your pair in the tool above, and if it fails, darken the text a step at a time until it clears 4.5:1 — in HSL terms, drop the lightness a few points. For text over images, add a subtle dark overlay to the image rather than brightening the text. And test your palette’s neutral gray against both your light and dark backgrounds; the same gray rarely passes on both.