Accessible Use of Color

An example from the physical world

Mr. X and Mr. M, owned and operated businesses next to each other. Mr. M was doing brisk business and saw his revenues steadily growing on the other hand Mr. X saw his business failing as neither offers and discounts didn’t help.

One day Mr. X decided to give the grandest offer ever by offering his products at whopping 50% discount and this is what happened.

So, what might have been the problem? Mr. M’s board was more eye-catching and was easy to read. And why was that? It made use of color by adhering to sufficient color contrast.

Let us have a look at this differently and understand this better.

Try walking away from your screen and reading the flex board on the left. I’m sure your eyes will tend to focus on the right instead. You might also find it struggling to read text on the left depending on the luminosity of your surroundings.

The most important difference is that the flex board used by Mr. M makes use of colors that adhere to contrast ratio of more than 3:1 or 4.5:1. As most of you would already know colors in digital world are represented by numbers. And these ratios signify the colors of foreground verses its background or vice-versa. Here are the contrast ratios for the colors used in above 2 discount offer flex banners:

Left Side Banner of Mr. X

Foreground text uses white color with hex code #FFFFFF whereas background uses  aqua color with hex code #00FFFF.

This forms a color contrast ratio of 1.25:1 between white text on aqua background.

Right Side Banner of Mr. M

Text that reads “15% Off”

Foreground text uses a shade of Green with hex code #7F00FF on a background that uses very light shade of blue with hex code #63F4FA. This makes the color contrast ratio of 4.73:1 between lighter background with the foreground text.

Text that reads “Big Sale”

Foreground text uses navy blue with hex code #17035C against the same background of very light blue with hex code #63F4FA. And this one forms contrast ratio of 13.16:1 between light background color against the darker foreground text.

Note

The color contrast ratio is much higher than 4.5:1 which is a necessary compliance to let color-blind users, low-vision users and even normal users (looking from a significant distance) be able to distinguish and read properly.

An example from digital world

Mr. V who is facing issues with his vision to a certain extent extensively depends on his low-vision and magnification software to carry out his regular tasks on his smart phone. He even makes use of ride service apps to book his cabs and rides. But he faces a major challenge. He cannot pinpoint his pick-up location because the only way available for him to do that is by placing the pick-up pin on his location on the map. The map though does not have enough contrast to differentiate the roads colored white from the terrane colored pale yellow.

To overcome such challenges, there are many major ride service providers who are taking steps to design their user interface components where the routes are marked in distinctively dark color so that the low-vision users like Mr. V can benefit. But the benefit is not just there for Mr. V. This benefit is also for all those who are looking at their mobile screens out in the bright sunlight. Even for such users these features enhance the experience in such broad daylight.

Principles behind the scenes

Types of color-blindness

There are 4 types of color-blind ailments. These are based on how human eye perceives colors. Human eye interprets colors in combination of red, green and blue. Most common problem is caused by misinterpretation of green color, followed by red color issues and very rare conditions cause color-blindness because of misinterpretation of blue color. In most cases one out of the 3 base colors get misinterpreted. Very rare cases have all three colors not getting interpreted at all. For such individuals, the world appears in shades of gray just like the old black-and-white movies.

Guidelines around use of colors

The Web Content Accessibility Guidelines 2.1 provides set of rules around proper use of colors. There are about 3 rules around color contrast whereas few others throw more light on how color gets used to provide some additional meaning to existing content. Mentioned below are those rules (also known as success criteria).

Color contrast norms

1. 1.4.3 Contrast (Minimum) – Level AA
   This criterion applies to text and its background. Minimum contrast ratio needed is 4.5:1. Only if the text is large enough, can the contrast ratio be 3:1. Large text is 14 point bold or 18 point normal text. In our physical world case study, Mr. X should have had color contrast of at least 3:1 for his flex banners placed outside of his outlet.
2. 1.4.11 Non-text Contrast – Level AA
   As per this norm, the contrast ratio of non-text content should be at least 3:1. When it comes to graphics like described in the map example above, the parts of map viz the road verses the terrane should be having contrast of at least 3:1. Similarly, widgets like buttons, selected option, tiles on dashboard, etc. on a web page should have contrast ratio of the component color distinct enough from the background. This allows people with color-blindness or low-vision to identify the component and then interact with those.
3. 1.4.6 Contrast (Enhanced) – Level AAA
   This success criterion states more enhanced requirements when compared with 1.4.3 Contrast (Minimum). This success criterion applies to color contrast between text and its background. Although the requirements under here are not mandatory, this can be a far enhanced experience for all users in general.

Other norms to take into consideration

1. 1.4.1 Use of color – Level A
   This rule states that only color is not used for conveying meaning. It assumes that user might not be using any assistive technology. Hence the alternative means to convey the same meaning must be visual itself. So if a required field is marked in red, an asterisk (“*”) or accompanying text (“required”) must accompany the field or its label to indicate its required nature.
2. 2.4.7 focus visible – Level AA
   This success criterion does not directly talk about any involvement of color as such. It is focused on providing focus indicators for keyboard-only users who need to understand where the focus is as they navigate interactive elements on a web page. One of the implementations of displaying focus indicators is to use border colors or background colors on focused elements so that the focused state is clearly indicated. Once focus is visible, this criterion gets satisfied. Then 1.4.11 Non-text contrast comes into picture where the focus indicator should then match the contrast requirements as well.

Take away

To conclude the importance of colors, here is list we should cater to while designing user experiences.

1. Text color should adhere to minimum contrast of 4.5:1. If the text is large enough, contrast ratio requirement can be of 3:1.
2. Only color should not be used to provide information like the red color used for indicating required fields.
3. With respect to non-text contrast, the colors used for controls and user interface components should have enough contrast of 3:1 with respect to adjacent colors.
4. While presenting some color based information from graphics like lines or bars in a chart, only color should not be used to identify the parameters.
5. The states of controls such as toggled, focused, checked, selected, etc. should comply with contrast of 3:1.