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

Artiom Dashinsky
Mar 10, 2015 · 4 min read
Image for post
Image for post
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

Image for post
Image for post

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.

Image for post
Image for post

You can do this easily just by going to .

You can add a hotkey to these features in 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? 😜

Image for post
Image for post

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 ☹

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post
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!


Image for post
Image for post

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 and already became an Amazon Best-Seller in the User Experience category.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store