Scouting for accessible colors

Post was initially published on medium.com

Designers are looking for recognizable, distinguishable, and in the form of text legible colors for all of our users. The aim is for all users to perceive a page’s content, regardless of visual impairments, technical restrictions, and external influences. To achieve this goal, we want to look for a role model, a website that already uses accessible colors. A good starting point is to reach the WCAG requirements.

Start with the contrast ratio.

WCAG can be measured easily. For example, if you use Google Chrome, you can use the “View Page Source” tool to select every single element of a website and check the contrast ratio. So when we look for examples, we’re looking for websites that already match the WCAG-AA requirements. This means that the contrast ratio is at least 4.5: 1 for regular texts and 3: 1 for large texts. UI elements must also have a contrast ratio of 3: 1.

Role-Model Ecommerce

For our example, let’s look at a high-turnover website that is more challenging than a simple landing page due to its complexity. This mostly meets the requirements of WCAG AA. To make it simple to understand the use of colors, I have abstracted the visual elements and replaced the font and icons. This will help us focus on the colors on the page.

A visualized summary of all colors used on zalando.de with a focus on color contrast ratios
colors — zalando.de

Let’s talk about the colors

The purple (# 6328e0) is, so far, an unusual choice. It has a high saturation (S82%) and is not dark (B88%). It is a very noticeable color that stands out due to its high saturation. This color is easy to read despite the high brightness in combination with white.

The color ratio of white on purple (7.21: 1) and purple on grey (6.27 :1) both meet WCAG requirements.
Color contrast #6328e0

The green (# 00875a), which is labeling sustainability products, is also highly saturated (S99%). Compared to the purple, it is much darker (B53%). This is no surprise because most colors have to be relatively dark to achieve a sufficient contrast ratio. To keep the color clear, the darkness was compensated with the high saturation. For a color that is supposed to stand for “sustainability,” the green shade is astonishingly blue, and therefore, it looks less natural.

White on green (4.55: 1) meets the WCAG requirements. White on orange (3.32 :1) doesn’t meet the WCAG requirements.
Color contrast green (#00875a) and orange (#ff4e00e)

Orange (# ff4e00) is the brand color of the website. It is used very rarely and serves, for example, to mark the number of products in the shopping cart and as part of sub-brands and services. This color only partially meets the contrast requirements. The combination of white text and orange background would only be rich in contrast if large font-sizes were used.

A word about the “Myth.”

We might notice a phenomenon looking at the orange. Subjectively, this color combination will appear quite legible to many. Of course, WCAG AA is a good starting point for choosing colors. But we still have to check the selection of colors subjectively. Conversely to this example, there are also color contrasts that are sufficient according to the contrast value but are subjectively rather challenging to read. There is a good article on the subject that illustrates the problems with WCAG. However, I would advise against understanding WCAG as “not working.” It is a guideline that should technically show us how good contrast is between text and background. We should see it as a good anchor in discussing accessible color rather than an ultimate recommendation. A decision for or against a color should be made by testing our content with people.

Check color conflicts with Adobe Color.

We now know that the color of this website could mostly be considered accessible due to its contrast. Before we follow this interpretation, we still have to check to what extent these colors offer sufficient distinguishability for all forms of color blindness. This can be found out quickly using the Adobe Accessibility Tool. The colors are readable and there are no conflicts. All colors can be displayed simultaneously on one screen and remain distinguishable for all users. One of the most familiar visual impairments is the red-green weakness. The more yellowish orange (# ff4e00) and the blue-tending green (# 00875a) are not a problem in this case.

The primary colors used color checked with the Adobe Accessibility Tool — no issue for color-blind users.
https://color.adobe.com/create/color-accessibility

Use Stark Accessibility Software

With the Stark extension for Figma and Sketch, you can already simulate how specific colors work together while working in the design tool and whether these remain distinguishable for the different types of color blindness. This means that you can immediately see how distinguishable the colors stay in their appearance.

What’s next?

We discovered a good role model in our search for a website with accessible colors and want to create our own accessible color palette next. To do this, it is essential to determine what requirements we have for our colors. Further, we want to use these colors in context and then finally check them in a test.

If you’re wondering why does someone write about colors, there are several reasons. On the one hand, there is the European Accessibility Act. This will be incorporated into German law (and any other European, national law) by 2025. That makes it a necessary task to make the Internet more accessible. Planning phases and implementation can be tedious, and, especially when it comes to colors, the discussion is often wholly subjective. However, the subject of colors can be approached very methodically, which would make this subject less emotional. You can study color design, and that was also part of my studies. That is one of the reasons why I feel called to promote this topic in my circles.

Published by lukasckuehne

User Experience Designer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: