Use arrow keys to navigate

Many people are affected by colorblindness: 1 in 12 men and 1 in 200 women in the world. Bill Clinton and Mark Zuckerberg are successful people with this disability, but that doesn’t negate that it brings challenges to millions. Designers and artists should hone their skills to create products that wow their audiences and to create websites that are as widely visible to the colorblind eye as possible.

The Spectrum of Colorblindness

Simulation of colorblindness-min

It’s a good idea to understand how colorblindness works before you start creating and designing. There are three types of colorblindness — deuteran, protan and tritan — that describe which cones of the eyes are not working properly. Deuteranopia and protanopia are colorblindness of green and red colors. They are the most common of the three. Tritanopia describes the inability to see the color blue, and it’s also the rarest of the three.

Why Isn’t Everything in Black and White?

Many objects, like subways maps, are color coded and pose difficult for colorblind people as they blur together. So why aren’t they simply set to black, whites and grays to relax the situation?

The truth is that success depends on many factors of design. You can remove the color, but if there are no other markers, it won’t only be people with colorblindness who are confused. Everyone will experience difficulty figuring out one line or object from the other.

Using color is important, but so is using design tricks that won’t make colors the lynchpin that holds everything together.

Set Your Goals

Think about what it is you or your company wants to gain from creating a colorblind-friendly site. You might be dedicated to ensuring your website meets 508 compliance standards, meaning all users must have access to software or website functions regardless of disability. This is normal practice for a federal site, but you need to keep those same standards in mind when you’re making your website. It will only be considered fully accessible if it meets 508 compliance.

If you’re designing for private or commercial use, you might be aiming to maximize your audience. The last thing you want is for users to view a barely readable site that filled with icons that are indistinguishable from the rest. If you can optimize every component for colorblindness, you’re closer to keeping their attention.

Use Patterns

Patterns are great ways of distinguishing variants and identifying data without depending on color. Consider repetitive patterns and choosing contrasting designs if there are more than one variables shown: One with diagonal lines and another with polka dots.

Know the Shades of Design

Once your initial goals are set, it’s time to consider your color scheme:

  • High Contrast. You have a wide array of colors, so use the range and create very light or very dark shades of colors. This is fairly generalized, as contrast can be changed without changing the hue as well.
  • Monochromatic Colors. Many people think of black and white when hearing the word “monochrome,” but it is not that at all. And remember, black and white aren’t actually colors. Monochromatic is a popular scheme that appeals to colorblind users. You might be used to seeing a famous example every day: the many blue shades in Facebook.

Monochromatic pages can be fairly simple, as they normally use a combination of good symbols with multiple shades of the same color to help separate them.

  • Hue, Saturation and Brightness. These are the basics of color, and with subtle tinkering, they can create a better image for users without using many colors.

Hue is the attribute that connects all the colors you know and love, like blue, green and yellow. If you change the definition of the hue, it helps set the shades that will be easiest for a colorblind user to see.

Saturation works on the grayscale. If you take it to the extreme, you can completely remove the hue. As a designer, aim to shift the saturation level from its most vivid to most muted until you find the right balance.

Brightness refers to the amount of light reflecting on the target object. This is related to contrast — the level at which brightness affects it. You should find the sweet spot of brightness, so it’s not too bright, dark or difficult for a colorblind user to distinguish.

Construct Within the Colors

Blue Infographic for Colorblind-min

Use a combination of symbols and colors, so users can place their attention on the required locations of a page. This is definitely something worth looking into when designing error messages on important elements, such as a submission form.

You don’t have to keep images in one shade. Feel free to break up the monotony using patterns and textures on bars and buttons to increase the contrast levels with minimal shade change.

Consider More Colorblind Design Tips

Orange and blue as complimentary colors create a combination with a high hue contrast that is not easy on the eyes, especially if they are high in saturation. Experiment with hues of blue but consider to switching to another high contrast color, like yellow, for better visibility or readability.

Do not put green text on a red background. It creates a hard-to-read vibrating effect. Sadly, the combination is common on many sites and is torture for users with deuteranopia or protanopia. Color-sighted people also experience problems with green on red. Other bad combinations include:

  • Red and blue
  • Purple and red
  • Pink and blue

The devil is in the details, especially with hover effects. You know to always choose a different color for shift on links, but you should also make sure those colors are optimal for colorblind users as well.

Designers can consider sites like W3C Schools Web Accessibility Initiative for guidelines, resources and support on creating a website that is universally accepted by users worldwide. When you consider your viewers with colorblindness, you will create the best product for everyone to see. 

Use arrow keys to navigate

Posted by Lexie Lu

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

Leave a reply

Your email address will not be published. Required fields are marked *

Powered by Creative Market