Making your images colorblind-friendly just got a little easier.

Approximately 1 in 12 men and 1 in 200 women of the world are colorblind. While the advice of using a magenta/green color scheme as opposed to the red/green color scheme in scientific images is beginning to be widely distributed, I’ve recently been introduced to a tool that goes much farther to help us become better visual science communicators.

Vischeck is a website developed by two researchers at Stanford University that simulates how an image is viewed by individuals with three forms of colorblindness: Deuteranope, Protanope, and Tritanope vision. You can upload a jpg or png of your scientific image and see how it appears to individuals with these forms of vision. How cool is that?

To test it out, let’s see what happens with this image of Cho cells that I’ve immunostained and labeled with red, green, and blue channels in Fiji.

Screen Shot 2017-09-27 at 3.33.49 PM

In original image on the left you can clearly differentiate between the red and green channels, but on the right you can see how the distinction between these colors is completely removed. How wonderful that we can test our images in this way!

Just for kicks, I also inputted the Vizsi logo and the result is quite beautiful…

Screen Shot 2017-09-27 at 3.24.50 PM

Now the site does have a disclaimer and points out that their simulation isn’t perfect as display devices can show image color differently, however this is the best tool I’ve seen for testing this problem. And if nothing else, it illustrates how simple changes such as alterations in color value (the lightness/darkness of a color) can help everyone distinguish between the different colors in your images. Try it out!

A few other tools include WebAim’s color contrast checker in which you can input two color combinations and see if they have an appropriate contrast ratio for web viewing (4:5:1 or higher), and the I want to see like the colour blind extension available in Chrome. And lastly here are a few more tips for designers on color accessibility from Smashing Magazine, many of which can apply to scientific image design as well.

Links:
Vischeck: http://www.vischeck.com/
WebAim color checker: https://webaim.org/resources/contrastchecker/
Chrome extension: https://chrome.google.com/webstore/detail/i-want-to-see-like-the-co/jebeedfnielkcjlcokhiobodkjjpbjia?hl=en-GB
Smashing magazine tips: https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s