WCAG Color contrast checker

To check the color contrast between foreground and background of the texts

What is WCAG Color contrast checker?

"WCAG Color contrast checker" is a Chrome extension designed to aid web developers and designers in ensuring their site meets accessibility standards. It analyzes text color contrast against backgrounds following WCAG 2.2 guidelines, considering CSS styles and opacity. The extension also simulates color blindness, providing insights on how colorblind users perceive page elements. It features manual color input and picker tools for targeted checks, along with an auto-refresh function for dynamic pages, which is toggleable to suit high-activity sites. This tool is essential for creating inclusive web experiences and can be found along with its privacy statement at the provided link.

Download

Stats

By: Jorge Rumoroso

View on Chrome Web Store

Users: 60,000+

Rating: 4.14 (22)

Version: 3.8.4 (Last updated: 2024-03-03)

Creation date: 2020-06-26

Risk impact: High risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 3

Permissions:

activeTab
storage
webNavigation

Host permissions:

<all_urls>

Size: 166.91K

Email: ru*****@gmail.com

Stats date:

Chrome-Stats Rank

# 3662 ▼ 34

Other rankings

#1511 in Developer Tools #6 in checker keyword 72 ▲ 3 #16 in color keyword 76 #55 in change color keyword 14 ▼ 4 #267 in element keyword 14 ▼ 3

Other platforms

Not available on Firefox

WCAG Color contrast checker (v3.8.4)

4.00 (1) 7,277+

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Summary

Analyze keywords

It checks the color contrast between the foreground and background of the elements that are in the page according to the WCAG 2.2.

It evaluates the contrast on all elements of the page considering their computed style for the color and background-color CSS properties. In case of these colors are defined with RGBA values, it also considers the opacity to deduce the real color that finally is show.

It can simulate color blindness and evaluate the contrast for the simulations. By this way, developers can see how the pages look for colorblind users.

The tool also includes two fields in which the colors can be introduced manually to be tested. It also allows to pick the color directly from the documents.

Finally, it auto-refreshes when DOM of the page changes (addition or removing elements), but if the page has many changes, this behavior can be de-activated.

Privacy statement on: https://rumoroso.bitbucket.io/

User reviews

User reviews summary

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.

Pros

Helpful for testing accessibility
Auto-update feature
Fast and easy to use
Highlighting elements that meet or don't meet criteria

Cons

Issues with displaying on the viewport
Lack of support for CSS variables
Requesting access to browser history
Requires improvements in identifying specific elements

Most mentioned

Requesting access to browser history
Auto-update feature
Lack of support for CSS variables
Issues with displaying on the viewport

Recent reviews

Love it! Would be great if you could add support for APCA and Oklch colors as well.

Sam Revier, 2024-03-22

Stopped to work with local PDFs in last update. Please, consider to fix with a new update. Best regards.

Bruno Tonel, 2024-03-18

很棒的開發工具，但是目前遇到css的color-mix會出問題。希望可以修正。🥺🥺🥺

Shuya, 2024-03-01

View all user reviews

Safety

Risk impact

WCAG Color contrast checker is risky to use as it requires a number of sensitive permissions that can potentially harm your browser and steal your data. Exercise caution when installing this extension. Review carefully before installing. We recommend that you only install WCAG Color contrast checker if you trust the publisher.