8 Ways to Design a Color Blind Friendly Website

One of the most common web design patterns today is the use of color to convey information. Think red to indicate an error or missing field, or green to indicate success.

Although these color-based cues are useful for many people, they can also present challenges for the 300 million people globally who have some form of color deficiency.

In this post, we explain the different types of color blindness and share tips on how you can design color blind friendly websites — without forgoing color entirely.

When updating your website, remember to test your site’s accessibility as you make changes.

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 distinguishing between certain colors.

There are three main types of color blindness:

1. Red-green color blindness: The most common type of color blindness, this causes individuals to confuse red and green. Types of red-green color blindness include:

• Deuteranomaly: Green looks red
• Protanomaly: Red looks green and dull
• Protanopia/Deuteranopia: Cannot distinguish between red and green

2. Blue-yellow color blindness: Less common than red-green color blindness, this causes individuals to confuse blue and yellow. Types of blue-yellow color blindness include:

• Tritanomaly: Makes it hard to tell the difference between yellow and red or blue and green
• Tritanopia: Makes it hard to tell the difference between blue and green, purple and red, or yellow and pink. It also makes colors look less bright.

3. Monochromacy: The rarest form of color blindness (occurring in roughly 1 in 33,000 people), this is when an individual cannot see any colors.

Best Practices for Color Blind Friendly Websites

Designing your website to be accessible for people with color deficiency doesn’t mean you have to forgo color entirely; you just need to be a bit more intentional with how you use it. Here are some best practices for designing with color blindness in mind:

1. Don’t Rely on Color Alone

The overarching theme of designing for color blindness is to not be overly reliant on color. You shouldn’t use color as the only element that gets your users’ attention — or alerts them to key information. If you do use color to communicate information, be sure to combine it with another element (such as an error message or symbol) to help people with color deficiencies follow along.

2. Use Icons and Symbols

One of the most common ways to supplement color on a website is the use of icons and symbols. For example, universal icons like exclamation points can help draw a user’s attention. Going back to the example of a missing form field, you could combine a red outline with an exclamation point to indicate an error.

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. Adding textures and patterns like checkers, lines, and dots can help make each item stand out as unique and easily identifiable.

If you’re going to include charts and graphs on your website, be sure to add alt text for people who cannot perceive items visually.

4. Use Labels

Using labels on your site can greatly improve the user experience for people who are color blind. Textures and patterns are a great design element for charts and graphs, but adding labels can make things clearer.

Labeling is especially important if you have items on your website that are differentiated by color. For example, if you sell items on your website that come in different colors, labeling each option can help users know what they’re buying.

As an added bonus, adding labels can also help people who use screen readers make more informed buying decisions.

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 make sure that links are bold and pronounced. This will help emphasize elements like call-to-action (CTA) buttons.

6. Use Color Contrast Properly

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 different colors and hues on your website can seem fun and appealing, but it can also be confusing and frustrating for people 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 for people with color deficiencies, 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.

Want more tips on designing accessible websites? Check out AudioEye’s Comprehensive Guide on Accessible Design, which covers everything from color to link accessibility.