Colorblind Accessibility Web Design Tips

While color is an essential element of design, not all designers consider the color experience for someone who is colorblind. According to We Are Color Blind, a colorblindness awareness organization, approximately eight percent of the male population is colorblind. Considering almost half of the United State’s 300 million people are male, you can do the math to understand that eight percent is quite a significant number.  It’s important that designers take colorblind accessibility into consideration when designing websites and other graphics.

What is Colorblindness?

Colorblindness is the reduced ability to distinguish between shades of certain colors. Most commonly, this refers to red/green colorblindness. Less common is blue/yellow colorblindness. If you’re a design student or have taken art at any point, you probably remember that red/green and blue/yellow are opposites on the color wheel. Also, understand that the term colorblind is somewhat of a misnomer, as no one with vision sees no color. A very, very small percentage of people see in black and white, which is called monochromacy.

Colorblindness is a complicated, sex-linked trait that is a mutation on the X chromosome. Having two X chromosomes, as women do, comes in handy, as X-linked disorders can be made up for, so to speak, with the other X chromosome. However, other genetic complications can still cause colorblindness in women. Colorblind women make up only 0.4% of the population, which still represents around 60,000 people. Because men have an XY chromosome combination, the colorblindness gene shows up when the mutation is there.

How Does Color-Accessibility Affect Design?

As a designer you understand the importance of your work. You do a lot more than make things pretty. Design needs to be functional as well. People rely on good design to give instruction, make information clear and help them navigate the world.

Because colorblindness is about shades, not complete omission of the colors red and green or blue and yellow, it is important that designers focus on contrast and brightness. For instance, look at the following image by Design Shack.

Pay special attention to areas of web design that can be improved to be accessible for colorblind individuals. As the above image indicates, the top hover color change is too similar in brightness for a red/green challenged user. The middle is better because of the brightness contrast. However, the bottom is best because it adds the element of border color to indicate hover, as well as the brightness contrast. This is a very simple improvement that makes a world of difference for color-impaired users.

Why Bother with Accessible Design?

As mentioned earlier, your job as a designer is to create visually appealing, functional graphics. If your design doesn’t reach the entirety of your intended audience because of a physical impairment, have you done your duty as a designer? Think of it like an architect who creates plans without accessible entryways.

Additionally, there are some benefits associated with accessible design:

• Accessible design shows that you’ve given great consideration to your or your client’s entire audience.
• Accessible websites rank higher with search engine algorithms.
• Accessible design targets older technology by default, like third-generation phones and PDAs.

How Can You Implement Better Color-Accessible Design?

Designing for the color impaired is fairly simple, and you don’t have to sacrifice quality design for accessibility. Keep the following points in mind as you design your next website or infographic.

Use color and symbols to signal meanings.

For those of us with normal vision, it’s generally understood that red symbolizes “stop” or “warning,” while green can represent “go” or “safe.” For color deficient individuals, these colors may not have apparent meaning. Try using symbols in place of, or in addition to, color representations.

Use minimalism to your advantage.

Minimalist design isn’t just trendy; it can also be very useful in color-accessible design. Use shade and tone variations instead of multiple colors in your designs.

Play around with texture and patterns.

If your client is using certain colors that aren’t optimal for colorblindness, you can implement varied textures or patterns to help colorblind users distinguish between elements. Below is a good example:

Use contrasting colors and tones.

You don’t have to resort to black and white in your designs just to make elements high contrast. Referring to the image of the hover button examples earlier in this post, red and green are at least distinguishable for colorblind users as long as they have noticeably different brightness levels.

Avoid bad color combinations.

If a particular color combination hurts your eyes, the experience is even worse for a color-deficient person. Avoid these color combos:

• Green & Red
• Green & Brown
• Blue & Purple
• Green & Blue
• Light Green & Yellow
• Blue & Grey
• Green & Grey
• Green & Black

They are a nightmare for color-impaired visitors.

Be Colorblind Aware

There are various tools available on the Internet to help designers view the online world through the eyes of a colorblind individual. Some of the resources can give you feedback on your design, while others can actually simulate colorblindness. The following are just a few of many:

• Color Contrast Visualizer: Helps you choose good, accessible color combinations.
• Colorblind Web Page Filter: See a website through the eyes of multiple types of colorblindness.
• Color Laboratory: View a 216-color palette through various colorblindness filters.

Color-accessible and accessible design in general is necessary and beneficial for not only users, but also you and your clients. It only takes just a little deeper thinking to produce design that is inclusive. Remember, quality and aesthetics never need to be sacrificed for accessibility, if you think your design through.

Are you colorblind and have some additional tips or frustrations you’d like to share? Are you a designer who’s already implementing color-accessible design? Let us know in the comments below.

Image: Vinoth Chandar