PageAudit
Back to blog

How to Check Website Accessibility in Chrome (3 Free Methods)

·PageAuditors Team

How to Check Website Accessibility in Chrome (3 Free Methods)

You do not need expensive software or an accessibility consultant to find WCAG violations on your website. Chrome has free tools built in, and there are excellent free extensions that go further.

Here are three methods, ordered from easiest to most technical.

Method 1: Use a Chrome Extension (Fastest)

The fastest way to check accessibility is a one-click Chrome extension. Install it once, then click the icon on any page to get results.

Steps

  1. Install an accessibility checker extension from the Chrome Web Store. We recommend Accessibility Checker -- ADA & WCAG Scanner for its plain-English results and compliance score.
  2. Navigate to the page you want to check.
  3. Click the extension icon in your toolbar.
  4. Review the results: a compliance score (0-100), issues grouped by severity (critical, serious, moderate, minor), and fix instructions for each problem.

What You Get

  • Compliance score with color-coded severity breakdown
  • Plain-English descriptions of every issue
  • Click-to-highlight: click any issue to see the exact element on the page
  • Works on localhost, staging, and password-protected pages

Best For

Quick spot checks during development, content reviews, or pre-launch audits. Extensions scan one page at a time and run entirely in your browser, so there is nothing to configure and no data leaves your machine.

Method 2: Use Chrome Lighthouse (Built-In)

Chrome includes Lighthouse in DevTools, which provides an accessibility score alongside performance and SEO scores.

Steps

  1. Open DevTools: press F12 or Cmd+Option+I on Mac.
  2. Click the Lighthouse tab (you may need to click >> to find it).
  3. Select Accessibility under categories. Uncheck other categories if you only want accessibility results.
  4. Select Navigation as the mode and choose Mobile or Desktop.
  5. Click Analyze page load.
  6. Review your accessibility score and the list of issues.

What You Get

  • Accessibility score out of 100
  • List of failing audits with links to documentation
  • "Passed audits" section showing what you got right
  • Manual checks that Lighthouse cannot automate (you need to verify these yourself)

Limitations

Lighthouse uses axe-core internally but runs a smaller subset of rules than dedicated accessibility extensions. It is a good starting point, but it will miss some issues that a dedicated checker catches.

Method 3: Use Chrome DevTools Accessibility Features

Chrome DevTools has several built-in accessibility debugging features that go deeper than automated scans.

Accessibility Tree

  1. Open DevTools and go to the Elements panel.
  2. Select any element in the DOM.
  3. Open the Accessibility pane in the sidebar (you may need to enable it via the ... menu).
  4. Review the element's ARIA role, name, description, and state as screen readers see it.

Color Contrast Checker

  1. In DevTools, inspect a text element.
  2. Click the color swatch next to color in the Styles panel.
  3. The color picker shows the contrast ratio against the background.
  4. A checkmark or X indicates whether it meets WCAG AA (4.5:1) and AAA (7:1) thresholds.

CSS Overview (Contrast Issues)

  1. Open DevTools and press Cmd+Shift+P to open the command menu.
  2. Type "CSS Overview" and select Show CSS Overview.
  3. Click Capture overview.
  4. Scroll to the Colors section to see contrast issues flagged across the entire page.

Emulate Vision Deficiencies

  1. Open DevTools and press Cmd+Shift+P.
  2. Type "rendering" and select Show Rendering.
  3. Scroll to Emulate vision deficiencies.
  4. Select from blurred vision, protanopia, deuteranopia, tritanopia, or achromatopsia.
  5. Your page updates in real time to show how it appears to users with these conditions.

Best For

Debugging specific elements after an automated scan flags them. Use the accessibility tree to verify that ARIA roles and labels are correct. Use the color picker to test alternative colors that meet contrast ratios.

Which Method Should You Use?

MethodSpeedCoverageTechnical Level
Chrome ExtensionSecondsHigh (WCAG 2.2 AA)Beginner
Lighthouse30 secondsMediumBeginner
DevTools FeaturesManualTargetedIntermediate

Our recommendation: Start with a Chrome extension for a quick full-page scan. Use Lighthouse for a second opinion. Use DevTools features to debug specific issues flagged by either tool.

For site-wide auditing with multi-page crawling, scheduled monitoring, and PDF reports, check out PageAuditors.