Color Accessible websites: What are they & how can we master them?
One of the things that we focus here in Maze is being inclusive; and color accessibility helps us achieve this. Adding accessible colors in our website’s UI/UX process doesn’t only help people with permanent disabilities, but also the people who have temporary and situational limitations.
With the ability to make your products and services accessible for all, regardless of any visual, speech, auditory, physical or cognitive disabilities, having an inclusive design should be seen as a necessity rather than a luxury in 2021 and beyond.
Color Vision Deficiency (CVD) can be genetic or a result of several diseases like multiple sclerosis (MS), diabetes or even due to medication, or ageing.
There are approximately 300 million people worldwide with color blindness, almost the same number of people as the entire population of the USA!
~Color Blind Awareness
MEM is the Fastest & easiest way to launch your E-commerce website. 0% commission. Advanced Control Panel. Mobile App & more. Book your free Demo now!
Table of contents
- The 4 types of Color Vision Deficiency (CVD) & simulator checking tools
- Legal importance with respect to Accessibility
- How can our designs be color accessible?
- Summary
The 4 types of Color Vision Deficiency (CVD) & simulator checking tools:
Source: https://www.drtavel.com/blog/perks-being-colorblind/
Understanding the types of CVD will help you combine the colors in a better way. The image below is an example of how people with Protanopia deficiency see the colors:
| Bad Colors Combinations | What a Normal vision person sees | What a person with Protanopia sees |
|---|---|---|
| Red with Green |  |  |
| Light Green with Yellow |  |  |
| Blue with Purple |  |  |
| Blue with Grey |  |  |
| Green with Grey |  |  |
| Green with Blue |  |  |
| Green with Brown |  |  |
| Green with Black |  |  |
The above table contains bad color combination examples. People with Protanopia vision deficiency will have difficulties differentiating one color from the other.
The below table is a better solution example that can help them know the difference of each color.
| Better Colors Combinations | What a Normal vision person sees | What a person with Protanopia sees |
|---|---|---|
| Orange with Blue |  |  |
| Cyan with Yellow |  |  |
| Purple with Yellow |  |  |
| Blue with Magenta |  |  |
In order to succeed in achieving color accessibility in your designs, you need to see in the eyes of the people that have CVD. Below are the list of tools and simulators that can help you achieve that:
Legal importance to use color accessibility
As well as enabling you to make your website and your products or services accessible for all which is a good thing from an ethical perspective; you should know there are several potential legal implications for businesses that do not comply with laws relating to accessibility.
Below are the accessibility standards in the United States, which should give you an idea of your obligations in terms of inclusivity:
- Section 508. This compliance requires that your site needs to be accessible if you are or create sites on behalf of a federal agency.
- An international standard, the W3C is essentially the gold standard and includes a wide range of recommendations for making web content more accessible.
How can our designs be color accessible?
You can take several steps as a web designer, developer, or even as a business owner with some technical abilities to ensure that your product is color accessible. These include:
1. Make sure that you have sufficient contrast
Your background-to-text contrast ratio must be at least 4:5:1 to make it accessible for all. Be sure to focus on every aspect of your site and especially on key promotional and navigational tools such as buttons, cards, and banners.
With respect to W3C standards the minimum level of contrast is AA.
AA ( Acceptance compliance) means that the product that is being used by the user is usable and clear for most of people with or without disabilities.
Contrast designs are mostly used for buttons, navigation drawers and background page color. There are 2 things that are taking into consideration while checking the contrast colors:
- The regular font size is 16 px which is considered as the minimum body text size.
- The large type size can be considered either as “18 px but with bold weight” or “24px with regular weight.”
Level AA: the minimum standard
Small text contrast ratio of 4.5:1 or higher Large 3:1 or higher
Level AAA: the enhanced standard
Small text 7:1 or higher Large text 4.5:1 or higher
Below are some contrast checkers that we use at Maze while we are designing:
- WCAG Contrast Checker (Web).
- Colorable (Web).
- Colorsafe (Web).
- Stark (Sketch & Adobe XD Plugin).
Below are example taken from WCAG Contrast Checker
The problem that designers used to do was to lower the contrast of text using the medium grey on a darker grey background, thinking that they are making it look less busy.
But with time, and with the help of user research, it is understood that the important thing is to make your text readable and not just as an element of decoration. In the image above, the first banner contains text with low contrast which makes it harder to read, even if people can see the text. This effort that the user is giving to read the text can increase cognitive strain. It can also create false queues and make some text look inactive.
Options that you display with low contrast are less discoverable like those low contrast close buttons “X” on the modal, that people can’t find.
So don’t decrease the opacity to make it look good. Remember, looking good is not what you should aim for. Providing the need of the user is the thing you want to focus on.
2. Add textures and patterns
When it comes to displaying information in graphs or charts, do not rely solely on color to get your point across. Instead, give users a choice to add texture or patterns so that they can clearly distinguish between each piece of data.
In other words, color contrast and font sizes are not the only things that help in having inclusive designs. There are elements such as icons, shapes and patterns, that can help in making your design more accessible.
Let’s take Trello as an example. Trello used an interface containing the colorblind friendly mode button for labels.
In the above 2 images, you can see that there are several labels that are positioned in a way where sometimes it is hard to prevent the bad color combination from existing. This is why Trello added patterns option for people with color deficiency. The image below is an example of how a user can enable or disable the blind-friendly mode in Trello
Adding patterns , icons, or even shapes can create a unique mark that will make this element easy to differentiate it from the others
3. Use focus states
If you have ever tabbed through a website, you have probably noticed the outlines that appear around buttons, links, and input fields. These are known as focus states.
Essentially a component of your website that is crucial for way finding when using a keyboard to navigate, the focus state style that you choose can be customized to match the UI of your site.
Below is an example of how Whatsapp and Messenger created their focus state.
| Examples | What a Normal vision person sees | What a person with Achromatopsia sees |
|---|---|---|
 |  |  |
 |  |  |
As you can see, having different icon representative for each phase is important for every user. However, the combination of the colors and icons should be studied in a way where people with vision deficiency can differentiate easily. Messenger added 4 different states that look different from one another and can be easy for people with CVD to understand.
A fun fact to know about Facebook and Messenger is that, according to The New Yorker, the reason for Facebook to have a blue color scheme is because Mark Zuckerberg has red-green color deficiency. This means that blue is the color that Mark can see the best.
Designing the states of a button is another example. There are many ways you can use to make it easier for the user to differentiate primary and secondary buttons; like using borders, different font size, different font-weight, and icons.
| State | Not accessible | Accessible |
|---|---|---|
| Normal Vision |  |  |
| Deuteranopia Vision |  |  |
Remember, better to underline your links if they are not using the button design style.
Summary
As briefly touched on above, color accessibility is needed to ensure that people with visual impairments who interpret color and contrast differently can consume the content on your website as every other user can.
For example, if a user has red/green color blindness and you have a green product image on a red background, they will not be able to see your product with sufficient clarity.
Therefore, to make your website inclusive for all, you need to ensure that you create color combinations that provide enough contrast so that all your content is clearly distinguishable from the surrounding page.
Designing with sufficient contrast can be done and is a must. Here are some alternative approaches to handling low contrast text
- Adjust the color combination between the foreground and the background
- Use the color contrast checker to guide you
- Sometimes a slight difference makes all the difference. If you can’t change the colors, make the font large enough to be comfortably read
- The answer to every design problem is not just making it bigger.
- If a design uses low contrast text to avoid competing with something else on the page, you can change the positions of the elements to reduce and increase the contrast.
- And lastly, explore reducing the information density on the page If the design is using light gray on a white background because there’s so much else on the page well maybe some of that other stuff doesn’t actually need to be there
It comes down to what’s important for your users to know in order to accomplish their goal. The web is already an obstacle course in many ways between dodging coupon overlays and login walls or texts too small or extracting animations. People are dealing with a lot. Having sufficiently high contrast text is an easy way to give people a break.
Do you need help designing a color-accessible website? Or perhaps, you would like more tried and tested techniques to make your existing site more color accessible? Either way, here at Maze, we can help you create a high-performing website accessible for all.
Get in touch today or book a free consultation and discover how we can help you and your business drive online sales without blowing your budget.