Color

Summary

Ensure sufficient contrast so that text is legible, and do not rely on color to impart information, as not all users will be able to see the colors or perceive the differences.

Techniques

Provide alternatives to color for identifying information. [[WCAG-1.4.1]]
Use CSS together with semantic markup. [[WCAG-1.3.1]]

Examples

Example 1 — Using borders for links

A dotted border is added to all links to avoid completely removing the default underline.

a {
   text-decoration: none;
   padding-bottom: 2px;
   border-bottom: 1px dotted rgb(0,0,238);
}

Example 2 — Using a label for a sidebar

The following sidebar is part of a series of historical events identified by green borders. The aria-label attribute is used to add the missing context.

<aside
       aria-label="historical event series"
       class="historical">
   <h4>Battle of Waterloo</h4>
   …
</aside>

Example 3 — Including data in a figure caption

Data encoded in a pie chart is also available in the caption.

<figure>
   <figcaption>
      <p>Figure 1 — Political Affiliations</p>
      <p>Of 2000 people surveyed, 33% identified themselves as Conservatives,
         25% as Liberal, 10% as Rhino, 2% as Green and 30% declared no affiliation.</p>
   </figcaption>
   <img src="poll.jpg" alt="January 2018 political poll results"/>
</figure>

Explanation

Although the use of color is a common semantic method for conveying information to sighted users, it should never be used as the sole means of imparting information. Semantic markup should always underlie any use of border colors and shading so that the equal access is provided to users using non-visual playback methods.

More generally, though, be sure to always cleanly separate styles from content. Separation of styling ensures that users can apply their own style sheets and/or use and built-in color, brightness and contrast controls in their user agent to tailor the display to their needs.

But color is problematic for more than just the problems that arise conveying semantic meaning. Green text on red backgrounds (and vice-versa) can be unreadable for some people, and can generally cause what is known as visual vibrations. Red and black can also be indistinguishable to many users. Black text on bright white backgrounds can lead to eye strain and headaches.

Likewise, placing one shade of a color on another is also going to make reading difficult, as will placing two light or dark colors on top of each other (luminosity).

A user may be able to fix some of these issues with a configurable user agent, but it is better to avoid them in the first place.