Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.
Color Contrast Analyzer Extension
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/
Source Manifest.json
How to download and manually install Color Contrast Analyzer extension for Chrome
Looking for a way to install Color Contrast Analyzer extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.
However, you may need to install Color Contrast Analyzer extensions manually, this article outlines two simple methods to effortlessly install Color Contrast Analyzer extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.
Method 1: Download Color Contrast Analyzer extension and manually install through Drag &Drop
If you ever need to manually install a Color Contrast Analyzer extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.
Step 1: Download the Color Contrast Analyzer Extension by clicking the "Download CRX" button on the website.
Look for the Color Contrast Analyzer extension you wish to install. Go to the website and download the Color Contrast Analyzer extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Color Contrast Analyzer extension that contains all the data.
Step 2: Extract &Arrange Files
Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.
Step 3: Go to the Chrome Extensions Page
Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.
Step 4: Drag and Drop the Extension
Now, go to the folder where you extracted the Color Contrast Analyzer extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.
Step 5: Complete the Installation
Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.
Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.
Method 2: Download Color Contrast Analyzer extension for Chrome and install in Developer Mode
This is another method to install Color Contrast Analyzer extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.
Step 1: Download the Color Contrast Analyzer extension file
Select and download the Color Contrast Analyzer extension by clicking the 'Download CRX' button on the website.
Step 2: Extract the downloaded contents
Convert the file to a ZIP file if it is in CRX format then extract the Color Contrast Analyzer extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Color Contrast Analyzer extension running.
Step 3: Open Chrome Extension Setting Page
In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.
Step 4: Enable Developer Mode
After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.
Step 5: Load the Unpacked Extension
Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."
Step 6: Select the Extension Folder
Once the pop-up opens upon clicking Load unpacked, select the Color Contrast Analyzer extension directory and click on the "Select Folder "button.
Step 7: Confirm and Install
After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.
Conclusion
Here we've made a step-by-step guide on How to manually install Color Contrast Analyzer extension in 2 ways. We hope this guide proves helpful.
Similar Extensions
Colour Contrast Checker 70,000+ 31 ★ 378KiB
WCAG Color contrast checker 70,000+ 26 ★ 163KiB
WAVE Evaluation Tool 70,000+ 143 ★ 344KiB
Color Contrast Checker 70,000+ 2 ★ 131KiB
ColorA11y 70,000+ 5 ★ 9.05KiB
Screen Reader 70,000+ 1084 ★ 4.76MiB
Visual ARIA 70,000+ 4 ★ 314KiB
axe DevTools - Web Accessibility Testing 70,000+ 114 ★ 2.89MiB
Siteimprove Accessibility Checker 70,000+ 21 ★ 1.43MiB
ARIA Validator 70,000+ 4 ★ 102KiB
Funkify – Disability Simulator 70,000+ 53 ★ 104MiB
HeadingsMap 70,000+ 70 ★ 575KiB
Color Contrast Checker 70,000+ 10 ★ 2.85MiB
ARC Toolkit 70,000+ 24 ★ 645KiB
Landmark Navigation via Keyboard or Pop-up 70,000+ 9 ★ 67.37KiB
taba11y 70,000+ 15 ★ 205KiB
IBM Equal Access Accessibility Checker 70,000+ 16 ★ 29.19MiB
Web Disability Simulator 70,000+ 16 ★ 490KiB
Access Assistant 70,000+ 56 ★ 2.15MiB
Siteimprove Browser Extension 70,000+ 2 ★ 35.77KiB
Accessible Web Helper 70,000+ 12 ★ 1.97MiB
UX Check 70,000+ 84 ★ 1.32MiB
Accessibility Insights for Web 70,000+ 37 ★ 3.62MiB
EqualWeb Accessibility Checker 70,000+ 21 ★ 19.11MiB
User reviews
Sergio X (ID: 00000066516b06dc) Voted 4 ★ - Updated 10/10/2023
Brad Chapman (ID: 0000009ca94f4f5b) Voted 2 ★ - Updated 12/08/2022
Tim Adkison (ID: 00000060b99bdc74) Voted 1 ★ - Updated 06/16/2022
Jordi Vives Milià (ID: 000000be2d3a4873) Voted 4 ★ - Updated 05/26/2022
Thê-Minh TRINH (ID: 000000fc2e0e26d3) Voted 2 ★ - Updated 12/09/2021