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?
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
What kind of color blindness are you trying to address? This link
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).
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.
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)
rgb(51, 51, 255)
rgb(153, 153, 153)
rgb(153, 0, 0)
rgb(51, 51, 51)
rgb(0, 0, 102)
rgb(120, 102, 75)
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.
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.
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.
Figure 1: Ishihara colorblindedness test.
I just answered a similar question, at some length:
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.
I'm resurrecting this because it's hard to find concrete examples or How-To's.
You can use simulators to help accomplish this goal, keeping in mind that targeting Deuteranopia covers the majority, and supporting Protanopia as well covers nearly everyone else. (I believe the remainder is less than 0.01% of the population.)
Adobe products like Illustrator have very helpful simulators (open a new Window and choose View > Proof Setup > Color Blindness...) that can instantly show you a live side-by-side rendition as you tweak your colors. And there are free standalone tools as well, like Colour Contrast Analyzer.
The following is a just a sample screenshot from Illustrator showing a six-color palette (where the sixth color is either Red or Magenta, not both) and both simulations. The bottom-left one is the most critical one, statistically.
Note that in this case purple has become only marginally useful (quite faded, and even so still has low contrast with blue and/or magenta). Also, the "safest" option (full-on Magenta replacing Red) can be rather loud. For most people with CVD, tweaking the saturation/brightness of red and green can provide recognizable contrast.
(Please check with me before re-using this palette / image in its entirety.)
I'd highly recommend using the HSL color space. HSB (a.k.a HSV) is pretty friendly too, especially compared to RGB or CMYK. (FYI, only the H hue values will be identical in the two systems.) Here, each column uses a single hue number. You can always extract the RGB codes later, either from Adobe or using the excellent tools at colorizer.org. Hex RGB codes are, sadly, the most concise and directly usable by programmers etc., although if you're working in CSS, it directly supports HSL (yay).
Blue's saturation here is deliberately low to (a) be a gentler link/button color and (b) to contrast more with these well-saturated magentas and purples. Within a column, the main variation is brightness, but you can get away with some saturation variation too.
I know I already answered this q -- but I just found this:
... 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.