How to Audit a Website for Accessibility: Start with Color Contrast

If you've been asked to "make the website accessible" and don't know where to start, start with color contrast. It's the most commonly cited issue in ADA lawsuits, it affects every page, and it's usually the quickest category of problems to fix. A single afternoon of contrast fixes can measurably reduce your legal exposure.

Here's a practical audit process that takes a few hours and catches the issues that matter most.

Phase 1: Automated Contrast Scan (10 minutes)

Don't manually inspect elements one at a time. Use a page scanner that checks every text node on the page against its computed background color. This gives you a prioritized list of violations — worst contrast first.

Scan these pages at minimum:

Homepage — Your most visited page. If it fails, the largest number of users are affected.

One article/product/dashboard page — Represents your core content template.

Checkout or signup flow — If users can't complete a transaction because they can't read the form, that's revenue lost.

One page with a non-white background — Dark sections, colored cards, and gradient backgrounds often hide contrast failures that don't exist on white pages.

For each page, the scanner will return a list of elements where the text-to-background ratio falls below 4.5:1 (the WCAG AA threshold for normal text). Export or screenshot the results — you'll need them for Phase 3.

Phase 2: Spot-Check Interactive States (20 minutes)

Run a quick contrast scan on any page. Free Chrome extension — no account, instant results.

Get the Chrome Extension

Automated scans check the default state of each element. They don't check hover, focus, active, or disabled states. These need manual verification:

Hover states — Does link text change color on hover? If it gets lighter, it may drop below 4.5:1.

Focus indicators — Tab through the page. Is the focus ring visible on every interactive element? WCAG 2.1 requires 3:1 minimum contrast for focus indicators.

Active/pressed states — Buttons often darken or lighten on press. Verify the text remains readable in both states.

Error states — Form validation text is frequently red (#FF4444) on white, which fails at ~3.8:1. Use a darker red like #C62828 (5.2:1).

Phase 3: Prioritize and Fix (1-2 hours)

Not all contrast failures are equally urgent. Prioritize by user impact:

Critical (fix today): Body text, form labels, button text, navigation links, error messages. These are the elements users need to read to use your site.

High (fix this week): Headings, card titles, pricing numbers, table headers. Users can technically navigate without reading these perfectly, but they degrade the experience significantly.

Medium (fix this sprint): Footer text, metadata (dates, authors, tags), image captions. These are supplementary content — lower urgency but still covered by WCAG.

Low (document and schedule): Decorative text, disabled elements, logo text. WCAG exempts some of these, but documenting why they're exempt is good practice.

Phase 4: Verify and Document (30 minutes)

After fixing each batch, re-scan to confirm the violations are resolved. Keep a record of:

Which pages were audited and when

How many violations were found and fixed

Any issues that were deferred and why

The tool(s) used for scanning

This documentation serves two purposes: it demonstrates good-faith effort if your site ever faces an accessibility complaint, and it gives the next person auditing your site a baseline to compare against.

Beyond Contrast: What to Check Next

Once contrast is under control, expand the audit to cover: keyboard navigation (can you complete every task without a mouse?), screen reader compatibility (do images have alt text? are form labels associated with inputs?), and heading structure (do headings form a logical outline?).

But start with contrast. It's the most common failure, the most cited in legal actions, and the category where an hour of effort produces the most visible improvement. Run a scan, fix the red items, and you've already made your site meaningfully more accessible than it was this morning.