Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.
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/
Latest reviews
- (2023-10-10) Sergio X: Quite useful, works for me, a bit slow though.
- (2022-12-08) Brad Chapman: Sooo; what do I do? Help link broken.
- (2022-06-16) Tim Adkison: causes console errors when enabled Unchecked runtime.lastError: The message port closed before a response was received.
- (2022-05-26) Jordi Vives Milià : I was wondering if it wolud be possible to update it to WCAG 3.0, works amazing
- (2021-12-09) Thê-Minh TRINH: Used to be a great and simple plugin. But looks like it doesn't work anymore :(
- (2021-07-22) Celine Vendela: It works alright for scanning parts of a website, however scanning a whole page makes it crash, forcing me not only to restart it, but also to reinstall it several times. It is a good idea, and if these bugs are fixed it is well worth a 5-star review, but not until then.
- (2021-07-16) Phillip Havea: Tried to run it and crashed each time
- (2021-07-08) Ricardo Ibarra: It worked when I originally downloaded it, now it doesn't do anything.
- (2021-05-22) wyatt saunderson: the topic of degree was pointless
- (2021-04-29) Hrvoje: Great idea! ItsS so much helpful!!
- (2021-04-08) Sp _: It's now 2021 and this checker severely needs an update. Standards have changed as well as the design of websites.
- (2020-12-23) Srinivas Kadiyala: It is displaying this error in console: Color Contrast Analyzer - Unchecked runtime.lastError: The message port closed before a response was received.
- (2020-11-23) Gustavo Siqueira: This is causing the annoying error on the console: Unchecked runtime.lastError: The message port closed before a response was received. Please fix it.
- (2020-10-23) Eric Mason: Doesn't work, hangs up
- (2020-07-28) Rahim Haji: Never updated and kills mac!
- (2020-03-13) Mia: 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.
- (2020-02-21) Billy Jackson: Very useful in concept - However, it's nearly impossible to use on a Retina display, resizing and offsetting the selected page regions.
- (2019-10-01) Celina Peterson: I've used this extension for years but after the last few Chrome updates it is completely unusable and crashes Chrome. I would love to see this fixed - it's the best for checking color contrast of text on background images.
- (2019-05-23) Linus: 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!
- (2019-02-27) Giancarlo Perlo: 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
- (2018-09-10) Not a clear UI, can't use if for contrast analysis... All it seems to do is make the screen black and white and highlight text. Bizarre.
- (2018-08-23) Darbie Boswell: 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.
- (2017-05-03) Lisandra Armas Aguila: Great! Thanks.
- (2016-11-22) Irina Svetlowa: Hi, I am interested in acquiring your extension "Color Contrast Analyzer". Please contact me at: [email protected]
- (2016-08-30) Chris Smith: Sadly, broke PDF rendering after a Chrome update.
- (2016-08-01) Laura Hamrick: 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.
- (2016-07-25) stuart cairns: Didn't work for me. Tries to scan e tire page, then reports it's special and it cannot scan it.
- (2016-06-03) Jan Krebber: 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.
- (2016-04-16) Raperie Meg: lovely
- (2016-01-07) Helen West: I couldn't work out how to use this for the life of me. So much for an accessibility tool!
- (2015-06-24) Dixie Deloach: When you got nothing, anything is an improvement
- (2015-05-08) Alessandro Rodi: On a retina display captures only a quarter of the page
- (2015-02-10) Jennifer Scroggins: 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!
- (2014-11-10) Erik Dreyer: 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?
- (2014-05-03) Resthi: It helped me for my thesis, thanks very much :D
- (2014-05-01) Denny Caldwell: 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.
- (2014-03-14) Laura Carlson: 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.
- (2013-12-11) Ken Petri: This is a great tool. I use it frequently for illustrating to designers where their pages need improved contrast. This and the (also free) Paciello Group Color Contrast Analyser go well together. Paciello Group Contrast Analyser allows you to see how far off WCAG recommendation you are and this extension gives you a great whole page or page region visualization.
- (2013-11-04) S De Silva: Simple, Functional, Excellent. Would be perfect if it could quantify a pass/fail mark for each of the page elements. Thanks for taking the time to publish this. Victorian Electoral Commission (AUS) - Electronic Voting.