: 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,

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.

10% popularity Vote Up Vote Down