Skip to Main Content
UWM Libraries Homepage

Accessibility Checklist

This guide contains major best practices for creating accessible online content. This guide used to be part of the LibGuides Editor training but has become a standalone guide.

Color and accessibility

Color and Accessibility 

Color can be a helpful tool, but it can be problematic because users experience color differently—this may be through colorblindness, using a screen reader, or use of another device which may impact how color appears. Color should never be used as the only way to distinguish an object or text's meaning. 

Color Dos and Don'ts

  • Do: Use LibGuides defaults— black text on a white background
  • Do: Test color elements for legibility using a Colorblindness Simulator. 1 in 20 people experience colorblindness of some kind. 
    • Recommended: Coblis Colorblindness Simulator linked in the "Resources for Accessible Use of Color" box 
  • Do: Test contrast of color elements in LibGuides to make sure they meet the minimum contrast ratio described by WCAG 2.1 AA standards
    •  7:1 for normal (paragraph Text)
    • 4.5:1 for Large text
    • 3.1 for graphics and interface elements
      • Recommended: WebAIM Color Contrast Checker linked in the "Resources for Accessible Use of Color" box
  • Do: Use textures or shapes in place or or along with color to increase accessibility 
  • Don't: Use color as the only way to communicate meaning
  • Don't: Use shades of red or green. These colors can be challenging to differentiate for many people with colorblindness. 

Examples of Using Color in LibGuides

Communicate Information with more than color alone

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

Use high-contrast color combinations to improve legibility

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