Skip to content
English
Go to reciteme.com
  • There are no suggestions because the search field is empty.

(BETA) Contrast Scanner

The WCAG Contrast Scanner helps you quickly identify and fix colour contrast issues on any webpage

Accessing the WCAG Contrast Scanner

  • Your Customer Success Manager will provide you with a link to install the WCAG Contrast Scanner.

  • Once installed, click the Extensions icon in the top-right corner of your browser and select WCAG Contrast Scanner. This will open the scanner panel.


Using the WCAG Contrast Scanner

The WCAG Contrast Scanner helps you quickly identify and fix colour contrast issues on any webpage, whether it's a live website or a local development environment.

  1. Select the WCAG Standard you wish to test against (e.g. WCAG AA or AAA).
  2. Click "Scan Page" to analyse all visible text content on the current page.
  3. Any contrast failures will be listed in the Results panel, along with the overall pass rate and number of issues found.
  4. Click "Highlight" on any issue to locate the failing element directly on the page.
  5. Review the detailed information provided, including:
    • The failing text
    • Foreground (text) colour
    • Background colour
    • Contrast ratio
    • Font size
    • Font weight
    • WCAG level failed
  6. Click "Preview" on any issue to use the built-in Colour Wheel to experiment with alternative colours. Suggested colours that meet the selected WCAG standard are automatically highlighted in green, helping you find accessible alternatives quickly.
  7. Enable "Highlight all issues" to view every failing element on the page at once.
  8. Click "Export CSV" to download a report containing all identified contrast issues for auditing, sharing, or remediation tracking.

Key Features

  • Scans live websites and local development pages.
  • Tests text and background colour combinations against WCAG contrast requirements.
  • Highlights failing elements directly within the browser.
  • Displays colour values, contrast ratios, font size, and font weight.
  • Provides accessible colour suggestions with pass/fail indicators.
  • Exports detailed results to CSV for reporting and compliance reviews.

The WCAG Contrast Scanner makes it easy to identify accessibility issues, understand why they fail, and find compliant colour combinations without leaving your browser.