Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.

Latest Version

Version
1.1.2
Update
August 25, 2014
Size
58.27KiB
Developer
accessibility.oit.ncsu.edu
Category
Users
70,000+
Rating
3.36364 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
Tabs
Http://*/*
Https://*/*

Storage
See more

Color Contrast Analyzer Extension

New in version 1.1: Download the image analysis to a PNG file.

This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.

Additionally, you can evaluate files on your computer that can be opened in Chrome, such as image files and PDF files. Note, with PDF files you will only be able to evaluate the visible portion of the page. To analyze local files you will need to go to your Extensions page and check \"Allow access to file URLs\" for this extension.

You can select to evaluate for either AA or AAA conformance, along with specifying the size of the text you want to analyze.

The output will show you a map of where the edges between colors are different enough to meet the specified contrast requirement. If there is an item on the underlying page that is not outlined in the output mask, then the item does not have enough color contrast according to the conformance level you selected. The resulting image analysis can be downloaded to your computer as a PNG file.

In order to better handle gradients, you can also select the pixel radius that should be used to analyze adjacent pixels. The larger the pixel radius, the further out it will look for a border with high enough contrast. However, a larger pixel radius will add significant computation time.

When first installing the extension, you may need to refresh the webpage you wish to analyze for all of the selection options to be available.

Also, when installing the extension it will ask you for permission to access your data on all of your websites and your tabs and browsing activity. We are not using or collecting this data in any way. In order to get permission to take screenshots of your browser window this is the level of access we must request. You can view the source code at the following URL.

https://github.com/gdkraus/color-contrast-chrome

This tool is a product of the IT Accessibility Office at NC State University.

http://accessibility.oit.ncsu.edu/
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "background": { "scripts": ["hotkey_storage.js","background.js"], "persistent": false }, "browser_action": { "default_icon": "images/icon_19.png", "default_popup": "popup.html", "default_title": "__MSG_default_title__" }, "content_scripts": [ { "css": [ "style.css" ], "js": [ "page.js", "shortcut.js"], "matches": [ "http://*/*", "https://*/*", "ftp://*/*", "file://*/*" ], "run_at": "document_end" }, { "js": [ "isLoad.js" ], "matches": [ "http://*/*", "https://*/*", "ftp://*/*", "file://*/*" ], "run_at": "document_start" } ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "default_locale": "en", "description": "__MSG_description__", "icons": { "128": "images/icon_128.png", "16": "images/icon_16.png", "19": "images/icon_19.png", "32": "images/icon_32.png", "48": "images/icon_48.png" }, "manifest_version": 2, "name": "__MSG_name__", "options_page": "options.html", "permissions": [ "tabs", "http://*/*", "https://*/*","", "storage" ], "version": "1.1.2", "short_name": "CC Analyzer", "web_accessible_resources": [ "page_context.js", "style.css" ]}
Read more

Similar Extensions

icon

Colour Contrast Checker Extension · Accessibility 70,000+ 31 ★ 378KiB

icon

WCAG Color contrast checker Extension · Developer Tools 70,000+ 26 ★ 163KiB

icon

WAVE Evaluation Tool Extension · Accessibility 70,000+ 143 ★ 344KiB

icon

Color Contrast Checker Extension · Accessibility 70,000+ 2 ★ 131KiB

icon

ColorA11y Extension · Accessibility 70,000+ 5 ★ 9.05KiB

icon

Screen Reader Extension · Developer Tools 70,000+ 1084 ★ 4.76MiB

icon

Visual ARIA Extension · Accessibility 70,000+ 4 ★ 314KiB

icon

axe DevTools - Web Accessibility Testing Extension · Accessibility 70,000+ 114 ★ 2.89MiB

icon

Siteimprove Accessibility Checker Extension · Accessibility 70,000+ 21 ★ 1.43MiB

icon

ARIA Validator Extension · Developer Tools 70,000+ 4 ★ 102KiB

icon

Funkify – Disability Simulator Extension · Accessibility 70,000+ 53 ★ 104MiB

icon

HeadingsMap Extension · Developer Tools 70,000+ 70 ★ 575KiB

icon

Color Contrast Checker Extension · Accessibility 70,000+ 10 ★ 2.85MiB

icon

ARC Toolkit Extension · Accessibility 70,000+ 24 ★ 645KiB

icon

Landmark Navigation via Keyboard or Pop-up Extension · Accessibility 70,000+ 9 ★ 67.37KiB

icon

taba11y Extension · Developer Tools 70,000+ 15 ★ 205KiB

icon

IBM Equal Access Accessibility Checker Extension · Developer Tools 70,000+ 16 ★ 29.19MiB

icon

Web Disability Simulator Extension · Accessibility 70,000+ 16 ★ 490KiB

icon

Access Assistant Extension · Accessibility 70,000+ 56 ★ 2.15MiB

icon

Siteimprove Browser Extension Extension · Developer Tools 70,000+ 2 ★ 35.77KiB

icon

Accessible Web Helper Extension · Accessibility 70,000+ 12 ★ 1.97MiB

icon

UX Check Extension · Productivity 70,000+ 84 ★ 1.32MiB

icon

Accessibility Insights for Web Extension · Developer Tools 70,000+ 37 ★ 3.62MiB

icon

EqualWeb Accessibility Checker Extension · Accessibility 70,000+ 21 ★ 19.11MiB

User reviews

icon

Sergio X (ID: 00000066516b06dc) Voted 4 ★ - Updated 10/10/2023 Quite useful, works for me, a bit slow though.

icon

Brad Chapman (ID: 0000009ca94f4f5b) Voted 2 ★ - Updated 12/08/2022 Sooo; what do I do? Help link broken.

icon

Tim Adkison (ID: 00000060b99bdc74) Voted 1 ★ - Updated 06/16/2022 causes console errors when enabled Unchecked runtime.lastError: The message port closed before a response was received.

icon

Jordi Vives Milià (ID: 000000be2d3a4873) Voted 4 ★ - Updated 05/26/2022 I was wondering if it wolud be possible to update it to WCAG 3.0, works amazing

icon

Thê-Minh TRINH (ID: 000000fc2e0e26d3) Voted 2 ★ - Updated 12/09/2021 Used to be a great and simple plugin. But looks like it doesn't work anymore :(