Color Contrast Analyzer
Extension Actions
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.
Latest reviews
- Mauricio Perez
- Great plugin but needs development as it is no longer supported by Chrome. Happy to provide UI / UX if any developers wish to take this up in Github.
- Sriram
- "Allow access tomb-echo is flat,cupboard 1
- Chris Kostelec
- Wanted to add a newer review since it seems it wasn't working properly in the past. Right now it's working great on the latest Chrome/Chromium. Super useful to quickly check contrast on a page where normal contast analyzers may not be sufficient.
- György Raffay
- Page region: on a wide monitor only the top of the page is selectable. I cannot drag the rectanlge to the botton of the page.
- Sergio X
- Quite useful, works for me, a bit slow though.
- Brad Chapman
- Sooo; what do I do? Help link broken.
- Brad Chapman
- Sooo; what do I do? Help link broken.
- Tim Adkison
- causes console errors when enabled Unchecked runtime.lastError: The message port closed before a response was received.
- Tim Adkison
- causes console errors when enabled Unchecked runtime.lastError: The message port closed before a response was received.
- Jordi Vives Milià
- I was wondering if it wolud be possible to update it to WCAG 3.0, works amazing
- Thê-Minh TRINH
- Used to be a great and simple plugin. But looks like it doesn't work anymore :(
- Thê-Minh TRINH
- Used to be a great and simple plugin. But looks like it doesn't work anymore :(
- 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.
- 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.
- Phillip Havea
- Tried to run it and crashed each time
- Phillip Havea
- Tried to run it and crashed each time
- Ricardo Ibarra
- It worked when I originally downloaded it, now it doesn't do anything.
- Ricardo Ibarra
- It worked when I originally downloaded it, now it doesn't do anything.
- wyatt saunderson
- the topic of degree was pointless
- wyatt saunderson
- the topic of degree was pointless
- Hrvoje
- Great idea! ItsS so much helpful!!
- Hrvoje
- Great idea! ItsS so much helpful!!
- Sp _
- It's now 2021 and this checker severely needs an update. Standards have changed as well as the design of websites.
- Sp _
- It's now 2021 and this checker severely needs an update. Standards have changed as well as the design of websites.
- Srinivas Kadiyala
- It is displaying this error in console: Color Contrast Analyzer - Unchecked runtime.lastError: The message port closed before a response was received.
- Srinivas Kadiyala
- It is displaying this error in console: Color Contrast Analyzer - Unchecked runtime.lastError: The message port closed before a response was received.
- 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.
- 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.
- Eric Mason
- Doesn't work, hangs up
- Eric Mason
- Doesn't work, hangs up
- Rahim Haji
- Never updated and kills mac!
- Rahim Haji
- Never updated and kills mac!
- 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.
- Billy Jackson
- Very useful in concept - However, it's nearly impossible to use on a Retina display, resizing and offsetting the selected page regions.
- Billy Jackson
- Very useful in concept - However, it's nearly impossible to use on a Retina display, resizing and offsetting the selected page regions.
- 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.
- 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!
- 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!
- 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
- 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
- Anonymous
- 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.
- 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.
- 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.
- Lisandra Armas Aguila
- Great! Thanks.
- Lisandra Armas Aguila
- Great! Thanks.
- Irina Svetlowa
- Hi, I am interested in acquiring your extension "Color Contrast Analyzer". Please contact me at: [email protected]
- Irina Svetlowa
- Hi, I am interested in acquiring your extension "Color Contrast Analyzer". Please contact me at: [email protected]
- Chris Smith
- Sadly, broke PDF rendering after a Chrome update.
- Chris Smith
- Sadly, broke PDF rendering after a Chrome update.
- 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.