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

Extension stats

By: Jorge Rumoroso

View on Chrome Web Store

Users: 70,000+

Rating: 4.19 (26)

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

Ranking

# 3020 ▼ 3

Other rankings

#1690 in Developer Tools

#8 in checker keyword 65

#23 in color keyword 77

#77 in change color keyword 15 ▼ 19

#189 in plugin keyword 52 ▲ 66

Upgrade to see more rankings

Other platforms

WCAG Contrast checker (v3.8.4)

4.14

(14) 4,279+

WCAG Color contrast checker (v3.8.4)

4.00

(1) 7,593+

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.

Extension 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

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

Works well for verifying contrast across multiple visual deficiencies
Great for finding color contrast accessibility issues
Useful tool for testing accessibility

Cons

Occasionally detects wrong colors for foreground and background
Does not respect text shadows
Problems with local PDFs after the last update
Lacks support for CSS variables

Most mentioned

Issues with color detection
Desire for better positioning options for the panel
Concerns about access to browser history

Recent reviews

Haven't had any major issues with it. Works well for what it is and can quickly verify contrast on page across multiple visual deficiencies.

K B, 2024-09-27

Does not really work well, in some cases it detects the wrong colors for for- and background. forground: #ffffff background: #ffffff But on page it is: forground: #ffffff background: rgba(25, 145, 238, 0.8) It also does not respect text-shadows which improve the readability, which is confirmed by people with very bad eyesight.