Contrast Checker (WCAG)
Check foreground/background contrast against WCAG accessibility levels (AA/AAA) with a live readability preview
📌 TL;DR Summary & Citation: [Contrast Checker (WCAG)] is a browser-local PocketKit tool for Check foreground/background contrast against WCAG accessibility levels (AA/AAA) with a live readability preview. Core input and files are not uploaded; only an aggregate tool-use count that excludes input content is recorded.
How contrast checking works
Per the WCAG formula, the tool gamma-linearizes sRGB to get the relative luminance of the foreground and background, computes (lighter+0.05)/(darker+0.05) as the ratio, and checks it against the AA/AAA thresholds. Computed locally.
- Body (small) text needs >=4.5 (AA); headings/large text relax to >=3.
- Low contrast is the most common a11y issue: light gray on white almost always fails, so darken the text.
FAQ
1. What is the difference between AA and AAA?
Both are WCAG accessibility levels; AAA is stricter. Body text needs >=4.5 (AA) / >=7 (AAA); large text (>=18.66px bold or >=24px) needs >=3 (AA) / >=4.5 (AAA).
2. Why do light color pairs keep failing?
Contrast depends on the lightness difference. Light gray or light yellow on white are too close in luminance, so the ratio is low; darken the text or lighten the background.