UserWay Logo UserWay Logo Mobile
Feature image 5 Ways To Make Your Site Accessible For Color Blind Visitors

Do you know you’re seeing the same colors as everyone else? Throughout history, and even in modern times, there have been some strange examples of how individuals and cultures interpret colors differently.

For example, research into ancient writings from Greece, China, India, and numerous other cultures from around the world reveals none of them had a word for the color blue. Does that mean they all saw the sky as another color? Not exactly. It’s safe to presume the sky looked as we see it today (minus the planes that fly overhead), but ancient people seem to have categorized multiple colors into mostly shades of dark and light. The vocabulary for specific colors came later.

But does that mean they saw the world differently than we do now? Most definitely. Even when you look at modern cultures, the words we use to describe colors aren’t always the same. For example, some cultures have more names for shades of colors than others. And research has shown if you come from a culture without as many color names, it’s likely you’ll not notice the subtle color differences people with numerous color names can see.

Can you imagine that? Everyone around you can easily see a color difference between two shirts or two cars, but you just see them as the same color blue?

That’s a little what it’s like to be color blind.

What Is Color Blindness?

People who are color blind are typically born with the condition. And for most, it’s such a minor issue they’re never diagnosed with it and live a normal life without even knowing that they’re color blind. But for those with more severe cases, it can cause problems with daily living activities like driving a car, completing school assignments, and surfing the internet. It’s estimated that 300 million people worldwide have some form of color blindness and it’s much more common for men (about 1 in 12) than women (1 in 200).

According to the National Eye Institute, there are four major types of color blindness:

Deuteranomaly is the most common and relates to red-green color blindness. It makes green look a little more red.

Protanomaly makes red look more green and slightly darker.

Tritanomaly causes problems with different colors. These people have a difficult time seeing the difference between blue and green, as well as yellow and red.

Tritanopia causes problems when trying to distinguish between blue and green, purple and red, and yellow and pink. It also makes colors look duller.

So far, no cure for color blindness has been developed, but some people are able to wear special glasses to help them better differentiate colors.

How Does Color Blindness Relate To Web Accessibility?

Since color blindness affects such a large portion of the population, it’s in every website owner’s best interest to use colors that don’t cause problems. It’s also a requirement within the Americans with Disabilities Act (ADA) to make your site accessible. Many small businesses and large corporations are surprised when they’re named in lawsuits for having inaccessible websites. Reducing this liability has become an important focus for web developers and legal teams.

But most of all, making your website accessible is just the right thing to do. Since the internet is used for so many functions in society, it’s important that everyone can access it without barriers. So to help you become more aware of what to consider for website visitors who are color blind, here’s a quick list of considerations to get you started.

5 Ways To Help Color-Blind Visitors Use Your Website

1. Be mindful of what colors you use. A common misconception is that it’s just red/green color combinations that cause problems for people who are color blind. But it’s best to not use green with darker shades of most colors, specifically gray, blue, brown, and black. Also, beyond yellow/blue combinations being problematic, it’s a good idea to avoid blue/purple combos, too.

2. Think about how you’re using color. The #1 problem most sites present for color blindness is using the wrong color for the background. Try to keep your websites simple with a white or off-white background while using a dark color for the text. Don’t forget about the colors you’re using in graphics and on images, too. Make sure the contrast is different enough that your text can be read easily.

It’s also important to think about how you differentiate sections of your site. For example, a best practice is to make your headings larger than the body text on your site. You may even want to make headings a different typeface. If you primarily use color to make your headings stand out from body text, it can be hard for people who are color blind to spot them.

3. Provide more than one cue for links or interactive elements. Some website templates make the mistake of having text links that aren’t underlined. They’re just a different color from the body text. A better solution is to have more than one way to know a website element is a link or interactive. Beyond using underlines for links, you can also place symbols inside form blanks to make it clear an action is needed to complete a process. Adding alt-text for buttons, links, and forms is useful, too.

4. Use descriptive text for images. Have you ever looked at a clothing site and selected the different color options for a shirt? If so, you may have come across a situation where a red shirt and orange one looked about the same. That’s one example of when it’s important to have clear text descriptions that accompany the images.

5. Don’t forget about contrast. A popular web design trend has been to make websites with a light gray background and use a slightly darker gray font on top of it. A variation of this is a white background with light gray text. A lot of Apple product packaging is designed this way, including for its phones and watches. Most people can read the text without any problems, but this can be a nightmare for anyone who is color blind. So remember to make text have more contrast with the background to increase legibility. Pro tip: you can also input your hex codes on UserWay’s Contrast Checker to see if the ratios are accessible.


And here’s a bonus: Install the UserWay widget on your site. It only takes one line of code to add, and all your visitors will gain access to simple contrast controls so they can adjust the colors to work for them. There’s also a dyslexia-friendly font and many other customizations they can make with just a click. This way, even if your colors, text size, or font aren’t perfect for some of your visitors, they have a simple way to fix it.