People with color blindness make up a significant portion of the population—about 1 in 12 men and 1 in 200 women to be exact. Still, they are an often overlooked audience in UI design.
Many mistake color blindness for seeing in black and white, and while this is one type, there are less rare and less extreme versions.
Most people are trichromatic, meaning that they perceive color as a combination of three colors: green, red, and blue. Different types of color blindness or color vision deficiency (CVD) come from being unable to perceive one or more of these colors clearly. The most common CVD types are red-green color blindness, where it’s hard to distinguish between red and green, and red color blindness, where red colors appear dull.
We believe everyone should have fair and equal access to the internet, and part of that is ensuring your website is designed with color blind users in mind. The Americans with Disabilities Act (ADA) even requires certain organizations to meet WCAG 2.1 Level AA guidelines.
Making your website ADA compliant isn’t difficult, but it does mean considering color accessibility.
Outside of legal ramifications, designing for color blind users is vital to the user experience you offer.
Why Designing for Color Blindness Matters
Color theory plays a large role in UI design because color has the power to influence a user’s purchase decisions, emotional response, and overall user experience.
Think about how important it is to choose the right brand colors. Now imagine that over 8% of people can’t read your logo or website because of the colors you chose. That’s a lot of lost opportunity.
Since color blind users can’t tell certain colors apart, designers can’t rely on color alone for the readability or emotional impact of a design.
When using color, you want to consider how people interact with it and create a design that appeals to your entire target audience—color blind individuals included.
Nowadays, there are tools like Visolve that can adjust computer displays for certain types of color blindness, but not all color blind individuals use these tools—not even all color blind people know they’re color blind.
It’s important to note that your website isn’t the only place to consider color accessibility. Even your social media can be made accessible to the blind and visually impaired.
Color Terminology to Know
Before we get into UI design best practices for color blind users, let’s review the fundamentals of color real quick. There are four main components to consider when choosing a color scheme:
Hue: This is a synonym for ‘color’ and is determined by a color’s spectral wavelength.
Saturation: Also called chroma, this is how intense or pure a color is, determined by the amount of gray present. The less gray there is, the brighter a color appears.
Lightness: Lightness is dependent on the amount of white or black added to a color, creating tints and shades, respectively.
Temperature: This is how warm or cool you perceive a color to be. A computer monitor can affect the perceived temperature of a color.
How to Design for Color Blind Users
Designing for color blindness doesn’t mean making your product less attractive; it merely means following certain best practices during the design process.
Implementing good UX and UI design principles will only improve your website’s usability in the long run.
Don’t Define With Color Alone
When designing for color blind users, you can’t rely exclusively on color for any message.
Doing so is a common mistake in data visualization as graphs, charts, and maps are frequently color-coded.
Booking forms that show available appointment slots or seating via color coding is also common.
Other examples include signifying required or missed form fields by outlining them in color or indicating errors with color.
You should stray away from conveying critical information in colored text and images or at least provide that information in other accessible ways.
Understand Contrast and Color Choices
For color blind users, the contrast between colors is often more important than the color itself. Focusing on contrast is beneficial since the different types of color blindness make merely avoiding a particular color inefficient.
To improve the contrast ratio in a color blind friendly palette, lighten your light colors and darken the dark ones.
Here are a few other ways to improve your design’s visibility:
- Emphasize the difference between your foreground and background color
- Don’t choose hues next to each other on the color wheel unless there’s a large difference in lightness
- Avoid using colors of similar lightness, regardless of hue or saturation
- Increase the saturation of hues in use
With that in mind, there are still color combinations that may be more challenging for different types of color blind users.
Your color blind friendly palette should stray away from these color combinations when the contrast ratio isn’t significant:
- Red and green
- Green and blue
- Green and brown
- Green and gray
- Green and black
- Blue and gray
- Blue and purple
- Yellow and light green
Implement Patterns and Textures
One way to update your visual designs for color blind users without relying on color palette alone is to use patterns and textures. This works well in instances where color usually helps distinguish information, such as in a graph or chart.
Adding pattern or texture elements will help elements stand apart.
Use Symbols and Label Everything
Clear labeling is a best practice for directing any user through the customer journey, including those who are color blind.
Labels help distinguish information typically conveyed with color. This goes for data visualization, like graphs, or for guiding users on a webpage. Ask yourself if a user can find their way without the color hints you’ve provided.
From an ecommerce standpoint, you should also label your products with clear, descriptive information. Don’t rely on product photos to tell the whole story; label a product’s color.
Rethink Your CTA Buttons
The call-to-action (CTA) is an integral part of interactive design. If a user can’t find it or doesn’t understand it, they won’t progress in the journey, and you won’t meet goals. You need to draw attention to your CTA, and many designers rely on color to do so.
Good UI design implements color but uses one or more of these other standout techniques for CTA buttons as well:
- Size
- Placement
- Heavy contrast
- Weighted borders
- Weighted fonts
- Symbolic icons
- Hover effects
These techniques work on color blind and non-color blind users alike, and you can use them for other page elements you want to draw attention to.
Underline Your Links
If you read any blog, this one included, you’ll notice that links are highlighted to notify users of their presence. The most common way to emphasize a link is with color. For this, use blue because most people with a color vision deficiency can see it.
It’s for users with achromatopsia or monochromacy, though rarer forms of color blindness, that color emphasis won’t be enough. For these people, colored links appear grayed out and are indistinguishable from other text. You can quickly solve this by underlining your anchor text.
Consider Minimalism
Minimalism can help with color accessibility because the fewer colors there are, the less chance there is for confusion. It’s also stylistically appealing and less distracting, making it a solid choice for most audiences.
You’re not required to adhere to a minimalist design to be accessible, but it’s a route you can take.
Use a Color Blindness Simulator
As the design community works towards accessible user experiences, many great tools have emerged to help.
Color blind simulators, for example, allow designers to see their designs the way a color blind user would. One such simulator, Oracle, is available for Mac, Windows, and Linux. Use a color blind simulator to test your work throughout the design process and understand how users interact with your choices.
When deciding on your color palette in the beginning stages, we suggest also using a color picker tool that evaluates your choices according to AA guidelines.
A contrast checker can tell you your contrast ratio, and an accessible color generator can suggest color combinations that work better.
Make Your Website Accessible
Designing for color blindness ensures that your entire audience can navigate and enjoy your website. For them, it means a brand they can rely on; for you, it means successful conversions. Depending on the size of your company, it may also mean following the law. Regardless, it’s part of building a fair and equal online environment.
Color accessibility is just one element of building a welcoming website. Be sure to check our guide on making your content accessible to the deaf and HOH community, too.
