Skip to Main Content College of the Rockies
← BACK TO LEARNING COMMONS PAGE
Centre for Innovation in Teaching & Learning
CONTACT

Digital Accessibility

Use Colour in an Accessible Way

Colour adds visual interest and improves comprehension—but only when used thoughtfully. Accessible colour choices ensure that all learners, including those with low vision, colour deficiencies, or cognitive differences, can perceive and understand content equally.

Why Mindful Use of Colour Matters

When colour is misused, it can create real barriers for users. Some may struggle to read text, recognize instructions, or understand important distinctions.

Accessibility Barriers (H4)

  • Loss of critical meaning when information is conveyed through colour alone. 
  • Low contrast makes text difficult, or in some cases impossible, to read. 
  • Reduced usability and engagement, especially when visual cues are unclear. 

Feelings of frustration or exclusion due to inaccessible design choices. 

 

While good colour contrast helps everyone, certain groups are disproportionately impacted:

  • People with Colour Vision Deficiencies
    • May be unable to distinguish common colour pairs such as red/green or blue/yellow.

  • Individuals with Low Vision
    • Including those with decreased acuity, age-related vision changes, or reduced contrast sensitivity.
    • They may struggle to read subtle colour combinations or small text.

  • Users with Cognitive or Learning Disabilities
    • Colour-dependent cues may increase cognitive load if no other indicators are provided

 

Good contrast ensures that text, icons, and interactive elements are readable for the widest range of users.

Minimum Contrast Ratios (WCAG Requirements)

  • For regular text (under 18 pt or under 14 pt bold): Minimum contrast ratio of 4.5:1 
  • For large-scale text (18 pt or larger, or 14 pt bold or larger): Minimum contrast ratio of 3:1 

Note:

Images of text are harder to adjust for contrast. Avoid them when possible. If you must use them, ensure they are high-resolution and meet contrast requirements.

 

1. Use a Contrast Checker

  • Tools such as WebAIM’s Contrast Checker allow you to test foreground and background colour combinations to ensure they meet required ratios.

2. Choose High-Contrast Combinations

  • Light text on a dark background, or
  • Dark text on a light background

(Black and white offer maximum contrast.)

3. Avoid Problematic Colour Pairs

These can be especially difficult for colour-blind users:

  • Red & green
  • Blue & yellow
  • Any related shades (e.g., orange/green, purple/blue)

4. Ensure Text Remains Legible on Images

  • Text over photographs, gradients, or patterned backgrounds is often hard to read.
  • Use a solid background or add colour overlay to increase clarity.

 

Colour should never be the only way information is conveyed. People who are colourblind, those using high-contrast modes, or those printing materials in grayscale may completely miss meaning that relies on colour alone.

What to Do

Always pair colour with a second indicator, such as:

  • Text labels (e.g., “Required” or “Incorrect”) 
  • Icons or shapes 
  • Patterns and labels in charts and graphs 

Not everyone perceives colour the same way. Some users may never see the distinction, and assistive technologies do not announce colour.

Two project timeline examples comparing color-only labels with color plus text. The left example uses only color to show status—late, at risk, and on time—which becomes unclear in grayscale. The right example includes both color and text labels, making the status readable even in grayscale.

Important Note:

  • This does not discourage the use of colour or colour-coding.
  • Colour is powerful—but it must be supported by additional indicators.