Accessibility audits always require checking color contrast ratios. I built a free, browser-only Color Contrast Checker focused on WCAG 2.1 compliance — instant feedback, no server required.
Live Tool
👉 https://devnestio.pages.dev/color-contrast-checker/
What it does
- WCAG AA & AAA — checks both thresholds for normal text, large text, and UI components
- Multiple input formats — hex (#rrggbb), RGB, named colors
- Color pickers — visual foreground/background color pickers for quick iteration
- Contrast ratio display — shows exact ratio (e.g. 4.52:1) with pass/fail badges
- Live preview — renders sample text on your chosen background in real time
- 100% client-side — no data leaves your browser
WCAG thresholds implemented
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
How contrast ratio is calculated
The tool implements the full WCAG relative luminance formula:
- Convert sRGB values (0–255) to linear RGB
- Apply gamma correction:
c <= 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4 - Compute luminance:
0.2126*R + 0.7152*G + 0.0722*B - Contrast =
(L1 + 0.05) / (L2 + 0.05)where L1 is the lighter color
Tech stack
- Pure Vanilla JS (zero dependencies)
- Single HTML file
- CSS custom properties for theming
- Hosted on Cloudflare Pages
Testing
96 tests, all passing ✅
Tests cover:
- Relative luminance calculation accuracy
- Contrast ratio math (spot-checked against WebAIM)
- WCAG pass/fail thresholds for all three size categories
- Hex, RGB, and named color parsing
- Edge cases: white-on-white (1:1), black-on-white (21:1)
- Live preview rendering
- SEO and accessibility meta tags
Why build another contrast checker?
Most contrast checkers are either heavy web apps or browser extensions that request permissions. This one is a single HTML file — bookmark it, download it, run it offline. Purpose-built for quick accessibility checks during development.
All tools at devnestio.pages.dev — free browser-only developer utilities.
Feedback welcome!
Top comments (0)