Tutorials References Menu

Accessibility Color Alone as Meaning


Why

Not everyone perceives color the same way. Red-green color blindness is the most common form, it affects up to 8% of males. Some use grayscale mode to curb their phone addiction.


What

Do not use color as the only visual indicator of a meaning.

The most common example of this is to style links without underline or border.

Browsers underline hypertext links by default. It is possible to remove the underline using Cascading Style Sheets (CSS), but this is a bad idea most of the time. Users are accustomed to seeing links underlined.

WebAIM: Links and Hypertext

Wikipedia is one example where color alone is used for styling links. In the grayscale version of the site, it is not possible to see what is plain text and what is a link.

Screenshot of the article color blindness on Wikipedia, showing blue links without underline. Screenshot from the article color blindness on Wikipedia, in grayscale. This makes it impossible to identify links.

How

Underlined links

Add underline to links. Or, do not remove them. Keep in mind that they can reduce readability.

Modified screenshot from Wikipedia, showing links with underlines.
This modified version of Wikipedia has links with underline. Some will say that this is visual noise that reduces readability.

To improve readability, we can use CSS properties like text-underline-offset and text-decoration-color

Modified version of Wikipedia, with more discreet underline on links.
This modified version is using text-underline-offset and text-decoration-color to improve readability.

Color as status

Add text and/or icons to communicate meaning, in addition to color.


Tools

Note: The following tools gives a rating for the contrast assuming that you are using it as text color.

Many combinations that are not suitable as background/color combinations, are perfectly usable as colors for graphics, buttons, etc.

The tool Contrast Ratio uses color to communicate if a color contrast is good or not. Red means bad contrast. In this example you might say that the number is another indicator. That is a valid argument. However, you are then assuming that the user understands the metric contrast ratio and knows about the guidelines.

Screenshot from Contrast Ratio showing the use of green to communicate that a color has good contrast.

The tool Coolors Color Contrast Checker uses three methods to tell us whether or not a color combination is good:

  • The red color tells us that the contrast is bad.
  • The text Very poor tells us that the contrast is b… very poor.
  • 1 of 5 stars tells us that this is really bad.
Mobile screenshot from Coolors, showing the use of color, text and icons to communicate meaning.

Do not rely on color alone. Do like Coolors, use two or three methods.