Tutorial: Using Illustrator or Photoshop to Check Your Design for Colour-Blind Accessibility

Leave a comment
Filed Under:
Tutorials

Here’s a simple little trick that works in Adobe Illustrator and Photoshop CS4 and above: You can quickly check your artwork to see how it might appear for a colour-blind user by simply going to the View menu > Proof Setup, then choosing one of the two colour-blind profiles at the bottom of the list. Then select View > Proof Colors (Cmd/Ctrl-Y in Photoshop).

As you can see from the GIF above, the results can be quite startling: everything becomes varying shades of blue and an ugly, muddy yellow. It definitely shows why identification of different routes (either by naming them directly on the map, or by using a clear legend) is so important. Another thing to bear in mind is the contrast between parallel route lines: more contrast means that they are easier to trace from end to end with a minimum of confusion, regardless of the user’s vision.

I definitely recommend adding this simple test to your workflow: it may not be completely accurate for every variation of colour-blindness, but it will give you a quick overview so that your design can be better informed.

See also this post from November 2011, where I compared the colour-blindness accessibility of different transit maps.

Edit: An earlier version of this post only mentioned proofing in Photoshop, neglecting the fact you can do the exact same thing in Illustrator. Thanks to Oran Viriyincy and Xavier Fung for reminding me about this.

Leave a Comment