How to design (in Sketch, Photoshop and Web) for color blind users

This is how people with Protanopia see this picture of Golden Gate

You already should know that designing with color blind users in mind is important, so in this article I’ll only talk about how to see designs you’re working on as a color blind.

Photoshop

Seems like some designers are not aware of the Photoshop built-in feature that allows you to preview the design as one of the two most-common groups of color blinds.

You can do this easily just by going to View -> Proof Setup -> Color Blindness Protanopia /Deuteranopia type.

You can add a hotkey to these features in Edit -> Keyboard Shortcuts to make it more comfortable.

Another way to simulate a color-blind vision is Colour Blindness Testing actions by Bjango (looks for “Bjango Actions”).

Sketch

But between us — who uses Photoshop anymore? 😜

tl;dr — use Color Oracle, there is no native solution or any plugin. Another option — Sim Daltonism.

Sketch doesn’t have a built-in color blind simulator, so me and Max started to create a plugin for Sketch that will do this.

We found a Javascript library that does exactly what we need but turned out that it couldn’t be integrated with Sketch.

Basically every software color blind test is a manipulation with the colors of the image. Sketch doesn’t allow to make the kind of manipulation that we needed to reproduce with our plugin.

The color manupulation could be gained also by adding solid-color layers above the image with a different blending options. So we can affect the color of the image without making any changes with the content of the image itself. I managed to gain the same effect as color blindness tests by adding a set of different color-layers in Photoshop. Unfortunately the blending option that allowed me to gain the right effect is “Subtract” and it doesn’t exist in Sketch.

So we were stuck again and couldn’t find a better solution for our plugin ☹

But the good news is that during our research we found Color Oracle. This tool allows you to simulate color blind vision independently of the app that you’re currently working with. The app changes the colors of everything you see on the screen according to the kind of color-blindness you choose.

So Color Oracle looks like the not perfect but the best soltion so far for making accessible designs in Sketch.

Web

Designer News with Deuteranomaly

For the web there is a nice bookmarklet by Jason Frame that includes 8 kinds of color blindness that you can instantly preview on any web page.

Good luck and let me know if you know about better tools for making accessible designs!

Show your support

Clapping shows how much you appreciated Artiom Dashinsky’s story.