WCAG – 1.4.1 Use of Color (Level A)

1.4.1 Use of Color (A): 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)

Requirements

  • Color alone is not used to convey information (e.g. to identify form fields with invalid entries or the current step in a step indicator) or to distinguish between areas of a map or graph. Additional visual cues are used to provide the same information (e.g. icons, shapes, patterns, text).
    • Text identified by color as having special meaning has another indicator – a visible border and label, underline or other visual effect.
    • Information graphics and charts that use color as a key also provide distinctive non-color differences – hatching patterns or directly applied labels.
  • All links within blocks of text are underlined, and no other content on the page is underlined.
    • If links cannot be underlined and are identified via color alone, the contrast ratio between their color and the color of the surrounding text is at least 3:1, and their visual appearance changes (e.g. they become underlined) when they are hovered by the mouse pointer and receive keyboard focus.

Why is it important?

  • This ensures that people who are unable to see colors, or who have difficulty telling different colors apart, understand the content and user interface.
  • Colors can be difficult to distinguish in bright sunlight.
  • Screen readers do not detect color.
  • Some users will change color settings for their whole computer, such as applying a tint to help with reading.

Summary

  • Do not use color as the only way to convey any piece of information.
  • Color alone should not used to convey information (e.g. to identify form fields with invalid entries or the current step in a step indicator) or to distinguish between areas of a map or graph.

Common Mistakes

  • A form uses only color to indicate a required field.
  • Color-coding text or backgrounds to indicate essential content, pass/fail categorisation, etc.
  • Links are only distinguished from plain text by color and the color may not vary from the main body text.
  • Text alternatives that do not include information conveyed by color differences in the original image.
  • The error state of a input field is only identified by changing the color of its border.

Design Guide

Color is often used to show:

  • a tab is selected
  • a link is available
  • text is an error message
  • emphasis
  • charts and graphics
  • other meaningful information

Additional visual and non-visual methods of identifying information or meaning must be applied to complement the use of color:

  • Visual cues could be:
    • text complementing colors
    • text styles (such as underline, bold or italic)
    • patterns (in graphs or infographics, for example)
    • icons with suitable alternative text
    • border-with changes (to identify that a text input field is in focus, for example)
  • Non-visual cues, which are programmatically available to assistive technologies, could be:
    • visually hidden text
    • HTML element tags (such as aria-disabled for the Web)
    • suitable ‘Accessible Names’ for elements

How to style links?

  • It’s best for all links within blocks of text to be underlined, and no other content on the page to be underlined.
  • If links cannot be underlined and are identified via color alone, the contrast ratio between their color and the color of the surrounding text is at least 3:1, and their visual appearance changes (e.g. they become underlined) when they receive the mouse hover and keyboard focus.
    Note that this method doesn’t help users using touch screen devices
  • Links in a navigation menu do not need underlining, as their presence of a navigation menu makes it obvious that they’re links.

References

  1. Understanding Color Blindness
  2. Inclusive Design Tips: Presenting Information in Multiple Ways by Deque
  3. Article on underlining links and using :hover and :focus by WebAIM
  4. Accessibility Guidelines- Github.io