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?
10 Answers
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 View → Proof Setup (CS5 has, at least). But Photoshop might be a bit overkill, if you're about to design a chart.)
answered Feb 14, 2011 at 16:46
-
1+1 for photoshop proof i was trying it the other day. Its pretty awesome– HemiFeb 14, 2011 at 22:43
-
The point being that testing is the right approach; choosing a "safe" palette is going to be needlessly restrictive. Apr 11, 2011 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).
-
-
1@Lauren: Well, you can't be too careful when designing UIs for your evil lair... Feb 15, 2011 at 13:10
-
yep, and make sure you hire a five-year-old to test your grand plans. :) Feb 15, 2011 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.
-
While technically there are many kinds, the large majority have deuteranopia or the milder deuteranomaly. Nearly all the rest have protanopia or protanomaly. All of the above are a loss of red-green. All remaining types together (blue-yellow or monochrome) are less than 0.01% of the population, as I understand it. So, I mainly target normal vision and deuteranopia (using the Adobe simulation) and then tweak a bit using the protanopia simulation. Feb 17, 2016 at 19:39
-
If you replace red entirely with an otherwise-unused color (usually magenta, or orange), that helps. Android has done a lot of that. (Or, you could replace green.) Swapping out colored icons isn't easy, though, if you use red (or green) in just some of your icons. (For us, our legacy icons can't all be monochrome.) If you have the luxury of swappable palettes then you could optimize separately for deut. and prot., and even add a third option for tritanopia/tritanomaly. If you have swappable, having a high-contrast mode (light text on dark bg) is a lot of substitutions but even more useful. Feb 17, 2016 at 19:50
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)
-
1The html fragment I copied in to show the colors hasn't showed up properly - so let me try again: May 21, 2012 at 20:40
-
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.
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.
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:
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:
-
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. Feb 26, 2013 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.