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

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

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.

Get it here.

Design + Sketch

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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