Skip to Main Content

UWM LibGuides Training Site

An internal resource page used for training and getting started with LibGuides at the UWM Libraries.

Color and accessibility

Color and Accessibility 

Color can be a helpful tool but should not be used to convey meaning as not all users experience color the same manner. Color in LibGuides is effected by users' ability to perceive it- this may be through colorblindness, using a screen reader, or use of another device which may impact how color appears.

Before publishing:
  • Provide descriptive labels along with color
  • Provide an alternative to color through text
  • Use symbols instead of, or alongside, color
  • Avoid using red and green
    • These are a common color deficiency 

Use the guide review tools below to check your page for color accessibility.

Examples of Using Color in LibGuides

Color Only:
In this example, the graph is only using color to differentiate between the lines. This would not be understandable without the ability to perceive color.

Example of graph where color is the only method of differentiating between lines

 
Color and Symbols:
In this example, the graph is now using both color and symbol to differentiate between the lines. This is now perceivable by those viewing in color and those not.

Example of graph where color and symbols are used to differentiate between lines

 

To emphasize important text, use bold instead of color.

Example 1: Using red to convey importance

BAD: Read this article first

GOOD: Read this article first

Example 2: Choosing personal aesthetic  over accessibility

BAD: Important Reminder!

GOOD: Important Reminder

Low Contrast Ratio:
In this example, the box color and text color fail the accessible color contrast test. It is too difficult to read the white font on teal background. 

White text on teal background with a low contrast ratio

 

High Contrast Ratio:
In this example, the box color and text color pass the accessible color contrast test. It is possible to read the black font on the teal background.
Black text on teal background with a high contrast ratio

Additional Resources

Licensing

The contents of the Accessibility Tutorial may be reused with attribution. Please copy the following into new works based on the Accessibility Tutorial
Creative Commons LicenseAccessibility Tutorial by Board of Regents of the University of Wisconsin System is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.