Color Schemes for Color Vision Diversity: How to Make Documents That Don't Rely on Color Alone

Color looks different to different people

The human eye has three types of cells that respond to wavelengths of light. When one of them works differently from the majority, certain color combinations look alike. In Japan this is said to apply to about 5% of men and about 0.2% of women (rates are similar in many other countries), which works out to about one person in a class of 40. It is not a rare trait; it is more realistic to assume that someone among the people you hand a document to has it.

• The most common type has difficulty telling red from green; red, orange, yellow-green, and green look like the same family.
• The type that has difficulty telling blue from yellow is rare.
• It's not that colors can't be seen at all; differences in brightness and vividness still come through.
• Age also changes perception; for example, a yellowed lens makes blues look darker.
• Phone screen brightness, direct sunlight, and projectors also shift colors.

In other words, being able to tell colors apart on your own screen is no guarantee that your audience can. Designing with this in mind is not a special accommodation; it is the same as making documents that don't break when colors shift in projection or print. The basics of combining colors are in What Are Complementary Colors?, the process for choosing a brand color is in How to Choose a Brand Color, and building a scheme from three colors and an area ratio is in How to Choose a Color Scheme.

Hard-to-distinguish combinations and replacements

What you want to avoid are combinations where only the hue differs and the brightness is similar. If there is a difference in brightness, colors can be distinguished even when they look similar in hue.

When in doubt, building around blue and orange (or blue and yellow) is the safe choice. These pairs keep their difference for every type of color vision and still show a brightness difference in black and white. When you need three or more colors, add steps of brightness, such as dark blue, light blue, orange, and gray, rather than adding hues.

Add cues other than color

The core of this approach is not picking colors but showing the same information in two or more ways. Think of color as a supplement and shapes and text as the main carrier, and decisions become simple.

1. 1

   Add shapes or icons

   Use symbols that can be told apart even without color, such as ○×△, checks and crosses, or up and down arrows. For line charts, change the marker shapes.

2. 2

   Write words

   Writing series names directly next to chart lines or bars is faster and more accurate than matching legend colors by eye. It also removes the need to read an explanation of the color-coding.

3. 3

   Make brightness differ

   When coloring areas with similar hues, make large steps in lightness. If adjacent areas have similar brightness, the boundary itself disappears.

4. 4

   Fix positions and order

   If you fix the layout, such as “last year always on the left, this year on the right,” the chart can be read without relying on color. Match the order of the legend to the order in the chart, too.

5. 5

   Use line styles and patterns

   Add differences that survive printing, such as solid vs. dashed lines, or solid fill vs. diagonal hatching. Fine patterns get crushed when projected, so use coarse ones.

Indicating links by color alone has the same problem. Keep underlines on in-text links and make buttons clearly pressable with borders and padding, and they will work even where color doesn't come through.

Putting it into practice in charts and documents

In documents, accidents happen most with pie charts that have many series and tables colored in red and green. Reducing the number of series and placing labels directly solves most of them.

For charts showing proportions, such as how a day's time is divided, stacked bars or horizontal bars are often easier to read than pie charts. Item names can be written inside or beside the bars, which demotes color-coding to a supporting role. How to make these charts and when to use each is covered in How to Turn Your 24 Hours into a Pie Chart, and the steps for reviewing your allocation from records are in How to Review How You Spend Your Time.

How to check your color scheme

Even without special software, there are ways to check at hand. They don't reproduce every type of color vision perfectly, but they catch most risky schemes.

• Convert to black and white: only brightness differences remain, so you can see at a glance where boundaries disappear.
• Print in black and white: for documents that are projected or handed out, being readable in this state is the practical minimum.
• Shrink it and look from a distance: at small sizes, color differences weaken and only brightness differences remain.
• Open it on a phone: depending on brightness and display settings, pale colors wash out easily.
• Hide the legend: if it is still readable, you have enough non-color cues.

You can also use the Color Afterimage Illusion tool for the black-and-white check. When you load an image, it creates a black-and-white version that you can switch with the color version, so you can load your own diagrams or charts and confirm the boundaries don't disappear. Images are processed only in your browser. If you are interested in how colors affect the eye, also read What Is the Color Afterimage Illusion? and Types of Optical Illusions.

FAQ

Which colors should I use for a color-blind friendly scheme?

Blue and orange (or blue and yellow) are a safe foundation. Their difference tends to remain for every type of color vision, and they still show a brightness difference in black and white. Avoid combinations where only the hue differs and the brightness is similar, such as red and green, green and brown, or light blue and pink. When you need three or more colors, separating them by brightness steps, such as dark blue, light blue, orange, and gray, is easier to distinguish than adding hues.

Should I avoid using red in documents?

Using red is fine. What to avoid is a state where the color red alone carries the meaning. For example, if you show negative numbers in red in a table, adding a △ or − sign makes them readable even if the color doesn't come through. The same goes for error messages: add an icon and words in addition to a red border. Red text on black or dark backgrounds in particular sinks in and is hard to read, so switching to bright orange or white is more reliable.

Is there a way to check whether my document's colors are hard to distinguish?

The easiest way is to convert it to black and white. Hue differences disappear and only brightness differences remain, so you can immediately see where boundaries vanish. Printing in black and white, shrinking it and looking from a distance, and hiding the legend to see if it's still readable are also effective. This site's Color Afterimage Illusion tool can switch between black-and-white and color versions of a loaded image, so you can also use it to check charts.

What should I do when a chart needs many colors?

First consider whether you can reduce the series themselves. For a pie chart, combining into the top four plus “Other” cuts the number of colors dramatically. Then, instead of relying on a legend, write series names directly in each area or next to each line. If you really need the series, separate them by steps of brightness rather than adding hues, and for line charts add non-color cues by changing marker shapes and line styles (solid, dashed).