by infinite_resolution

Created

April 1, 2009

New Tools for Color – Making your designs accessible to all

Contributed by Brenda Sutherland, Illustrator Team Rowing Captain
It’s so easy to take color for granted. Sure, we all have our favorites, and who among us doesn’t spend a ridiculous amount of time choosing the perfect color when the choice is in our hands.

When I was in London last year I had no problem finding my way around thanks to my handy underground and bus maps. All routes beautifully color-coded. Even the paper money in Britian uses multiple colors to help distinguish denominations. Back home, reading the paper, I notice how many info graphics, especially maps, use color to convey everything from falling home prices to earthquake hazard zones. And think about when you go to the grocery store. If you’re like me, you don’t even read the package. I know the brand I like has a yellow box, I know the variety I like has a green stripe, done!

And that’s why I say it’s easy to take color for granted, at least it is when you have full color vision. But did you know that 200 million people globally are colorblind? The numbers are interesting when it comes to gender; about 1 in 12 men and 1 in 200 women are estimated to have some type of color vision impairment. As a designer, think about what this means. If your design is dependent on color for either conveying information or pure visual impact, wouldn’t you like to be sure that your design accomplished these goals for everyone? How do you do that?

Thanks to a few new features in CS4, it’s easier than you think. We’ve implemented a couple new view modes that preview your art in the same way that a colorblind individual would see it. When used in combination with the new 2-up layout option, I can adjust colors in my regular color view while at the same time, seeing how the changes impact the color blindness view.


Let me step you through this. It’s a quick, simple process. With your document opened, choose Window>New Window to open up a second window (an additional view of the same open document). With the new tabbing behavior in CS4, the windows will be tabbed together. Now open up the “Arrange Documents” panel and click on the 2-up button to view your windows side by side.Cudo_1.jpgChange one window to the Color Blindness view by selecting View>Proof Colors>Color Blindness. You’ll notice there are two types. Just pick either one, as you can verify your results with the other later. Leave the other window with normal view.Cudo_2.jpgThe new Color Blindness views help you to quickly identify any problems, such as colors that blend together or can’t be told apart. In this document, a color-coded layout of a museum, you can see how the orange, brown and green colors look like the same shade of olive in the Color Blindness preview mode.Cudo_3.jpgYou might think that there’s not much you can do to make color-coding effective for the colorblind, especially when you are trying to preserve a specific color scheme, but I think you’ll be surprised at how much of an impact a little change can make in the contrast of the colors for someone with impaired color vision.I’ll show you by editing the colors now. Live Color makes it soooo easy. In the regular color mode I select all my objects that I wish to recolor. This includes the layout and the blocks of color in the legend. I bring up the Live Color dialog by clicking on the Recolor Artwork button in the control panel. Since this is a web page, I’m going to work in HSB mode. I’ll start with the orange color and darken it slightly with the Brightness slider.Cudo_4.jpgThen I do the same thing with the Brown. This time, lightening it instead. When I’m satisfied with the results I click ok to dismiss the dialog.Cudo_5.jpgNow I have a design with enough contrast to be just as useful to someone with impaired color vision as it is those who have full color vision! And I did it without significantly changing my color scheme. Best of all, it was quick and simple.So try out the new Color Blindness Preview modes in CS4, and have confidence that your designs are strong and powerful for everyone viewing them!

Comments

  • By Jack - 10:03 AM on April 1, 2009  

    This is such a great piece of functionality. Is there anyway to download those color profiles for CS3? Hi Jack, I’m glad you like it. I think it’s a wonderful new tool for designers, but it is strictly a new feature in CS4. The good news is it’s not just in Illustrator, you can find the new Color Blindness preview modes in Photoshop CS4 as well!-=Brenda

  • By Lacresha Lois - 11:23 AM on August 28, 2010  

    Cool article, thanks. Could you clarify the second section in a little more detail please?

  • By Venita Marrazzo - 1:09 AM on December 19, 2010  

    some genuinely interesting information, well written and broadly speaking user friendly .

  • By gay dating - 4:44 PM on December 19, 2010  

    Great! a few months ago I had visited this blog, but I forget which article I read on this blog, I never thought in a single month this blog had more visitors than ever before. Good work friend, continue your blogging activities. greetings prosperous fellow bloggers.

Back to top