InspectDev
Contrast Checker
An accessibility contrast tool that computes the WCAG contrast ratio between any two colors. Pick colors from the page or enter hex values, and instantly see whether they pass AA or AAA for normal and large text.
About Contrast Checker
Contrast Checker makes WCAG compliance a two-second check. Grab a foreground and background color from any page and immediately know whether your combination is readable enough to ship.
Features
Everything you need to inspect and tweak your page styles, all in one focused panel.
Pick from Anywhere
Sample colors directly from the page with the eyedropper, or type hex values — the ratio updates live as you choose.
WCAG AA / AAA
See pass/fail results for normal text, large text, and UI components against both WCAG AA and AAA thresholds.
Inline Preview
Preview your two colors as text-on-background so you can judge readability at a glance, not just the number.
How to use
- 1
Select Contrast Checker from the InspectDev toolbar.
- 2
Pick a foreground and background color — from the page or by entering hex values.
- 3
Read the contrast ratio and the AA/AAA pass status for normal and large text.
- 4
Adjust colors until you hit a passing ratio, then copy them out for your stylesheet.
Try Contrast Checker free
Contrast Checker is included in the free version of InspectDev. Upgrade to Pro for advanced features like persistent workspaces and team sync.
