Contrast Checker (WCAG AA / AAA grades)

How the contrast ratio works

WCAG (Web Content Accessibility Guidelines) defines contrast as the ratio between the relative luminance of two colors. The formula linearizes each sRGB channel, weighs them by human eye sensitivity (R 0.2126, G 0.7152, B 0.0722), then computes (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (identical) to 21:1 (black on white).

We compute this in your browser using the official WCAG 2.x formula. The four grade badges check against AA's 4.5:1 (normal) and 3:1 (large), and AAA's 7:1 (normal) and 4.5:1 (large) thresholds. 'Large text' is 24px / 18pt, or 18.66px / 14pt bold.

Why pass AA at minimum

AA is the legally enforceable level in many jurisdictions (US ADA, EU EN 301 549, UK Equality Act for digital services). Failing AA on body text is the single most common accessibility issue and the easiest to fix during design rather than after launch.

AAA is recommended for long-form reading, government services, and high-stakes interfaces. It's strict — a designer's first instinct of pale gray on white usually fails AAA easily. If your site mostly serves quick-glance content, target AA; if you publish books, articles, or critical info, target AAA.

Common mistakes

'It looks fine on my screen.' Calibrated screens, fluorescent office lights, and outdoor smartphone use all change perceived contrast. Use the ratio, not your eye.

Designing dark mode by inverting hex codes. Inversion changes hue and breaks contrast. Re-test every color pair after switching themes.

Trusting brand guidelines. Many brand palettes were chosen before WCAG awareness. If brand pink-on-white fails, propose a slightly darker pink for body copy and reserve the original for decorative use.