# Introduction to Web Accessibility: The Issue of Colors

When talking about best practices on the web, we see an acronym becoming essential today: A11Y

A11Y stands for "accessibility", the number 11 representing the number of letters between the starting "a" and the ending "y".

The accessibility of a website represents the possibility for anyone to access it without any trouble, regardless of their equipment, their age, their disability, etc...

The topic of accessibility is very vast but it is very important in order to avoid reproducing everyday inequalities in the digital life of millions of people.

Today, we are going to talk about a very specific accessibility topic, which is that of colors, what they imply in terms of comprehension, ease of reading, etc...

The choice of colors and color blindness

This isn't often the first topic that comes up when talking about web accessibility, but for my part it was the topic I felt most comfortable with to start this series of articles, given that I am colorblind myself!

For those who might not fully understand what color blindness is, it can be described as a genetic mutation (most of the time), affecting color vision.

There are several types of color blindness depending on the color hues affected, but what you need to remember is that color blindness affects 8% of men and 0.4% of women, which ultimately makes up a good portion of the world's population.

Since I know that many people have a hard time picturing the real consequences of color blindness on eyesight, here are two visual aids:

The image below is a color blindness test, given to children. If you can see the number "9" in the image, you are not affected, but if you can't perceive it, you might be colorblind (sorry if you're finding out today).

As for me, even putting my whole heart into it I don't see any number, so thanks to my wife for helping me choose this image!

But a single circle like this one isn't enough to determine your color blindness, because there are 3 main types in total, two of which are subdivided into three subtypes, each one affecting a different color: red, green, or blue.

To help you get a sense of it, here is the representation of three different color blindness subtypes applied to a reference image:

Personally I have trouble seeing the difference between the first and second image since I am Deuteranomalous.

You're probably starting to understand the stakes of colors on your websites: by using certain colors together, you risk preventing some people from understanding all the information you're trying to convey.

Contrasts

When you write text, always keep in mind that just because it's readable for you doesn't mean it's readable for everyone.

The choice of background and text colors is very important because depending on the hues used, they can make text completely unreadable for some people, or sometimes cause headaches if the person has to concentrate very hard in order to finish reading.

Another consequence of a poor contrast choice can even be to convey the wrong information!

Take a button whose background color you change upon activation, if the contrast between the two states isn't strong enough, the user won't necessarily understand that their click worked, and might click again by mistake.

To avoid this kind of problem, you can use tools like WebAIM's "Contrast Checker" available here: https://webaim.org/resources/contrastchecker/

Visual aids

While in the collective unconscious, it's easy to understand the difference in connotation between red text and green text, a colorblind person with a deficiency affecting one of these two colors might not understand the difference.

In the context of a quiz for example, distinguishing a correct answer from a wrong one using only colors is a bad idea. The ideal approach is to add visual aids in order to eliminate any ambiguity.

A visual aid can be an icon, a text, a shape, a sound (be careful that it remains accessible for hard-of-hearing people), or anything that can reinforce the original information.

The answer was the capybara --> Not good
Correct: The answer was the capybara --> Better
✓ Correct: The answer was the capybara --> Perfect

In the example above, some people won't be able to know their result with the first version, unlike the other two!

Some think that as a developer, design is not their responsibility, however ensuring accessibility will always be our responsibility, even if we sometimes only serve as safeguards for the designs presented to us!

Note

Color-related accessibility issues are not limited only to colorblind people but also to all people with reduced visual acuity, but this is a part that will be covered at greater length in a future article, where we'll talk about readability in general.

I hope you enjoyed this article, and see you soon on the blog!