Color as the Only Indicator of Meaning

Correct Practice

A key for accessibility is that color never be used as the only way to convey meaning. So if you indicate a bit of meaning via color, express that meaning in a secondary way as well (e.g., font weight, text decoration, shape, etc.) The best alternate is actual text).

Why? This is to ensure that users who cannot perceive color (e.g., colorblind people, screenreader users) can still get the meaning.

Examples

Highlighting Important Text

Examples of incorrectly and correctly using color to highlight important text
Incorrect Correct

Example

If you proceed, your profile will be permanently deleted.

Explanation

In this case, nothing about the "permanently deleted" text is different from the rest except the color.

  • Users with certain types of colorblindness could not visually tell that this text is any different from the rest of the sentence.
  • Screenreader users would not be told that this text is highlighted in any way.

Example

If you proceed, your profile will be permanently deleted.

Explanation

The easiest way to correct this is by bolding or italicizing the text using the html <strong> or <em> tags.

  • Users with colorblindness would see the text as bolded or italicized.
  • Screenreader users would be told that this text is important.

Denoting Required Fields in a Form

Examples of incorrectly and correctly noting fields that are required in a form
Incorrect Correct

Example


Explanation

The “required field” information here is only indicated by the red color of the dropdown, and thus screenreader users and some colorblind users would never perceive it.

Example

  *

Explanation

This method alerts many users with the red color of the asterisk but also presents that asterisk text element for others to perceive.

Be sure to let users know what the asterisk means by placing explanatory text at the top of the form, along the lines of “Required fields are marked with an asterisk.”

Referring to Colored Elements

Examples of incorrectly and correctly referring to colored elements
Incorrect Correct

Example

To change features of your service, click the orange button below:

   

Explanation

Obviously this approach is problematic for those who can’t perceive color.

Example

To change features of your service, click the Modify Service button below:

   

Explanation

Refer to the button by its visible text label and both colorblind and screenreader users will get the message.

Presenting Differential Information Graphically

Examples of incorrectly and correctly using color to present states of information
Incorrect Correct

Example

a list of services with colored ball icons representing their operating status: green representing normal operation, yellow representing a performance issue, and red representing an outage

Explanation

Here, presenting the status with different colors of the same shape could be mitigated for screenreaders by giving the ball icons descriptive alt text.

However, it still presents problems for several types of colorblindness. Here’s how these users would see it:

Red-Blind/Protanopia
the above image as viewed by a person with red-blind colorblindness: the colors for the normal status and the outage status look the same

Green-Blind/Deuteranopia
the first image in this section as viewed by a person with green-blind colorblindness the colors for the normal status and the outage status look the same

Monochromancy/Achromatopsia
the first image in this section as viewed by a person with monochromancy colorblindness the colors for the normal status and the outage status look the same

Hard to tell which services are running as normal and which is experiencing an outage, huh?

Example

a list of services with colored ball icons that also contain extra visual elements: the green normal icon has a checkmark, the yellow performance issue icon has an exclamation point, and the red outage icon has an x

Explanation

Adding a differentiating visual element to the icon (e.g., the checkmark) provides additional visual information for those with color perception issues.

Red-Blind/Protanopia
the above image as viewed by a person with red-blind colorblindness: some colors are not distinguishable but the added visual elements are

Green-Blind/Deuteranopia
the top image as viewed by a person with green-blind colorblindness: some colors are not distinguishable but the added visual elements are

Monochromancy/Achromatopsia
the top image as viewed by a person with monochromancy colorblindness: some colors are not distinguishable but the added visual elements are

For screenreader users, make sure the icons are appropriately labeled. Some font icon makers recommend certain techniques (e.g., see Font Awesome's guidance on labeling of its icons).

Providing Redundant Text

Examples of using color without and with redundant text
Incorrect Correct

Example

Legend

Red = Urgent

Blue = In process

Green = Check in six months

 

Home page

Class syllabus

Contact page

Class description and requirements

Instructor credentials

Required readings

Explanation

Individuals who are blind or colorblind, and possibly other users, would not be able to effectively interpret the color styles to understand the status of each line.

Example

Legend

Red = Urgent

Blue = In process

Green = Check in six months

 

Home page

(Check in six months) Class syllabus

Contact page

(Urgent) Class description and requirements

(In process) Instructor credentials

Required readings

Explanation

Adding text that redundantly indicates the item status ensures that a wider range of users will know the correct information.