WCAG Color contrast checker

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

WCAG Color Contrast Checker Chrome Extension

"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

Users: 70,000+

Rating: 4.22

(27)

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

# 3,310 ▼ 103

Other rankings

#1695 in Developer Tools ▼ 2

#6 in checker keyword 54 ▲ 1

#14 in color keyword 79 ▲ 1

#62 in change color keyword 15 ▲ 2

#214 in plugin keyword 57 ▲ 2

Upgrade to see more rankings

Other platforms

Not available on Android

WCAG Contrast checker (v3.8.4)

4.14

(14) 4,202+

WCAG Color contrast checker (v3.8.4)

4.00

(1) 7,373+

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 color contrast and accessibility issues.
Great extension for quickly finding color contrast problems.
Helpful tool for testing accessibility.

Cons

Sometimes detects incorrect colors for foreground and background.
Stopped working with local PDFs after last update.
Cannot change the position of the panel to the right side.
Does not show which specific elements are causing contrast issues.

Most mentioned

Issues with detecting colors accurately.
Request for better interface customization.
Desire for updates to improve functionality.

User reviews

Rodrigo Cunha, 2024-12-23

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.