Color is something that means a lot to us. We associate them with feelings, build brands with them and admire the different colors of the trees that change with the seasons. However, this is not the case for everyone. Some people have impairments such as color blindness or cataracts. These visual impairments mean that some cannot see the difference between specific colors, can perceive colors as darker or fainter than they actually are, and some cannot see colors at all. These aspects mean that we need to think about which colors we use and above all how we use them to ensure an inclusive design.

The new accessibility directive will soon enter into force, and with it will be greater pressure on more companies to work with accessibility and inclusion. Color is an important part of accessibility and should therefore be taken into account. In this article, we will therefore delve into how to ensure that you work accessible in your color choices!

What does WC3 say?

According to WCAG 2.1, which is the standard that WC3 has issued and which the accessibility directive follows, you have a number of different guidelines to adhere to. In these guidelines, there are the different classifications A, AA and AAA. The accessibility directive requires an A or AA level, but the highest, i.e. AAA level, is recommended.

The lowest classification for colour, i.e. A level, is based on the fact that color should not be the only way to convey information, show that something is happening on the page or the only thing that differentiates different elements. Information and differences thus need to be shown via other methods than just color.

Contrast

Contrast is the first important element to deal with as it affects a lot of visibility. So, what is contrast? It is the difference between the color of two objects that in this case affects the visibility. Low contrast means that the difference between element and background is small. Examples of low contrast are dark gray text on a black background or very light blue text on a white background. This makes the text harder to see against the background because the text and background are too similar in color. High contrast, on the other hand, makes objects stand out or pop. Black on white, for example, has very high contrast. The white background makes the black text visible very well. A general rule to follow is that if you have a dark background, the text should be light and vice versa. Examples of good differences:

But in this example, color differences also come into play. You should then ideally avoid colors that don’t go together. Perhaps a fluffy description, but red on green is a classic combination that makes the elements difficult to read for the eyes. You should also keep in mind that colors should not be too close to each other in terms of saturation because they will be too similar in black and white.

Text

Most often we write with black or white text. Sometimes, however, you want to use colored text on a colored background, and then it can quickly become problematic. When using text, it is not only the contrast that matters, but also color vision and size of the text.

In this example, we have changed the color a little so that it is towards the pink side. It is okay as long as the size does not fall below 18 pixels. This may be because the contrast becomes too low when the text becomes smaller and then flows together, or because this color combination becomes more difficult to see if you have a visual impairment.

Color vision

It is important to take any impairments in color vision into account because it changes how our design is perceived. Color blindness comes in different varieties such as red/green, blue/yellow, yellow/pink or monochrome. This means that you either do not see any of the colors or that you have difficulty seeing the difference between the colors. Cataracts, on the other hand, make the colors look weaker and a little more yellow-brown in tone. Some reductions also mean that the colors look darker.

But what does this mean for our design? We choose colors that we think go well together and that you can clearly see differences in contrast between.

However, if the color is changed to be darker, too similar to another color, or converted to grayscale, the whole experience changes. This can cause a working design to suddenly not work at all.

See examples here:

Tool for available color choices

Fortunately, there are a number of different tools that help us navigate the rules around color while helping us make sure we’re within the framework of good accessibility. Here are three tools we’ve used when testing the accessibility of our color choices.

• Color Blindness Simulator – Helps you understand the difference between the different types of color blindness. You can easily upload your own photos to see what it looks like for those with different types of color blindness.
• Contrast Checker – Has built-in WCAG 2.1 checks for all criteria. Here you enter the foreground color and background color and you get quick feedback on whether it is approved or not.
• Accessible Colors – Has WCAG 2.0 controls and you can choose which one yourself
• For a more detailed guide to available color choices when designing web, we recommend audioeye’s clear guide

Summation

Color choice means a lot for both your design and accessibility. Not everyone has the same ability to interpret colors and you need to be aware of that when designing – regardless of whether the final product is, for example, a printed matter, a website or an app.

We at Milou Communication are experts in both design and accessibility. Feel free to contact us if you need to update an existing design or create a new accessibility-friendly design to meet the stricter accessibility requirements.