Posted on by Ailin Le Bellot

Provide Contrast Between Text and Background

Quality Review Showcase

The Quality and High Quality online course reviews explore components proven to be best practices in online course design. This post showcases Quality item, “Color contrast between the text and background has an appropriate ratio (e.g., 4.5:1) to ensure the content can be easily viewed.”

Many people have difficulty reading text that does not have sufficient contrast relative to its background; that is, if the colors or brightness of the text and its background are too similar. Web Content Accessibility Guidelines (WCAG) 2.1 measures this contrast by a ratio of the relative luminance of the lighter color to darker color, ranging from 1:1 (e.g. white:white) to 21:1 (e.g., black:white). Providing a luminance contrast between text and its background of at least 4.5:1, in most cases, can make the text more readable for more people.

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

Fortunately, most mainstream word processors provide sufficient contrast in default settings, such as dark text on a light background, or vice versa. So, when using default or recommended color combinations in a mainstream platform, maintaining sufficient color contrast in content creation does not generally require extra steps.

Likelihood for insufficient contrast increases when changing from default colors or adding fill colors or highlighting, in which cases:

  • Ensure sufficient contrast not only in course pages, but in files (e.g., pdfs, presentation slides) as well.
  • Images of text, as opposed to real text, should also be kept in mind when considering contrast quality.
  • Use a color contrast checker to verify sufficient contrast. Free convenient options include:
    • The UDOIT tool in Webcourses@UCF can be used to check for (and fix) existing issues related to contrast. 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.
    • Canvas Accessibility Checker in the rich content editor can be used to identify and fix contrast and other potential accessibility issues.
    • WebAIM Contrast Checker can be used to calculate the contrast ratio between text and background, including in images of text, using a color picker.

Resources for More Information

What Does This Look Like in a Real Online Course?

Example 1: Amanda Groff, ANT2511, Human Species

When selecting a different text color, Amanda Groff chose a dark enough color (dark green, Hex #008000) that still has sufficient contrast to the default (white, Hex #FFFFFF) background, resulting in a luminance contrast of 5.13:1 (via WebAIM Contrast Checker), that exceeds the minimum of 4.5:1 for ease of viewing. See Figure 1.

Figure 1

Module 1 Details

Read Chapter 1.m, “Introduction to Biological Anthropology” thoroughly and “Bioarch and Forensic Anthropology: A Brief Introduction”
Chapter Objectives and Summary: Great for review! Contains important highlights from the Chapter
 Interactive tools/Video Support: Includes links to supplemental movie clips, full movies, games, and other interesting things related to module topics. Not required but might be helpful!
 Module Assignment: Participation Activity: Understanding Anthropology: 10 points.You must complete the assignment prior to taking the quiz!
 Module Quiz: 5 point mini quiz on the ChapterCompleting this quiz will release the following module

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

When selecting a different background for a header table row, Jo Smith chose a light gray (Hex #D3D3D3) background that has sufficient contrast (14.02:1) with the default black text (Hex #000000). See Figure 2.

Figure 2

Collaborative Research: Benefits and Problems (Lewis-Beck, Bryman, and Futing, 2004)

Potential BenefitsPotential Problems
• more creative approaches to the research due to multiple and differing viewpoints

• increase in ability to address larger problems

• improved research results through a team approach

• increase in publication acceptance

• increase in the number of citations

• increase publication in prestigious journals on collaboratively authored papers

• relationships and social dynamics can be very positive among collaborators.
• disagreements regarding the order or inclusion of authors

• challenges in allocating credit fairly among different team members

• concerns about social loafing when a team member is perceived as not carrying through on their responsibilities

• differences in values, experiences, norms, and communication styles among diverse team members may cause conflicts

• power and status differentials among members of the research team will exacerbate problems

• problems not addressed satisfactorily diminish the benefits of team research.

Reference:

Lewis-Beck, M. S., Bryman, A., & Futing Liao, T. (2004). The SAGE encyclopedia of social science research methods (Vols. 1-0). Thousand Oaks, CA: Sage Publications, Inc. 

Example 3: Stacey DiLiberto, HUM2020, Encountering the Humanities

Stacey DiLiberto used custom graphics to indicate action items in her course. Action icons in this theme have white text  (Hex #FFFFFF) on a dark purple (Hex #5A1E5C) background with a luminance ratio of 11.83:1, calculated in WebAIM Contrast Checker. See figure 3.

Figure 3

Custom graphics created by CDL Graphics

Navigation Menu