How do I use accessible color contrast in my course materials?

This wiki guide explains what color contrast is, why it matters for all learners, and how to ensure your course materials meet WCAG 2.2 color contrast standards.

Best Practice Tips

• Color contrast issues are among the most commonly flagged accessibility problems in course materials and are flagged by UDOIT scans.
• Never rely on color alone to convey meaning (e.g., “required fields are marked in red”).
• Always pair color cues with a text label, symbol, or pattern.
• You do not need to redesign your materials from scratch. Small adjustments — darkening a font color or changing a highlight — can bring your text into compliance.
• Run a contrast check before finalizing any document, slide deck, Canvas page, or PDF.

Color Contrast Requirements

There are three categories of contrast to understand:

Note on Level AAA (Enhanced): WCAG 2.2 also defines enhanced thresholds of 7:1 for normal text and 4.5:1 for large text. While Level AAA is not strictly required, designing toward these higher ratios provides even greater accessibility for students with severe low vision.

Exceptions

The following are exempt from contrast requirements:

• Purely decorative images and text that carry no informational meaning. (These should be avoided or marked decorative whenever possible.)
• Logotypes (text embedded within a logo or brand mark).
• Disabled interface components that are visually inactive.

Common Color Contrast Mistakes to Avoid

1. Light gray text on a white background: This is the single most common contrast failure in course materials. A font color that appears “almost black” may still fall well below the 4.5:1 requirement. Use the WebAIM checker to confirm.
2. Colored text on a colored background: Overlapping two non-neutral colors (e.g., blue text on a green background, or yellow text on an orange background) often produces insufficient contrast even when both colors look vivid individually.
3. Text overlaid on images or gradients: Text placed over a photograph, textured background, or color gradient will have inconsistent contrast throughout the image. If you must overlay text on an image, place a solid, opaque color block behind the text to ensure consistent contrast.
4. Color-only feedback or labels: Marking required fields in red, flagging errors in orange, or identifying correct answers only with a green highlight all fail users who cannot perceive those color differences. Always supplement color cues with a text label (e.g., “Required”), a symbol (e.g., an asterisk *), or a pattern.
5. Thin or light-weight fonts at small sizes: Even a technically passing contrast ratio can produce difficult-to-read text when paired with a very thin or light font weight. Prefer standard or mediumweight fonts for body text, especially below 14pt.
6. Branded or themed slide templates: Pre-made presentation themes, including provided College branded templates — may use low-contrast color schemes for visual design. Always verify template colors before using them for instructional content.

Color Contrast Self-Check Questions

• Does my body text achieve a contrast ratio of at least 4.5:1 against its background?
• Do my headings and large text achieve at least a 3:1 contrast ratio?
• Do my charts, graphs, icons, form borders, and other non-text elements achieve at least 3:1?
• Am I using color plus a label or symbol—not color alone—to convey any meaning?
• Have I verified contrast on all slides, including those using a custom theme or background image?
• Have I checked any text that appears over an image or gradient?
• Did the Canvas Accessibility Checker and/or UDOIT scan return no contrast violations?

Accessibility Checks

Before publishing any instructional material, use a contrast checker tool to verify your color combinations. These tools take a foreground color and a background color and instantly calculate the contrast ratio, indicating whether it passes WCAG Level AA or AAA for normal and large text.

• NECO TLC | How do I build accessible course materials?
• WebAIM Contrast Checker: Widely used tool with color picker and immediate pass/fail results for all WCAG levels.
• Canvas: Use the Rich Content Editor to apply styles (headings, list formatting, alt text editor), then run the Accessibility Checker at the bottom of the editor (next to word count).
• Microsoft Word and PowerPoint: Run the built-in Accessibility Checker (Review > Check Accessibility) before saving the file. This tool catches missing alt text and slide titles, reading-order issues, and explains how to fix them.

Need Extra Support?

We are here to partner with you as you enhance your courses. If you run into technical issues or want a collaborative consultation on designing custom interactive modules, please reach out to our team: