Mobile Accessibility Bible
DAC Accessibility Specialist
iOStext-typographyBeginner

Ensuring Visual Accessibility with Colour Contrast

Proper colour contrast is crucial for making text, icons, and other interface elements clear and readable to all users, including those with low vision or colour blindness.

🎯 Why It Matters

People with visual impairments often struggle to distinguish text or icons that don’t stand out sufficiently from their backgrounds. Low-contrast designs can render critical interface elements essentially invisible. Maintaining a strong colour contrast ensures that users can always read and interact with important information—whether they’re outside in bright sunlight, have a form of colour blindness, or simply prefer higher contrast settings for comfort.

đź’» Implementation

Incorrect Code Example: Low Contrast Text

Demo Description

Here, we compare a low-contrast “before” scenario to a high-contrast “after” fix.

Implementation

Text("Discount Sale!")
    .foregroundColor(Color.gray)    // Very light grey
    .padding()
    .background(Color.white)         // White background, insufficient contrast

Code Explanation

In this example, the light grey text on white background can be difficult for users with low vision or colour perception issues.

Correct Code Example: Improved Contrast

Demo Description

Now let’s compare the previous text to this one with stronger contrast

Implementation

Text("Discount Sale!")
    .foregroundColor(Color.black)    // Stronger contrast
    .padding()
    .background(Color.white)

Code Explanation

In this snippet, setting the text colour to Color.black and the background to Color.white creates a high-contrast combination that improves legibility. This helps users with low vision or colour blindness perceive the content more easily, supporting WCAG guidelines for sufficient contrast.

âś… Best Practices

Do's

  • âś“Use sufficient colour contrast between text and background (minimum 4.5:1 for body text, 3:1 for large text)
  • âś“Ensure non-text elements like icons and buttons also have adequate contrast
  • âś“Test with screen readers and high contrast modes
  • âś“Provide clear feedback for user actions using both colour and text or icons

Don'ts

  • âś—Rely only on colour to convey information (use text, patterns, or icons as well)
  • âś—Use low contrast combinations (e.g., light grey on white, red on black)

🔍 Common Pitfalls

Poor Contrast

Text or icons blending into the background, especially in light/dark mode transitions

Colour-only Feedback

Error messages or states communicated by colour alone

Switch Control

Ensure high-contrast focus indicators are visible

Dynamic Type

Verify text scaling doesn’t reduce contrast or cause truncation

Dark Mode

Check that all colour pairs maintain contrast across themes

🧪 Testing Steps

  1. 1Check colour contrast: Use tools like Contrast Checker or Accessibility Scanner
  2. 2Confirm: text and UI elements meet WCAG 2.2 contrast ratios
  3. 3Test in light and dark mode: to catch theme-specific issues