Back to Blog

8 Ways to Design a Color Blind Friendly Website

Designing for Color Blindness

Summary: When building a website, it's critical to keep color blind accessibility in mind. Learn how to design for color blindness with these tips and techniques.

Color can make website content more dynamic and appealing for your site visitors. However, using pigmentation in the wrong way and/or leaning on it to inform functional aspects of your site (buttons, links, calls to action) can make it unusable to those with color blindness. More than 4% of people have some form of color deficiency. Designing for color blindness, or color vision deficiency, ensures that all of your site visitors can get the best experience possible. 

Building your site for color blindness accessibility doesn’t mean you have to forgo incorporating hues altogether. You just need to be a bit more mindful of how you use color and how you present different elements of your site. 

 

Understanding Color Blindness

Contrary to what the term color blindness may suggest, most people with color deficiency can see pigmentation. Rather than seeing no color at all, they instead have difficulty with certain colors. 

There are three main types of color blindness and subcategories within the various types: 

  1. Red-green color blindness (most common) causes an individual to confuse red and green. Types of red-green color blindness include:
    - Deuteranomaly: Green looks red
    - Protanomaly: Red looks green and dull
    - Protanopia/Deuteranopia: Can’t differentiate between red and green
  2. Blue-yellow color blindness (less common) causes an individual to confuse blue and yellow. Types of blue-yellow color blindness include:
    - Tritanomaly: Can’t differentiate between yellow and red and blue and green
    - Tritanopia: Can’t differentiate between yellow and pink, blue and green, and purple and red
  3. Monochromacy (very rare) is when an individual cannot see any colors 

Web Designing for Color Blindness

Designing your site for color blindness takes some thought and intentionality. Here are a few tips for designing your website with color blindness in mind.

1. Don’t rely too much on color

The overarching theme of designing for color blindness is to not over-rely on pigmentation. You shouldn’t use color as the main or only element that gets your users’ attention. Sure, red is the universal hue for errors, but if you’re putting up an online form, you shouldn’t use red as the only indicator that the user made an error filling it out. Combine your colors with other elements, such as error messaging, that can help those with color deficiencies know where to look and what to do. 

2. Use symbols

One of the more tried-and-true ways not to rely solely on color is to use symbols when appropriate. Going back to the form errors example, exclamation points are a standard symbol for mistakes. You could combine red with an exclamation point to indicate an error in the form. 

3. Use textures and patterns

When you need to emphasize certain objects, it’s a good idea to incorporate textures and/or patterns. This is especially helpful for charts and graphs, where color is often used to differentiate between items. Using only color, however, could defeat the purpose for those with color blindness. Adding patterns and textures like checkers, lines, and dots can help make each item stand out as unique and easily identifiable. 

4. Use labels

Using labels on your site can greatly improve the experience for users who are color blind. Textures and patterns are a great design element for charts and graphs, but adding labels can clear things up even further. Labeling is especially necessary when you have items on your website that are differentiated by color. For instance, if you are selling items on your site that come in various color options, label each one of those options to let the user know what they’re buying. 

5. Go bold

People with color blindness tend to have an easier time seeing thick and pronounced lines. Avoid using thin slivers of color, and instead make sure that links are bold and pronounced. This will help to emphasize elements like call-to-action (CTA) buttons. 

6. Contrast

You can make your website’s components stand out to all users by properly using color contrast in your design. The trick is to use brightness and tone, in addition to hues. If you contrast by color, but maintain the same brightness, elements might look blended or muddled to those with color deficiencies. 

Adjusting brightness and tone is not only a solid practice for color blindness accessibility, but it is best practice for overall design as well. You may find that contrasting with brightness and tone, rather than only pigmentation, is also much more satisfying aesthetically. 

To get a better idea of how you are implementing brightness and tone contrasts on your site, look at it in grayscale.

7. Avoid certain color combinations

Since color blindness affects individuals differently, merely avoiding certain hues is not enough. There are certain color combinations that can cause problems for users who are color blind. Here’s a list of common combinations to avoid: 

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

8. Embrace minimalism

Having many different hues on your site can seem fun and appealing, but it can be confusing and frustrating for individuals who are color blind. You can still have fun by sticking to a palette and using gradations, brightness, and tone. In addition to improving your site’s accessibility to those with color deficiency, a minimalist design can also make your site look sleeker and more professional.

Why Color Blindness Website Accessibility Matters

Designing for color blindness website accessibility will optimize your site’s user experience for all users. To check if your website is accessible to people who are color blind, use a color blind UI test and study the results. 

Is your website accessible and compliant?

Test your site now and get your accessibility score.

Share this post