Skip to Main Content

Accessibility Guide for Digital Content

Creating accessible content is not just for students with disabilities but benefits all learners. Learn how to design course content or documents to be accessible.

Overview

The main idea

Use color and font attributes appropriately to ensure clarity.

 

What's important?

Adequate color contrast is necessary to make colors or colorful text distinguishable. 

Highlighted text with poor vs good color contrast

 

Visual cues other than color alone—such as boldface, italics, or the use of asterisks—are best for making text stand out.

Color-dependent text vs text with asterisk

 

Color-blindness requires consideration.

Full-color image and another as viewed by green-blind person

 

Underlining implies that a hyperlink is present.

Underlined non-link text vs boldface text

Tool Tips

Understanding Color Contrast

Color contrast refers to the ratio of the foreground color to the background color. As determined by the Web Content Accessibility Guidelines—the standards created through collaboration among individuals and organizations around the world—accessible color contrast requires a ratio of 4.5:1 at the minimum for small text and 3:1 for large text. In the poor example at the top of this guide, the phrase "Planting Hydrangeas" is in too dark of a gray to contrast well with the royal blue. In the better example below it, the phrase is in a bright white, thus it has adequate color contrast.

You may use a color-contrast checker to help you determine whether the colors you wish to use meet international standards.

WebAIM Contrast Checker - A tool developed by Utah State University

Siteimprove Color Contrast Checker - A tool offered by the web development company Siteimprove

Working Around Color-Blindness

Generally, avoid using color alone for visual cues. If you are working with a specific color palette and need to ensure that everyone will be able to see the content more or less as designed, you may add an extension to your browser to see what your webpage would look like to someone who is color-blind. One example is Colorblindly, available for Chrome.