Contrast Checker
Test foreground/background pairs against WCAG AA & AAA — live.
See how it works
Watch a quick simulation of this tool in action — no file needed.
How to use Contrast Checker
Follow these steps — everything happens instantly in your browser.
- 1
Step 1. Pick a foreground (text) color and a background color using the swatches or HEX inputs.
- 2
Step 2. Read the live contrast ratio displayed at the top of the results panel.
- 3
Step 3. Check the WCAG 2.1 results grid for AA and AAA pass/fail on normal and large text.
- 4
Step 4. Hit the swap button to flip the two colors and re-test.
Why use this tool
Private by design
All processing happens locally in your browser. Open DevTools → Network and you'll see zero file uploads. Ever.
Instant
No upload wait, no queue, no server round-trip. Results appear the moment you drop a file.
Free & unlimited
No accounts, no watermarks, no daily caps. Use it as many times as you like, forever.
Works everywhere
Desktop, tablet or phone — every tool is responsive and installable as a PWA for offline use.
Frequently asked questions
Everything you might want to know about contrast checker.
Color Converter
Convert HEX ↔ RGB ↔ HSL live with one click. No uploads.
Color Palette Generator
Pick a base color and instantly generate a 5-stop harmonious palette.
Gradient Generator
Design CSS linear & radial gradients with up to 5 stops — copy-ready.
Box Shadow Generator
Tune x/y/blur/spread/opacity + color and copy clean CSS instantly.