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.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

# 3,345 ▲ 51

Other rankings

#1707 in Developer Tools ▲ 1

#8 in checker keyword 63 ▲ 1

#18 in color keyword 74 ▼ 1

#70 in change color keyword 15 ▼ 2

#174 in plugin keyword 58

Upgrade to see more rankings

Other platforms

Not available on Android

WCAG Contrast checker (v3.8.4)

4.14

(14) 4,267+

WCAG Color contrast checker (v3.8.4)

4.00

(1) 7,579+

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 checking color contrast accessibility issues
Easy to use and verify contrast quickly
Great extension for accessibility testing

Cons

Sometimes detects incorrect colors for foreground and background
Does not respect text-shadows which can improve readability
Issues with local PDFs and color mixing in CSS
Requires access to browser history, raising privacy concerns

Most mentioned

Panel positioning options
Visibility of elements affecting scores
Support for CSS variables
Updates causing functionality issues

User 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.