Contrast Checker
What this does
Compute WCAG contrast ratios, surface AA/AAA pass status for normal and large text, and generate nearby accessible pairs. Helpful for UI polish, brand reviews, and handoff specs.
All math is local; no color data leaves the page. Copy-ready CSS variables let you drop chosen pairs into design systems quickly.
How to use it
Enter foreground and background hex values or paste from a design token file. The ratio readout shows whether your pair passes AA or AAA for both normal and large text. The preview block updates instantly so you can judge legibility in-context. Click “Random accessible pair” to generate a compliant starting point when you are exploring palettes.
Scroll to Suggestions to try small lightening or darkening adjustments. Each suggestion lists its ratio and an Apply button to adopt the pair. When you land on a keeper, copy the CSS variables to drop directly into a stylesheet or design system file.
Who benefits
Designers and UX writers validating brand palettes, engineers adding design-token checks to PRs, QA teams running accessibility sweeps, and product managers writing acceptance criteria can all use this page to reduce churn. Support teams can check that quick fixes in a status page remain legible for all users, while marketing teams can validate campaign colors before launch.
Educators teaching accessibility can demo contrast rules live without relying on external services. Because nothing leaves the browser, it is safe to use with unreleased brand colors during internal reviews.
Implementation details
The checker uses WCAG 2.1 relative luminance and contrast formulas. Normal text thresholds are 4.5:1 for AA and 7:1 for AAA; large text thresholds are 3:1 for AA and 4.5:1 for AAA. Calculations run locally with no network calls or third-party libraries, keeping the page fast and private.
Suggestions nudge colors by small deltas to help you reach passing ratios without redesigning your palette. Because the tool is deterministic, you can repeat adjustments to converge on the exact ratio you need for token reviews or PR comments.