Color Charts is a Chrome extension that aims to increase the readability of charts, graphs, and diagrams on the web. Visuals that depend on colors to convey information may be hard to read for people with color blindness. Color Charts improves upon existing extensions by using researched color blind friendly palettes. It allows for filtering of visuals on a web page, with the option to choose between 4 different color blind friendly palettes. Built with vanilla JavaScript, Color Charts interacts with HTML <img> elements in the Chrome browser, utilizing HTML canvas and base64 encoding to filter the images.
This extension was designed for the Spring 2020 Princeton CS Independent Work Seminar: Random Apps of Kindness -- Accessibility Technologies and User Interfaces.
Read the final paper here. View the final presentation slides here.
To use:
- Clone this repo.
- Head over to Chrome Extensions (usually
chrome://extensionsin the address bar) and turn "Developer Mode" on the top left. - Click "Load unpack" and select the destination as the cloned repository folder
- The Color Charts icon should now appear to the left of the address bar. Click on the icon to trigger the popup and utilize the extension as described in this section.
Disclaimer: Color Charts only applies to HTML <img> elements. It does not work in PDFs, or on SVGs. It also only applies to images on the same domain as the page it appears on. It is not compatible with cross-origin images (images whose source is from another domain). To see the full extent of the extension, test Color Charts on this page.