Mar 10, 2015
How to design (in Sketch, Photoshop and Web) for color blind users
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
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!
Prepare for your next UX job interview
I wrote a book to help you prepare for UX job interviews and practice product design skills.
It’s called Solving Product Design Exercises: Questions & Answers and already became an Amazon Best-Seller in the User Experience category.
