Colors & Contrast

Body

Introduction

The use of color is one of the most important factors in making digital assets accessible. Color contrast is the difference in lightness (luminance) between foreground elements (such as text, icons, and chart elements) and their background, which affects how easily content can be seen and read. Color contrast impacts body text, headings, hyperlinks, text in shapes/callouts, highlights, and charts.

Why Use of Color Matters

Accessible use of color benefits people who have various types of colorblindness, have low vision, are neurodivergent, use older technology, or are viewing content in different lighting conditions. Low contrast is hard to read for many users (low vision, color blindness, migraines, glare, small screens). Good contrast improves readability for everyone.

Using Color Correctly

  • Readable text/background contrast: Avoid placing text on busy images, gradients, or patterns unless you add a solid background behind the text.
  • Color shouldn't be the only cue: Don’t use color as the only way to communicate meaning (e.g., “items in red are required”). Add text labels like “Required.” In infographics, charts, or diagrams, make sure color isn't the only indicator to differentiate elements. Use another visual element like shapes, cross-hatches, and labels along with color. 
  • Font sizes: Be cautious with light font weights and small font sizes.  Contrast problems get worse as text gets thinner/smaller.

Checking Color Contrast

Word & PowerPoint

  • Run Accessibility Checker and fix issues

    1. Review > Check Accessibility. MIcrosoft Word Ribbon with "Review" tab selected and "Check Accessibility" highlighted.

    2. On the right side, a side pane window will appear.

    3. If you have color contrast issues, you may see “Hard-to-read text contrast” with the number of issues. Note: results can vary by version and content type, and some contrast issues may not be detected automatically. Microsoft Word Accessibility Assistant pane with "Hard to read text contrast" warning highlighted.

    4. When you click through to see the details of the error, the accessibility checker suggests colors and other options that will fix the contrast issues. "Hard to read text contrast" menu showing suggested colors to resolve contrast issues.

    5. Notice as you change the document, the accessibility assistant updates and removes the flagged items

 

Google Docs & Slides

  1. Install Grackle (one-time setup per account)
    Grackle for Google Docs or Google Slides
    1. Open any Google Doc or Google Slides.
    2. Go to Extensions → Add-ons → Get add-ons.
    3. Search Grackle Docs or Grackle Slides.
    4. Click "Install" and approve permissions.
  2. Run Grackle to check accessibility

    1. Open the Google Docs or Google Slide (does not work with docx or pptx files that haven't been converted to Google formats).

    2. Extensions → Grackle Docs/Slides → Launch (If "Extensions" does not show, your document is likely in a Microsoft (.docx or .pptx) or PDF format). Google Doc with "Extensions" menu expanded and "Grackle Docs" selected.

    3. In the Grackle panel, color contrast issues are under the “Contents → High color contrast should be used”.

    • Unlike Word, Grackle does not suggest color options with good contrast.

    • Find an accessible color combination with the instructions in the next section of this document, or default to a U-M accessible color combination. Black and white will also always meet contrast requirements. 

Finding Accessible Color Combinations

There are many resources for finding accessible color combinations. U-M's Brand Office publishes accessible color combinations on the Brand & Visual Identity website. You may also use WebAIM's Contrast Checker page to determine whether two colors have sufficient contract to meet accessibility standards.  The tool includes a color picker that allows you to select colors from your screen and check their contrast ratio. 

When using the contrast checker, the foreground color is typically the color of the text, icon, or graphic element. The background color is the color behind that text or element. For example, if you have blue text on a white slide, blue is the foreground color and white is the background color.

Using the WebAIM Contrast Checker

  1. Go to the WebAIM Contrast Checker site.  
  2. Under the Foreground color section, Select the Color Picker bar to expand the drop down. 
  3. Use the eyedropper tool to select colors on your screen. WebAIM Contrast Checker tool showing color picker highlighted and eyedropper tool selected.
  4. Repeat the process for the Background color section. 
  5. Ensure the colors you selected pass for your use.  WebAIM contrast checker showing passing for both normal and large text.
    • Note that there are different requirements for normal sized and large text. The goal is to pass WCAG AA criteria.

Normal Text

  • Normal-sized text needs a contrast ratio of at least 4.5:1.
  • Regular text smaller than 18 pt (no smaller than 11 for documents and 16 for webpages)
  • Bold text smaller than 14 pt

Large Text

  • Large text needs a contrast ratio of at least 3:1.
  • Regular text 18 pt or larger
  • Bold text 14 pt or larger

Additional Resources

Details

Details

Article ID: 15365
Created
Fri 5/15/26 11:02 AM
Modified
Mon 5/18/26 9:23 AM