Color blindness affects 300+ million people worldwide, including some famous names such as Bill Clinton, Mark Zuckerberg, and Prince William.
Source: Venngage
But, contrary to popular belief, most color blind people don’t see a black and white world.
In fact there are four main types of color blindness, and within each of these there are many different degrees to which people may be affected. For anyone without color blindness it can be easy to assume that your wonderfully designed website, and your chosen color scheme, will be met with delight and admiration from everyone. However, for many people with color blindness your website may be a nightmare to navigate – possibly even impossible.For example, look at the image below. If your eyesight is normal, this will be a pretty clear image, with the text easily visible:
However, if we upload this to a color blindness simulator, this is what it will look like to someone who has red blindness (or ‘protanopia’) – the most common form of color blindness:
All of a sudden, your wonderfully clear buttons, menus, navigation, and web content becomes virtually impossible to see or to navigate.
Given that around 8% of the population is color blind, and 5.3 billion internet users, that means a potential 424 million people would be unable to see your website.
With 860,000 of the most-visited websites on the internet failing to meet color blindness accessibility requirements, this is a significant issue. And one which, if you make the effort to address it, will not only meet the needs of a very significant number of people, but will also make your website stand out for all the right reasons.
In this post, you’ll discover the exact steps to follow in order to create a color blind friendly design.
Let’s get hue started! (‘you’… ‘hue’..? Oh never mind, let’s just dive in!)
Quick Primer to Color Blindness
Color blindness usually refers to the inability to see all colors properly. It’s very rare that a person doesn’t see any colors – living in a black-and-white world.Usually, color blind people just can’t see a whole color spectrum, as you can see below.
Source: All About Vision
Although it may seem like a rare condition, it affects 300 million people worldwide, and is much more prevalent in men.
The Types of Color Blindness
There are different types of color blindness – some people have trouble seeing different colors than others.
Red-Green
People who are red-green blind are commonly surprised that peanut butter is not green.
Source: EnChroma
That’s right, red-green blindness makes it difficult for people to distinguish between red and green colors. There are four types of red-green color blindness:
- Deuteranomaly
- Protanomaly
- Protanopia
- Deuteranopia
Blue-Yellow
This is a less common color blindness type, which makes it difficult for the color blind person to distinguish between blue from green and yellow from red.
Source: ColorMax
Again, there are more types of blue-yellow color blindness.
- Tritanomaly
- Tritanopia
Complete Color Blindness
Complete color blindness means you see a black-and-white world. This is a very rare disorder, though, affecting only 1 in 33,000 people.
Source: Color Blindness
Take a Test: Are You Color Blind?
Since color blindness is common, it may be affecting you without you even realizing it.If you wonder whether you’re color blind, you can take a test by looking at the images below and writing down the numbers you see.
Source: Verywell Health
If you were able to read all of them, you’re not color blind.
Write down the numbers into the comments below and let us know whether you’ve been able to see all of them.
How to Design for Color Blindness: 5 Essential Steps
To make your design accessible, you have to keep color blind people in mind, and make small adjustments, so they can get the most out of your design.
Also, very few designs are optimized for color-blind, so it’s an easy way to stand out.
#1 – Keep It Simple
Having a simple palette and using few colors is the first step to accessible design.
Color blind people have a hard time recognizing colors, so using similar colors, especially in charts, can make these elements look the same. That’s why we recommend using only a few colors, and keep the design simple as well.
What To Do:
- Avoid cluttered or overly complex designs
- Maintain a consistent design language
- Establish a clear visual hierarchy
#2 – Use Patterns
Take a look at the chart below.
Source: Crux Collaborative
As you can see, it’s impossible to see it properly for color-blind people. That’s why we recommend using patterns such as lines, dots, and textures.If we were to add lines to the graph, it would look like this – readable for everyone.
Source: Crux Collaborative
What To Do:
- Incorporate a range of patterns to convey information
- Be mindful of patterns that may overlap or blend together
#3 – Avoid Certain Color Combos
There is no specific set of colors to avoid that will suit everyone, since there are many types of color blindness.So, as a rule of thumb, we suggest using recommended color-blind palettes, which you can see below.
Source: David Nichols
If you don’t like any of them, just try to stay away from these color combos:
- Red & green
- Blue & purple
- Blue & gray
- Green & brown
- Green & blue
- Green & black
What To Do:
- Avoid color combos that may be problematic
- Provide alternatives to color combos such as text
#4 – Take Advantage of Contrast
Most color-blind individuals rely on contrast to distinguish certain colors.
The higher contrast ratio you add to your design, the better the readability for color blind people – and those with other vision impairments too.
Source: Shining
What To Do:
- Ensure high contrast between text and background color
- Use contrast-checking tools to meet accessibility
#5 – Add Labels Whenever Possible
Labeling can be a game changer to the accessibility of your website.Adding labels to your design is especially useful with charts, products in different colors, or even sign-up/login forms.
Labels add the necessary information that color-blind people need.
Plus, you’ll also be able to help people using screen readers to better understand your website and increase the chances of sale – 14% of respondents in a survey carried out by WebAIM stated that they rely on a screen reader, so this is another great way to meet an even wider audience.
What To Do:
- Use clear, descriptive labels for elements, buttons, and links
- Use formatting to draw attention to important information
Simulate Color Blindness with Coblis
Coblis is a FREE tool for simulating different types of color blindness, so you can see whether your design is accessible.Hit the ‘Choose Image’ button, upload the image, and select the color blindness type.
As you can see, you can easily switch between different color blindness types to test your design, so you can ensure it’s accessible and readable.
Don’t Forget to Use Minimalism With Your Design
Having too much color and elements on your website is not optimal for color blind people.
You want to keep the number of colors and elements to the minimum, so you can steer the attention to where it’s supposed to be.You can see a great example of a minimalist website with our design:
Here’s what we recommend you do:
- Simplify complex interfaces. Reduce unnecessary elements and focus on the core functionality. This reduces visual noise and makes it easier to navigate.
- Use negative space. Use negative/white space effectively to provide breathing room between elements, improving overall readability and usability.
Conclusion – Create Color-Blind Friendly Designs
Color blindness is pretty common, so if you’re looking to maximize your reach, it’s vital to keep designs accessible and readable to color blind individuals.
To learn more about design tips and tricks, check these resources:
- The Best Chrome Extensions for Web Developers & Designers
- The Best Image Compression Tools (Real World Testing + Comparison)
- 12 Best WordPress Blogs You Should Read & Follow
Focussing on ensuring people can access your website visually underlines the importance of how we all work best when we can see the information. This applies to collaboration on websites too.
Atarim was designed for that specific reason – transforming collaboration from an endless series of back-and-forth emails and phone calls with vague descriptions to something visual that makes perfect sense – first time.
Imagine remote collaboration across teams or with clients that’s completely visual.
With Atarim, you can use simple point-and-click collaboration to enable clients to point at what they’re referring to on any live web page, and immediately leave feedback, say what needs to be changed, and so much more.
If you want to receive feedback that makes sense, make it easier to collaborate with clients, and finish projects in days instead of weeks, sign up to Atarim today – with paid plans from just $20 per month.
- Integrated into the leading visual collaboration platform trusted by 13,000+ agencies (web dev, design, and beyond) worldwide.
- Supporting project delivery for 1,200,000+ of their clients and stakeholders.
- Deliver projects in days instead of weeks.
