Color & styling

Use color selectively and avoid sensory-dependent instructions

Individuals with visual disabilities have difficulty seeing content that does not create a significant contrast with its background. Blind users are not able to notice different colors used on a web page.

Any colors chosen for text, icons, or other symbols should contrast greatly with the background. Color should not be used as the sole means of representing information.

Avoid referring to colors, sizes, shapes, and other physical traits as the only method of description. For example, don't say "Click the big, round, blue button," since users with visual disabilities will not be able to discern which button this refers to.

Benefits

These measures allow individuals with visual disabilities to understand content presented visually, as well as users of assistive technology to interpret information communicated via the use of color.

Examples

Color Contrast

Text Under 18pts

Text under 18pts should have a minimum color contrast ratio of 4.5:1.

Great Color Contrast (21:1)
Adequate Color Contrast (4.5:1)
Insufficient Color Contrast (1.87:1)

Text 18pts or higher

Text 18pts or higher should have a minimum color contrast ratio of 3:1.

Great Color Contrast (21:1)
Adequate Color Contrast(3:1)
Insufficient Color Contrast (1.24:1)

Color-coding

Information should never be conveyed only using color. Any information denoted using color should also be denoted using an alternative, accessible method.

For example, the following list shows names of people invited to a party. Those who cannot attend are marked in red.

Name 1
Name 2 (not attending)
Name 3
Name 4
Name 5 (not attending)

If the web developer does not wish to make notes with additional visible text, hidden text can be used to accomplish the same goal. Text hidden with CSS will still announce itself, however, and can be detected using assistive technology such as screen-reading software.

Hidden Text Markup

Hidden text should be placed in a <span> tag with a CSS style visually-hidden to convey information that is conveyed using color.

See <span class="visually-hidden"> on lines 10 and 13 below:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Use Color Carefully and Avoid Sensory Dependend Instructions - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
<p>The following list shows names of people invited to a party. Those who cannot attend are marked in red.</p>
<ul>
  <li>Name 1</li>
  <li class="notAttending"><span class="notAttending">Name 2 </span><span class="visually-hidden">(not attending)</span></li>
  <li>Name 3</li>
  <li>Name 4</li>
  <li class="notAttending"><span class="notAttending">Name 5 </span><span class="visually-hidden">(not attending)</span></li>
</ul>
</body>
</html>

Best practices

Check that any text smaller than 18 pts has a minimum color-contrast ratio of 4.5:1
Verify that any text larger than 18 pts has a ratio of 3:1
Confirm any information conveyed through the use of color is also communicated via other accessible means

Checking for correct usage

Use a color-contrast checker so that content meets the minimum color-contrast requirements.
- There are many free color-contrast checkers available online.
Turn off all style sheets.
- If all of the information remains clear, no information is conveyed solely through the use of color.

Relevant standards

The Web Content Accessibility Guidelines (WCAG) are part of a larger accessibility initiative from the World Wide Web Consortium, the primary international standards organization for the Internet. These guidelines should be followed to strive for the best possible common accessibility.

WCAG 2.0 SC 1.4.1 - Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

WCAG 2.0 SC 1.4.3 - Contrast (Minimum)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.