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.
It is displaying this error in console:
Color Contrast Analyzer – Unchecked runtime.lastError: The message port closed before a response was received.
This is causing the annoying error on the console: Unchecked runtime.lastError: The message port closed before a response was received.
Please fix it.
Doesn’t work, hangs up
Never updated and kills mac!
Made my mac crash twice after testing it on a website once it reaches 97% …
I used it a year ago it was fine but idk what happenned this time. wont recommend. Wont use it again.
Very useful in concept – However, it’s nearly impossible to use on a Retina display, resizing and offsetting the selected page regions.
Please tell me, why does this plugin require to read my browser history? It should work fine without, right? I like that you made it open source, but i cant be sure, that the github version is the version you offer in the playstore. If you give me an answer I will happily change my review. Thanks!
It was very useful, but now it doesn’t work anymore on offline pages (I don’t know why and I wasn’t able to find any bug repor page to contact developers). It looks like an abandoned project
This is exactly the tool I needed for detecting text-over-background-image contrast levels. I just capture the part of the page I need and let it do its thing. The ability to select which WCAG level it’s measuring for is extremely helpful.
Great! Thanks.
Hi,
I am interested in acquiring your extension “Color Contrast Analyzer”.
Please contact me at: [email protected]
Sadly, broke PDF rendering after a Chrome update.
Good idea, kudos for advancing the toolkit of web accessibility, but it crashed my ability to open PDFs in Chrome. Instead of showing the PDF, Chrome would display a blank screen. As soon as I disabled this extension, I was able to view PDFs again.
Didn’t work for me. Tries to scan e tire page, then reports it’s special and it cannot scan it.
Color Contrast Analyzer helps me to spot items which need some more attention. It is not fool-proof but it is a relevant addition to other accessibility tools and to common sense.
lovely
I couldn’t work out how to use this for the life of me. So much for an accessibility tool!
When you got nothing, anything is an improvement
On a retina display captures only a quarter of the page
When its working it is indispensable, however it has some bugs that make it annoying to use – tends to capture extremely zoomed in areas of the page regardless of the settings I use. Also sometimes does not apply the mask after processing the page, rendering the tool useless. Please fix these problems because otherwise this is an extremely helpful tool!
When it works, it’s great. But recently every time I launch the tool I’m logged out of my computer. LOGGED OUT OF MY COMPUTER. How the hell does this extension even have access to that level of functionality?
It helped me for my thesis, thanks very much 😀
Makes it easy to spot places in your page where the color contrast needs increased. However, there presently is a bug where you can only re-analyze on one browser tab at a time.
Thank you very much for creating this tool. Color Contrast Analyzer for Chrome fills a great void. It is terrific for checking if text over a background image is WCAG compliant.