Skip to Main Content

Accessibility Best Practices

Use of Color

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] The focus of this guideline is to ensure that color alone is not the only way information is conveyed.

Examples:

Color Indicating a Requirement

Incorrect Indication: Required fields are in red.

 
 

Correct Indication: Required fields are in red and marked as "Required".

 
Changing Styling to Remove Active Indications

Incorrect Indication: Using styling to remove the underline 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, etc.).

Use the Research Guides available on the University Libraries website.

Tip:
Important note: In the link example above, I had to specifically add an underline to the link. 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] Some sites, like LibGuides, do not highlight the link with anything other than color-based and hovering-based highlights by default.

Example of this guideline failure using default LibGuide settings:
Use the Research Guides available on the University Libraries website.
Displaying Examples Using Color-Based Differences Only (chart with red/blue vs chart with patterns)

Incorrect Indication: Notating using color only. (Mary's performance is indicated in red. Joe's performance is indicated in blue.)

Example bar chart using only colors to differentiate bars.

 

Correct Indication:Notating using color and pattern. (Mary's performance is indicated in red stripes. Joe's performance is indicated in blue checkerboard.)

Example bar chart using color and pattern to differentiate bars.

Highlighting Errors in Color Only

Incorrect Indication: Missing fields are highlighted in yellow.

 
  
 
 
  
 

Correct Indication: Missing fields are highlighted in yellow and indicated by an "Error" message.

 
 *Error - Required Field*
 
 
 *Error - Required Field*