How to Design a Color Blind Friendly Palette

6.7K

Colors can be considered as a crucial piece of information that helps convey your message to your readers. But what happens if they have color blindness? According to statistics, around 8% of men and 0.5% of women have vision that are affected by color blindness; this even includes celebrities such as Prince William and Mark Zuckerberg!

What is color blindness?

We perceive color through sunlight, which is technically colorless. When sunlight reflects off of objects, some of the light’s wavelengths are absorbed and others are reflected. Those that are reflected enter our eyes and fall onto the different receptors inside it: cones and rods.

Cones work when there’s enough light bouncing in it to provide us with the perception of color. Simultaneously, it also helps us distinguish the tiny details of objects that we see, such as when we read. On the other hand, Rods work in dim light and provide us with rough details and black and white vision.

There are two kinds of color blindness: anomaly (functionally limited vision) and anopia (complete lack of vision of that color). Simply, this means that an individual can have difficulty seeing red (protanomaly) or may not be able to see red at all (protanopia).

In medical terms, color blindness occurs when the retina, the back of the eye, doesn’t react properly to differentlight wavelengths, which is how we see color. This mostly happens due to inherited genetic conditions but can also occur due to illnesses such as:

• Parkinson’s
• Diabetes
• Trauma to the eye or the optical nerve
• Glaucoma
• Cataracts
• Macular degeneration

Aging can also damage the retina, which can help lead to color blindness. In essence, color blindness occurs due to an X-chromosome mutation. This explains why it is more common for men to have it. Furthermore, there are three forms of color blindness that can be distinguished. This includes:

• Red-green
• Blue-yellow
• Complete

Tips for designing charts with a color blind friendly palette

Image Source:David Nichols

Designing with color blindness in mind is all about accessibility, but that doesn’t mean that you have to stick to monochrome (black and white) content. People with color blindness can actually see color, however they are just in a different palette than other people.

If you account for people with vision deficiency, they will be more likely to visit your website or interact with your content, helping you draw more visitors or customers. For this reason, designing your website with a color blind friendly palette will definitely come to your advantage.

Firstly, try testing your content as monochrome and see if it conveys enough information for people with color blindness. For a better illustration of this, look at major websites and observe how they handle their forms and error messages. For example, Facebook will always use shapes, lines, and colors when displaying an error. They outline the input field, showing the error message and link the two with a line.

You can also make an important piece of information jitter or change position as it’s being updated. However, since colors attract attention, you will have to find another way to do it regardless of your color scheme.

1) Incorporate universal symbols

Use plenty of symbols when designing for a color blind audience. Symbols are universal images that convey a certain message. For instance, envelopes are symbols that represent an email. A great tip is to try to minimize unique elements and use commonly known symbols that people are familiar with, such as a cog to represent ‘Options’ and three curved lines above a dot to represent WiFi signal.

Your charts should also be clean, streamlined, and filled with patterns and redundant indicators that emphasize the importance of such information. For example, in color blind friendly charts, you may design some bars with checkered patterns, others with zigzagging lines, and so on. All of these tips may also be applied when designing charts for users with normal vision.

2) Choosing the right color combinations

Use the whole color palette to create areas of clear contrast and avoid poor color combinations. However, since every person is different, it may be hard to tell how their vision will react to a specific color combination. To help you out, here is a list of the color combinations that are known to cause trouble for people with color blindness:

• Green & brown
• Green & red
• Green & blue
• Blue & purple
• Blue & gray
• Light green & yellow
• Green & black
• Green & gray

You can even try making your entire color scheme using just a single color but in different shades. Try experimenting with different brightness levels, hues, and saturation.

3) Adding shapes and outlines

Moreover, you should use different sizes and geometric shapes to outline different types of content. For example, whereas content would usually have a primary color (red, blue, or yellow) to attract attention, you may use outlines of different shapes such as ellipses, squares, and triangles for greater emphasis.

Color blind people reported having trouble seeing between the color pairs mentioned above since they blur together. However, they noted that thick lines and high contrast were known to help them differentiate. Therefore, increase the contrast and thicken the lines of your content to at least 2px to ensure readability.

4) Add text labels

Use text labels and make them descriptive and prominent. They will also help users with normal vision strain their eyes less since on some older monitors, colors can be faded and bolded text can be hard to read. You know how websites show an asterisk (*) next to required fields? That’s actually a part of the design that’s meant to help a person with color blindness detect errors.

Last but not least, always underline links and don’t underline any regular text. Hyperlinks in your content should always be of the same color and underlined to make the content more scannable. This will also help users with regular vision notice them faster.

The role of colors in visual content

Different colors affect our mood and direct our attention in different ways. For example, red color stands in stark contrast to most other colors, especially green. Red is a color that naturally attracts attention, which is why ‘Stop’, ‘Error’, or ‘Danger’ signs are given this color. The bright tone of the color helps alert people.

Colors also impact how we feel about the things, which helps the tone for the underlying content. If you want to generate a calming feeling when people read your content, it would be best not to use bright and alarming colors such as red or orange. For a soothing effect, colors with cooler tones such as blue, green, or purple are recommended.

Online, we use color to quickly determine whether or not certain information are what we’re looking for. For example, green color on numbers within a banking transaction represents money received while red represents money spent. If we’re wanting to check expenditure, we’ll focus on looking for numbers written in red.

When designing for color blind people, it is important that you try to include at least some information redundancy and make the content scannable. These people should be able to effectively scan through the information just as quickly as people who can see the full color spectrum.

Plan your color scheme ahead of time

If you plan to create a color palette that adheres to people with color blindness, it is highly advised that you stick to a consistent color scheme for your content. You may have to invest some time and effort into it, but it will pay off later down the line as it will make your content for accessible.

The key idea is to use colors consistent with the rest of your brand or project. Focus on defining what your brand means, choose appropriate colors to reflect it, and then apply them consistently throughout the entirety of your brand’s visuals. Afterall, designing a color blind friendly palette doesn’t necessarily mean that you have to sacrifice the aesthetics of your brand.

Most importantly, remember not to use color combinations that are difficult for color blind people to differentiate. Be sure to choose your brand’s color combinations wisely within your design. The charts below show recommended combinations of colors that are known to help color blind people with differentiation:

Image Source: David Nichols

When to use red and green together

Despite being the most common form of color blindness, red-green blindness doesn’t mean the person having it is incapable of receiving other visual information. For example, such people can still see traffic lights glare when active and flash when they’re about to change. In the example of traffic lights, red indicates danger and green indicates safety.

In digital content, red and green would have similar contexts – red for warning or errors and green for safety. However, when designing for color blind users, you don’t have such luxury and have to indicate areas of interest in some other way. The takeaway is to use red and green together if you can add some indicator of ongoing activity or change to it. This way, these audiences will not solely have to rely on color.

Although red and green are not ideal colors to pair together, another way to use them is to differentiate them by using light vs. dark shades. For example, you may pair a lighter green with a dark red color. This will allow color blind audiences to distinguish that the lighter shade represents green while darker shades represent red.

How can you create color blind friendly charts?

To create color blind friendly charts, make sure your design is minimalistic but also keep in mind that your users need visual indicators to know exactly what they’re seeing. Although it may be tempting to put as many elements into your charts or just strip them of all clutter, either extremes do not necessarily help increase the readability of your chart.

A great study on how colors, text, and icons affect user behavior was conducted by NN/g, a team of usability research experts. In their article titled “Visual Indicators to Differentiate Items in a List” published in 2016, NN/g revealed the results of their experiment where 96 users were asked to interact with mobile pages designed to help users navigate in 1 out of 4 ways:

• Text only
• Color only
• Icon only
• Color and Icon

Users were given a task to find something, such as which stocks recently increased in price, and were graded in 4 different ways:

• Time to first click
• Time to first correct click
• Time to finish the task
• Success rate

The results showed that text was not only ineffective, but also performed the worst in all areas. The best performance was achieved by using both color and icon for each interesting change, such as a red upward arrow for stocks that rose in value. This led the team to conclude that “users were 37% faster in finding desired information when presented with both colors and icons at the same time”.

Tritanopia perspective

People with tritanopia are unable to see blue and yellow light. Blue cone cells are absent, causing blue to appear as green, and yellow to show up as light gray or violet. This is the rarest form of color blindness, affecting less than 1 in 10,000 people globally. Since it’s the only kind of color blindness not linked to the X chromosome, it appears equally in women and men.

Protanopia perspective

People with protanopia are unable to see red light, which appears in their vision as a black or murky brown color. This is due to the red cone cells not working properly. Additionally, some shades of yellow, orange, and green may all seem yellow to them. They will typically not realize they can’t see red until they’re tested for a job that requires it, such as being a locomotive driver.

Deuteranopia perspective

People with deuteranopia are unable to see green light due to the malfunctioning of green cone cells. In their vision, green colors show up as beige and reds show up as a yellow-brownish color. Deuteranopia is linked to the X chromosome and affects 1 in 100 men.

Monochromacy perspective

People with monochromacy can have two kinds of color blindness, depending on whether the cones or rods are affected. Both types are unable to see light of any color, which shows in their vision as black and white. They might also have trouble seeing clearly, and their of the entire world may appear as if they are looking through a smudged screen.

With cone monochromacy, two of three cone types fail to work. Although there is some color, the brain is unable to compare what it sees to other colors which is what makes it hard to make a distinction.

With rod monochromacy, all cone cells have somehow malfunctioned at birth. These people feel uncomfortable in bright environments and also experience nystagmus, rapid, involuntary oscillation of the eyeball. Monochromacy appears once in every 33,000 people.

Tools to help

There are several ways to test if your color scheme is appropriate for people with color blindness.

One of these is the Ishihara test for color blindness. It displays groups of colored dots that form, for example, a red number 25 surrounded by blue dots. Depending on the type of color deficiency they have, people won’t be able to see some of these images, hence, helping you discover which color scheme works for as many people as possible.

“Coblis: Color Blindness Test Simulator” is another useful tool for testing images since you can upload any image and see what it would look like for people with different types of color blindness. While it may take a longer time if you’ve got a database with thousands of images, Coblis is still useful in helping you understand the color palette that color blind people see.

Adobe Illustrator and Photoshop come with useful options used to test for color blindness. They are typically found under the “View” menu as “Proof Setup” and “Color Blindness”. Here you can check how your setup would look like to protanopia and deuteranopia users. In Photoshop you can even use magenta to replace red by copying red channel contents and pasting them over to the magenta channel under “Window” and “Channels” menu option.

Venngage is another useful tool to use when creating infographics. The program comes with over 4,000 icons that you can use when designing charts and infographics to be more accessible to people with color blindness.