Provide Alternatives When Using Color to Convey Meaning

Color is a powerful element of online course design that can be used to present and differentiate content in text or graphics. When using color to indicate information, be sure to convey the meaning in an alternate way as well for users who have difficulty perceiving color.

What are Some Ways your Online Course can be Designed to Meet this Standard?

• Color can be used to enhance engagement and learning for many users, so first, don’t avoid using color in your teaching or course design.
• When using a different font color or background color to emphasize text, use both visual and non-visual methods.
  • Add another visual element in addition to font color or highlighting, such as bold or italics styling, for users who have difficulty perceiving color. Also use a non-visual method, such as adding the word “Important:” (or similar), before the text with color to emphasize text for users who need screen readers. This benefits all users.
  • Avoid adding an underline to emphasize text because underlining is so strongly associated with a hyperlink.
• When using color to convey meaning, such as in a color-coded chart, provide the information in real text (not just images of text, such as in data labels) as well.
• When creating a hyperlink, ensure the linked text is underlined in addition to having a colored font to indicate the hyperlink.

What Does This Look Like in a Real Online Course?

Example 1: Sharon Woodill, IDS4934, Interdisciplinary Studies Capstone Experience

To emphasize text that is especially important, Sharon Woodill added a background color with sufficient contrast to highlight the text. She also bolded the text and added “Important:” before the text. The extra visual of bold styling and the “Important:” text element in addition to color support all students in the course to pay special attention to the information.

Important: Regardless of how you choose to submit this assignment, please make sure that each person in the group is listed clearly at the top of the submission.

Example 2: Jo Smith, PAD6741, Research Integrity for Research Administrators

When providing a color-coded chart to display data, Jo Smith provided in text the information students needed to comprehend from the chart. See Figure 1.

Respondents were asked to rate their level of agreement with the statement, “The sessions/networking strengthened my ability to conduct or participate in research.” Sixty-two (62) respondents provided feedback. Fifty-six (56) either strongly agreed (61%) or somewhat agreed (29%) that the conference improved their ability to participate in research. Three (5%) respondents were neutral. Three (5%) either strongly or somewhat disagreed.

Resources for More Information

• Use the UDOIT tool in Webcourses@UCF to check for (and fix) existing issues related to color. While in UDOIT, you can check for and fix other accessibility issues as well. Note that UDOIT scans only Pages, Assignments, Quizzes, etc., in Webcourses@UCF; it does not scan your course files (e.g., Word docs, PDFs, PPTs). So, course files need to be reviewed for accessibility issues separately.
• Refer to W3C Web Accessibility Initiative Understanding Use of Color for more details and tips.
• Refer to Web Accessibility in Mind’s (WebAIM) Use of Color  for more details and tips.
• Enroll in Digital Accessibility Basics in Webcourses@UCF for information about UCF’s Digital Accessibility Policy and strategies to make content more accessible.
• Refer to Accessibility at UCF: Color for more details and tips.