You know the old way: inspect element, click the color swatch, read the ratio, close DevTools, move to the next element, inspect again, click again, read again. Do this 80 times for a single landing page. Hope you didn't miss the footer text. Hope you remembered to check the hover states. Hope the cookie consent banner is accessible — because if it isn't, and someone files a complaint, 'I didn't think to check that' isn't a legal defense.
There's a faster way. One click, 2-4 seconds, and you have a complete list of every contrast violation on the page — ranked worst-first, with exact ratios and one-click fixes.
Here's how to scan any website for contrast issues, and what to do with the results.
Why Manual Inspection Doesn't Scale
Even on a modest page with 50 text elements, manual inspection takes 15-20 minutes. And you will miss elements:
A page scanner checks every one of these automatically. It doesn't get tired. It doesn't skip the footer because 'nobody reads that anyway.' It finds every text node, computes its actual foreground and background colors using the browser's own CSS cascade engine, and reports back with the exact ratio.
How a Page Scan Works (In Plain English)
1. DOM walk. The scanner walks every visible text element on the page — paragraphs, headings, buttons, links, labels, list items, placeholder text, table cells.
2. Computed color extraction. For each element, it uses `getComputedStyle()` — the same browser API that renders what you see — to get the actual foreground and background colors. Not the CSS values in your stylesheet. The computed values after inheritance, cascading, and var() resolution.
3. WCAG evaluation. Each text-background pair is run through the WCAG 2.1 contrast formula. Results are categorized by font size (large text = 3:1 minimum, normal text = 4.5:1) and displayed with pass/fail for AA Normal, AA Large, AAA Normal, and AAA Large.
4. Prioritized report. Violations are sorted by severity — worst contrast first. Passes are listed separately. Every entry includes the element tag, the text content, both colors, and the exact ratio.
The One-Click Method: Chrome Extension
Scan any page in one click. Free Chrome extension — instant results, no account, zero data collection.
Scan Your Site FreeThe fastest way to scan any page you can visit:
1. Install the free ColorContrast Chrome Extension — 30 seconds, no account
2. Visit any page you want to audit — your own site, a client's site, a competitor's site
3. Click the extension icon — a floating panel opens on the page
4. Click Scan — in 2-4 seconds, the full violation list appears
Each violation entry includes:
Click any violation and the extension scrolls to the element, outlines it in red, and shows the ratio in a floating label. You're not guessing which 'Add to cart' button failed — you're looking at it.
The URL Method: Scan Without Installing Anything
If you can't install extensions (locked-down work laptop, client machine, quick one-off check), paste the URL into the URL Contrast Checker. It fetches the page, resolves all inline and external CSS, and returns the same violation report in your browser.
This is also useful for:
Limitation: The URL checker can only scan publicly accessible pages. For localhost, staging servers behind auth, or internal tools, use the Chrome extension.
What to Scan (Priority Order)
Don't try to audit your entire site at once. Start with these pages, in this order:
1. Homepage. Your most visited page. If it fails, the largest number of users are affected. It's also the page most likely to be cited in a demand letter.
2. Pricing or signup page. Where users become customers. A form field with invisible placeholder text or a low-contrast CTA button directly costs you revenue.
3. Checkout flow (every step). E-commerce: cart → shipping → payment → confirmation. SaaS: signup → plan selection → billing → onboarding. Every step is a potential abandonment point if users can't read the form labels.
4. Blog or content pages. If your content is unreadable, your SEO effort is wasted. Users bounce from pages they can't read.
5. One page with a non-white background. Dark sections, colored cards, gradient backgrounds — these hide contrast failures that don't exist on white pages.
After the Scan: Fix and Verify
The scan gives you the problem list. Here's what to do with it:
1. Sort by severity. Fix the worst-contrast violations first — these are the elements that are functionally invisible to users with low vision.
2. Use the one-click alternatives. Click any failing color pair in the extension to see accessible alternatives that preserve the original hue. One click applies the replacement to the element so you can preview the fix.
3. Re-scan. After fixing all violations, scan again. The violation count should be zero. If new violations appeared (common when fixing multiple issues on a complex page), fix those too.
4. Export. Save or screenshot the clean scan result. This is your compliance documentation — proof that you tested and fixed issues.
How Often Should You Scan?
Every time you: publish a new landing page, redesign a component, change a brand color, add a new theme (especially dark mode), or update your CSS framework.
Accessibility isn't a one-time fix because websites aren't static. The best workflow: scan before every deployment. If the violation count goes up, something regressed — fix it before it hits production.
One click. Two seconds. Zero excuses.