Skip to content
Accessible Technology

Visual characteristics

Applies to

  • Websites
  • Documents
  • Videos

Overview

Regardless of the media you’re using to communicate, avoid using visual characteristics such as spatial references or color to communicate information. When providing instructions, consider whether the instructions are likely to make sense to a person who is blind, or to the person who is accessing the content of a video by reading a transcript. Specific examples are provided below.

Avoid using spatial references

Spatial references such as “click the circle on the right” are meaningless to a screen reader user, who can access the web page content but isn’t likely to know its shape or its spatial position within the layout of the page. Instead, consider referring to the type and name of an object. For example, “the More Info button in the sidebar” is probably a more meaningful reference because it refers to the object’s name (“More Info”), its type (button), and its structural location (in the sidebar) as opposed to its spacial location. As long as the web page is coded with good structural markup, this way of referring to an object on the page is likely to be helpful for everyone, including people who are unable to see the page.

Avoid using color to communicate information

Some users are unable to perceive color differences, or may not perceive color the same way you do. Therefore it is important to avoid using color alone to communicate information. For example, if link text within a paragraph of text is designed to be recognizable solely by its color (e.g., black text, blue links), the links should also be underlined. Otherwise, users who are unable to perceive color differences may be unable to distinguish links from surrounding text.

Another example is “required fields are in red.” It is okay to communicate “required” using red text, but in order to communicate this information to people who are unable to perceive color, there must be one or more additional ways of communicating the same idea. For example, required fields could include the word “required” as part of the label.

Another common example includes identifying different groups of data in a graph. If different groups are represented by different colors, they should also be distinguishable via other means. For example, in a bar chart, the bars could differ by color but could also have different fill patterns; or in a line chart, the lines could differ by color but could also be labeled with the name of the group.

WCAG 2.1 success criteria

The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1: