Use of Color
Examples and Best Practices | Resources
Excerpt from W3C: Understanding Success Criterion 1.4.1: Use of Color
Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color. [1]
Examples and Best Practices
The focus of this section of the guide is to ensure that color alone is not the only way information is conveyed. Some of the following examples and best practices may seem focused more on forms than LibGuides; however, they are included in this guide because forms may be embedded into your guides.
If you are using LibGuide forms (or those created on external sites such as Google Forms), you must use something other than color alone to indicate that a field is required.
Best Practice:
Note: Most programs will automatically add this content; however, if it doesn't, you need to manually add it to your form before using it on your guide or use another program.
Example:
Indicating a Requirement with Color Only
Incorrect Indication: Required fields are in red.
First Name
Correct Indication: Required fields are in red and marked as "Required".
First Name (required)
Correct Indication: Required fields are in red and marked with asterisk (*).
First Name *
Excerpt from W3C: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
[This guideline is] to avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision).
While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link. [2]
This topic is covered in more detail in the Links tab.
Example:
Indicating an Active Link with Color Only
Incorrect Indication: Underline indication removed from links.
Use the Research Guides available on the University Libraries website.
Correct Indication: Make certain that each link is identifiable by color and via some other methods (underlined, bolded, italicized, font family, etc.).
Use the Research Guides available on the University Libraries website.
Best Practice:
Important note: In the link example used, the underline element was specifically added. Many sites are set to highlight the link (i.e., underline the link) only when the user hovers over the link. However, "if the non-color cue only happens when the mouse hovers over the link or when the link receives focus" it still fails the guideline requirements. [2]
A current trend on many websites is to not highlight the link with anything other than color, and instead offer hover-based highlights by default. This approach is acceptable for a clearly indicated list of links, but it is not acceptable for links included a the body of text content.
Most of us have seen hand outs that include chart or graphs that are completely useless because they've been printed in black and white (or in color but with colors that are so similar they are difficult to differentiate). Adding patterns or textures to the examples you use on your guides will make it distinguishable (and usable) for ALL users.
Example:
Displaying Examples Using Color-Based Differences Only (chart with red/blue vs chart with patterns)
Incorrect Indication: Using color only.
(Click the image to open a larger version in a new tab.)
Correct Indication: Using color and pattern.
(Click the image to open a larger version in a new tab.)
This item is similar to Indicating a Requirement Using Color Alone. If you are using LibGuide forms (or those created on external sites such as Google Forms), you must use something other than color alone to indicate that a field is missing or there is an error in the field.
Best Practice:
Note: Most programs will automatically add this content; however, if it doesn't, you need to manually add it to your form before using it on your guide or use another program.
Example:
Highlighting Errors in Color Only
Incorrect Indication: Missing fields are highlighted in yellow.
Name
Number
Correct Indication: Missing fields are highlighted in yellow and indicated by an "Error" message.
Name
Number