Do not just use color to convey information

Using colors to emphasize information is great. They help distinguish the content and make it easier to identify while making it more stylish for the users. But it needs to be a booster –something that supports and enhances the current content–, and not something that provides all the information.

People suffering from partial sight, color blindness, or visual deficiencies, may have problems differentiating certain colors. If all the information is color-based, then they won't be able to access it.

Let's illustrate this by taking the last example from the previous post:

Mouse over this pie chart to see it in grayscale

That is a pie chart with more-or-less easy to distinguish colors but, when you mouseover, it turns into a grayscale mess.

While graphs may be more of an edge case, there are many other elements and components that we use every day and could potentially have a similar issue. For example:

• Alert/Toast messages may be difficult to distinguish unless they specify what type they are.
• Required/invalid fields should be more descriptive than just a red color.
• Links need to pop among the surrounding text... even if everything was in grayscale.

Different examples of non-accessible components

There are different techniques to solve these problems. All of them based on the idea of having something more than just color to emphasize the content:

• Adding images or icons.
• Adding a textual indicator.
• Add other types of visual indicators.
• Adding a background pattern.
• Combine some of the above...

Let's see them in more detail in the following sections.

Adding a visual indicator or icon

Adding an icon or image next to the content may be a good solution in some cases. It will boost the use of color to convey information, and it's fairly easy to implement.

A stock ticker is a classic example of this problem and solution. If the stock value is up, the numbers are displayed in green, and if the value is down, they are displayed in red. Which may not be a good thing for users with partial sight or colorblindness:

Knowing which stock is up or down is not so easy on a grayscale

We need to communicate textually or visually what each color means. In the case of the stock ticker, an arrow up or down would do:

An icon provides information and makes it easier to understand for everyone

Adding that up/down visual indicator provides extra reinforcement for what the change in value was and makes the content more accessible.

In CSS, we can add the icon using the pseudo-elements ::before and ::after, either by using an actual image or setting the icon as a Unicode character:

/* Option 1: adding an actual icon */
.price.positive::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(up.png);
  background-size: cover;
}

/* Option 2: using directly the content */
.price.positive::before {
  content: "▲";
}
.price.negative::before {
  content: "▼";
}

Note that this could be achieved by adding the image using HTML, but this series is focused on accessibility using CSS.

In some cases, the use of this icon could be sufficient to indicate the existence of the content (e.g. a link with an external icon.)

Adding a textual indicator

This could be helpful to highlight some form fields and their status (e.g. when there is an error):

Add text with a description of the error and how to fix it

The CSS implementation for this would depend on the HTML. But in general, it will be a similar technique to the one explained above. Just using text instead of icons or images.

Note: although textual cues can be added with pseudo-elements in CSS, it is better to do it directly in HTML as that text may not be accessible to some users through their assistive technology.

Adding other visual indicators

Not all of the visual indicators have to be text or images. There are others that are more extended and generally understood by all the users, and that can be used to.

Some examples of this:

• Links are generally underlined.
• Required fields have an asterisk (*) next to the label.
• Buttons have a border or solid content.
• Inputs have some border...

For example:

The underlined links pop from the text

The links on the first paragraph are not underlined and, for people suffering visual deficiencies, they may be difficult to differentiate from the regular text that surrounds them.

This is a CSS example of a link that is underlined in normal state, but we remove the underline on hover:

a, a:link {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

Another example from above would be having an asterisk (*) next to the label of a required field. For that we can use the ::before or ::after pseudo-elements:

label.required-field::after {
  content: "*";
}

Add background patterns

This could be extremely helpful for graphs and charts... which is more of a JavaScript/SVG/HTML kind of thing. But CSS still may have something to say.

The idea would be not to have just a color but add a (semitransparent) image that will differentiate sections. That way, people with color blindness would be able to separate the sections better.

Sections with background patterns are easier to differentiate in a graph

The whole "add patterns to graph" part could require a little bit of JavaScript, but it can also be achieved only with CSS and HTML by adding a checkbox before the graph and using the ~ combinator (but that's a different story).

The CSS for this would be the same as any background image:

.chart .section {
  background-image: url(pattern.png);
}

---

Do not just use color to convey information.

Comments

[Andrew Nevins]

I also had a small point on the stock ticker. I understand we're only addressing Use of Color and it's important not to detract from that, and while the CSS pseudo approach is illustrative for the reader, I think there are some associated problems with it:

• People may not be aware that it's not just people with visual impairments that miss out, but people using assistive technologies.
• Using icons in psuedo content may also be announced to some assistive tech: a11ysupport.io/tech/css/generated_...

I think therefore the result should be both satisfying to assistive technology users and people with low vision and colour impairments.
What do you think about changing the CSS pseudo example to a HTML image with alternative text?

For example:

AMD <img alt="Down" src="down-icon.svg" /> 52.00
INTC <img alt="Down" src="down-icon.svg" /> 58.74
NVIDIA <img alt="Up" src="up-icon.svg" /> 380.70

This isn't simpler to convey as an example of the result, but it does address the wider audience for 1.4.1.

Thanks again for your efforts,
Andrew!

[Alvaro Montoro]

The series is related to changes that can be done to improve accessibility by just using CSS (without requiring HTML/JS changes). I agree an additional image approach would be better in general, but that would be also out of the scope of the series. I'll edit the article to add a note... and in general to rearrange things and provide better examples. Thanks for the comment and the feedback.

[Michiel Hendriks]

It is such an easy check: convert to grayscale. It should be criminal that designers don't do it.
And it's not just for colorblind people, because that mostly applies to white males. The grayscale test is also good way to check how well your design works on displays which do not have ideal situations. For example: glossy screens, screens in the sun, non-calibrated screen, TN panels, non-calibrated glossy TN panel screens in the sun, ...

PS, Pie/donuts charts should be thrown out completely. They generally suck in providing comparative information. A bar chart can shown the different between 35% and 40%, a pie chart not so much, unless you add interactive elements to it.

[Vesa Piittinen]

This is one area where it is also good to draw inspiration from the past. For example, Commodore 64 has a great palette in how it has luminance sorted out. You have 16 colors. In there you have white and black. The rest 14 colors are in luminance pairs so you have 9 levels of different luminance when adding in black and white. Since there are only 16 colors in total and two colors of similar luminance seem too close to each other you often end up pairing colors that have a different level of luminance.

I think this is a very powerful way to make an accessible palette for a website as well: purposefully limit the luminance to a few distinct values and then apply hue and saturation to guarantee you have colors that are easy to distinguish of each other.

The luminance pairs also allowed people to code "impossible colors" for C64. How? Well, on each screen render you'd make your code swap between two colors that were exact or close pairings in luminance. If the colors were too far apart then you'd see it flickering, but with close luminance pairs you couldn't tell and instead perceived "an impossible color".

[Alvaro Montoro]

Wow! That is amazing 🤯

[Guillaume Esquevin]

« Do not just use color to convey information » would be a more accurate title for your article. It currently feels a little clickbaity

[Alvaro Montoro]

Thanks for the feedback. I updated the title to match your suggestion and the recommendation at the end of the article.

[Andrew Nevins]

Hi Alvaro, thank you for your thorough explanation on Use of Color! What do you think about adding a line explaining the preference for using an additional visual cue rather than going for the 3:1 contrast ratio technique? I appreciate that technique is non-normative, but still it is used to justify meeting 1.4.1.

[Alvaro Montoro]

Thanks for the feedback. I will check what you mention and will add a note on that (in general the article needs some reworking).

[David Cantrell]

This website is useful for checking colour-blind compatibility.

And I'm a bit amused that when you say "add a visual indicator or icon" you don't give an example to show what you mean. You give some complicated CSS source code that a great many people won't understand.

[Alvaro Montoro]

Thanks for sharing that website, it is eye-opening. And thanks for the feedback. I need to rearrange things and modify the article a bit. In hindsight, the examples I provided may not be the best (or in the best order).

[Shalvah]

Such a good post! Thank you for including detailed positive and negative examples, plus recommendations.