Flyout Menu

LXD Style Guide

iPD’s Guide for Course Design & Development

Color Contrast

Standard

The standard with which Michigan Virtual courses need to comply.

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement.

Alignment

WCAG

2.1 AA Standard 1.4.3 Contrast (Minimum)

 

Requirements

What exactly do course developers need to include in order to comply with this standard?

Michigan Virtual courses must comply with the following color contrast ratios:

  • Text and images of text with a font size less than 18pt or 14pt bold must have a contrast ratio of at least 4.5:1.
  • Large text and images of text with a font size more than or equal to 18pt or 14pt bold must have a contrast ratio of at least 3.1.
  • Decorative text and logos do not have contrast requirements.

 

Implementation

How can course developers implement this standard? What is the process for doing so?

  1. Identify the hex codes of the foreground and background colors by looking at the brand guidelines or style sheet, or by using a browser add-on such as:
    • Chrome:
    • Firefox:
      • Go to settings > Select Web Developer > Use the Eyedropper feature
  2. Find the contrast ratio between two colors by:
    • Using the Accessible Colors website
    • Viewing the CDS notes in the Wrike Task for the project titled, “Check Brand Standard Accessibility.”

Resources

What resources would help a developer implement this standard appropriately?