arbolitoloco / color-blind-simulator

Need a quick way to make sure your design/diagram/figure is color blind-friendly? Use this simulator to check out if your colors will retain the same effect for different kinds of vision. Conveniently download transformed gallery for future reference.

Color Blindness Simulator

A quick way to visualize an image using different color blindness simulation filters. Upload your file and check the updated gallery. Download the resulting gallery at once for analysis.

Background

I created this app, because I was designing a complex diagram for a scientific publication that used several symbols and different colors that had meaning associated with them.

My goal was to make a diagram that would be as accessible as possible, and that included testing for different types of color blindness, so that my designs could be adjusted to enable users with color deficiency to perceive color nuance and infer their context.

However, finding an easy tool to automatically test images for different kinds of color blindness at the same time was nearly impossible. Hence the creation of this tool: the Color Blindness Simulator.

How to use

Web app

If you'd like to try it out, head over to the working app at https://laura.rochaprado.com/color-blind-simulator/. The app is responsive, so it works on mobile too (and you could even take a photo with it).

There are only 2-3 steps:

1. Upload the desired image for testing (accepts any file with an image/\* MIME type; tested with png, jpg, gif, svg, ico)
2. Wait shortly until main gallery is updated with resulting simulations
3. Download resulting gallery if you are so inclined

Install to use locally

If you'd like to have the app to use it offline, head over to the releases page and download the latest bundle. Simply extract the contents of the package into a folder, and double click the index.html file to open it in any browser.

Examples

Privacy and data

All image manipulations (and upload) happen on the client-side only, meaning no data is collected at all. There is a Google Analytics snippet to track visitors and usage, so browsing isn't entirely anonymous.

Contributing

Thanks for your interest in contributing to improve this app! For more detail, please check our Contributing doc.

Acknowledgements

This app modifies functions for canvas redrawing found in cyan33's image-screenshot, as well as html2canvas 1.0.0-rc.5 to facilitate image downloads.

color-blind-simulator's Issues

Restyle "download button" to make it more user-friendly

Currently, the button is flat and awkward. Ideally should be restyled to make it easier for users to understand that it is a button.

Create dynamic contributors section

Dynamically pull list of this repo's contributors through Github's API and display their information (avatar, profile url, username) in a gallery to be included in the index.html and in the README.md.

Create a "More Information" page with useful resources

A new HTML file would have to be created to add information on different kinds of color vision defficiency and useful links.

Ideally, this new file would be linked to somewhere in the index.html.

Redesign header to maybe include logo and links

The header in index.html is quite simple. I have created a tentative logo (file here), that ideally would be incorporated in the header somehow.

Ideally I'd also like to have links in the header for:

• More Information page
• Repository on Github

Translate into additional languages

Anyone interested in translating this app should create an HTML file following this naming convention:

index-XX.html

Where XX stands for the target idiom's two-letter code (according to the List of ISO 639-1 codes).

Switch to a more accurate color vision deficiency simulation model

Hi! Recently I've been reviewing the CVD simulation models used in opensource software, and it turns out that the ColorMatrix values from colorjack.com are very inaccurate (I saw that these are the values used in color-blind-simulator).

I wrote a detailed article about that, but in short this is what the author later said about these matrices (links from MaPePeR, the code used by Coblis):

You're right, the ColorMatrix version is very simplified, and not accurate. I created that color matrix one night (http://www.colorjack.com/labs/colormatrix/) and since then it's shown up many places... I should probably take that page down before it spreads more! Anyways, it gives you an idea of what it might look like, but for the real thing...

So I've started a kind of crusade to help stop the spread :)

The good news is that there are pretty good alternatives that also just use a single 3x3 matrix and thus can be implemented with SVG filters. I've actually created a PR in another project that uses SVG filters Colorblindly that does just that. It updates the matrices to use the proven model of Viénot, Brettel & Mollon Digital video colourmaps for checking the legibility of displays by dichromats. And also importantly it adds a color-interpolation-filters="linearRGB" attribute to the filter so that the matrices get applied in the linearRGB space and not sRGB.

Hope this can help!