Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm designing a chart right now, that will slowly have more items added to it. I'd like to create an list/order of colors for the items, that will be most usable for the color blind to differentiate between each item. Any ideas how/where to start?

share|improve this question

9 Answers 9

If you want to go with "trial and error" approach, I'd suggest a tool named Color Oracle (cross-platform) which simulates deuteranopia/deuteranomaly, protanopia/protanomaly and tritanopia -types of color blindness on your computer screen.

(Also Photoshop has color blindness proof setups available under ViewProof Setup (CS5 has, at least). But Photoshop might be a bit overkill, if you're about to design a chart.)

share|improve this answer
1  
+1 for photoshop proof i was trying it the other day. Its pretty awesome –  JamesHenare Feb 14 '11 at 22:43
    
The point being that testing is the right approach; choosing a "safe" palette is going to be needlessly restrictive. –  Charles Stewart Apr 11 '11 at 9:42

What kind of color blindness are you trying to address? This link

http://en.wikipedia.org/wiki/Color_blindness

should give you a good idea of the various colors to avoid based on the type of color blindness.

In general, making anything dependent on choosing between blues and greens can get dicey; you might want to see how your stuff looks as purely monochromatic.

Since there's a range of "color blindness" you probably also want to always be sure that controls, etc. have redundancy (e.g., the big red button should also be labeled "Self-Destruct button" in a nice contrasting color (black on red or white on red).

share|improve this answer
    
+1 for "Self-Destruct button." :) –  Lauren Ipsum Feb 14 '11 at 17:18
    
good call for redundancy –  JamesHenare Feb 14 '11 at 22:44
    
@Lauren: Well, you can't be too careful when designing UIs for your evil lair... –  lawndartcatcher Feb 15 '11 at 13:10
    
yep, and make sure you hire a five-year-old to test your grand plans. :) –  Lauren Ipsum Feb 15 '11 at 14:52

There are many kinds of color blindness. The key is to make sure there's adequate contrast. Even better, don't rely on color alone - have the same information always covered in shape, contrast or order of the items. If your image is easy to understand in black and white, it passes.

share|improve this answer

The most common kind of color blindness is red-green color blindness (which may be a defect in detecting red or in detecting green, but rarely both). So avoid relying upon distinctions in the red-green part of the spectrum. (Light green and light orange will tend to appear the same to such people, for example.)

If you want to be especially cautious, you can place your colors on a blue-yellow axis (very deep blue; aqua; white; chartreuse; brown); all the red-green problems still render the individual able to tell that blue is different; yellow has the advantage of activating both green and red cones, so if there's a problem with either one, it's still plenty visible. Alternatively, any stretch where the brightness increases (e.g. red->yellow->white) is visible to most people. Don't assume that red is different than black, however.

share|improve this answer

There are some tools for firefox out there Example

Afaik, there's also a certificate that has some guidelines. I looked into my papers but haven't found it so far. Google will surely tell something about the different available certificates for your country.

share|improve this answer

If you aren't in Photoshop or you're in an earlier version that doesn't have the color-blind proof view mentioned above, you can check your design's brightness contrast by converting to grayscale. Or, if it's an earlier version of PS, you can use either a hue and saturation layer with the saturation turned all the way down, or a gradient map using black to white as the gradient. Put that layer as the top layer in your document, then whenever you want to check the contrast, turn it on. I prefer the gradient map because it is more accurate in terms of what colors contrast against each other in terms of brightness (red shows as a little lighter than it is if you just desaturate), but either can show you problem areas in the design. So long as your page looks fine in that view, it should be ok to a color-blind user.

share|improve this answer

I'm color blind. "We" like graphics being discriminated using color just as much as "you" - it's just there are fewer colors in our world than yours. Here's a pragmatic suggestion in the spirit of the 80/20 rule.

If your first type of color sensors (proto) don't work your vision is proto-anopic. If they just misbehave a bit you're proto-anomolous. Repeat for the other two types of color sensor and substitute 'deuter' or 'trito' for 'proto'. (I think these are Greek for 1,2,3).

The pragmatic opportunity arises from the fact that deuteranomaly is very much more prevalent than the other types; 5% of all males. The others score less than 1% in males, and even less in females. So a simple solution for us deuteranomalists goes a long way - I personally don't want to have to configure colors myself just to be able to see a difference in the lines on a graph. (Which happens ALL the time).

I've included below a small set of colors that I can see the difference between effortlessly. I've tried unsuccessfully to put more in - so that gives you an idea of how small the palette needs to be.

Nb. Don't forget it's no use referring to these colors by name in the user experience you create. For us Deuts - it seems as if "you" have invented a great many needlessly duplicated names for pretty much the same colours :-)

rgb(255, 204, 153)

rgb(204, 204, 255)

rgb(255, 102, 102)

rgb(139, 230, 2)

red

yellow

rgb(51, 51, 255)

rgb(153, 153, 153)

rgb(153, 0, 0)

rgb(51, 51, 51)

rgb(0, 0, 102)

rgb(120, 102, 75)

share|improve this answer
1  
The html fragment I copied in to show the colors hasn't showed up properly - so let me try again: –  pete howard May 21 '12 at 20:40

enter image description here

Figure 1: Ishihara colorblindedness test.

I just answered a similar question, at some length:

What's a good source of color palettes to provide to a color-blind user?

The basic upshot is: the specific color-blind experience of your userbase (as there is considerable variance) is worth investigating; your palette will likely evolve from what you might see through colorblind eyes.

Pic related:

Color-blind vs trichromatic

share|improve this answer
    
But it seems odd that given how common some forms of colour-blindness are there are not websites that just list convenient palettes. It feels like reinventing the wheel each time. –  dumbledad Feb 26 '13 at 13:53

I know I already answered this q -- but I just found this:

http://disturbmedia.com/max/colour-blindness.html

... which is a color-blindness simulator that seems particularly well-suited for yr task. I looked at it and I felt so bad for the colorblind that I was compelled to think of palettes that'd work for them too, out of compassion. Really -- I am not entirely joking; have a look.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.