Teaching & Learning Resources

What is Color & Contrast? #

Color and contrast play an essential role in how digital content is perceived. Color refers to the hues you select to style text, icons, charts, or backgrounds, while contrast refers to the difference in brightness between elements—such as the difference between text and its background.

---

Why it matters #

For many users, poor color and contrast choices create serious barriers:

• Legibility issues: If text doesn’t stand out clearly from its background, it may be difficult—or impossible—for some readers to see.
• Color blindness: Roughly 1 in 12 men and 1 in 200 women worldwide experience some form of color vision deficiency. If an interface depends on color alone—such as using red and green to signal “stop” and “go”—those users may miss important information.
• Situational limitations: Even users with no vision impairment benefit from good color and contrast. For example, high-contrast design helps people read outdoors in bright sunlight, or in low-light situations like dim classrooms or lecture halls.

Without proper attention to color and contrast, users may not be able to perceive critical instructions, warnings, or data visualizations—barriers that a screen reader alone cannot fix.

---

Best practices #

Contrast #

• Maintain a minimum contrast ratio of 4.5:1 for normal text.
• Large text (18pt+ or bold 14pt+) can meet a lower ratio of 3:1.
• Use tools like the WebAIM contrast checker
• Avoid placing text directly over images; if necessary, add a solid or semi-transparent background.

Color #

• Don’t use color as the only way to communicate meaning. Pair it with text, labels, icons, or patterns.
• Use consistent colors for interactive elements, such as links and buttons.
• Check your design in grayscale or with a color blindness simulator when possible.
• Mark required fields, warnings, or categories with both color and another visual cue (e.g., Required + red asterisk).

---

Examples #

Contrast #

The example below shows two color combinations: one that has a low contrast ratio and one that has a high contrast ratio.

Color #

Good color usage example:
The example below uses both color and a symbol to convey importance.

Poor color usage example:
The example below relies only on color to convey importance