Dark Mode Contrast Checker & Accessibility Ratio Tool
Light text on sleek dark slate canvas.
WCAG 2.1 Contrast & APCA Checker
Normal body text (16px, 400 weight). If this text is difficult to read against the background, your visitors will experience cognitive fatigue and bounce within seconds.
Accessibility Verdict & Guidance:
- Optimal legibility across all screens, lighting conditions, and visual impairments.
Audit Your Live Website in 10 Seconds
Get an instant above-the-fold hero teardown, cognitive friction diagnostics, button contrast verification, and HTML issue checks directly on your live page.
Methodology & Grounded Benchmarks
What are the official WCAG 2.1 contrast thresholds?
WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3.0:1 for large text (≥18pt or 14pt bold). Level AAA requires 7.0:1 for normal text and 4.5:1 for large text. UI components and graphical boundaries require 3.0:1.
How is relative luminance calculated?
According to W3C specs, each sRGB color component (R, G, B) is linearized: values ≤ 0.04045 are divided by 12.92; otherwise, ((value + 0.055) / 1.055)^2.4. Luminance L is computed as 0.2126*R + 0.7152*G + 0.0722*B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05).