Resource: Text Over Images

A busy picnic layout with food, drinks, bags, and a checkered table cloth behind text that says "When Good Contrast Isn't Enough

When
Good Contrast
Isn’t Enough

A simple gradient background with the text "When Good Contrast Isn't Enough"

When
Good Contrast
Isn’t Enough

When Good Contrast Isn’t Enough

Text over photographs can look great, but it can also make content much harder to read.

Busy images create visual competition between the words and everything happening behind them. This can be especially difficult for people with visual, cognitive, neurological, or sensory disabilities.

Contrast Isn’t the Whole Story

WCAG requires sufficient contrast between text and its background. That is important, but passing a contrast test does not automatically mean something is easy or comfortable to read. Brightness, colour intensity, photography, font weight, shadows, outlines, and other visual effects can all influence readability.

Two designs can meet the same WCAG contrast requirement and still create very different reading experiences.

When Text Starts to “Buzz”

Some combinations of text, colour, and imagery can create an effect where the words appear to buzz or vibrate for some users..

Think about the visual intensity of neon signs in Las Vegas. Reading the name of a hotel or restaurant that way may be manageable. Now imagine trying to read an entire book that way.

For some people, this kind of visual intensity can cause immediate eye strain, difficulty maintaining focus, visual fatigue, dizziness, or actual physical pain.

The text may technically be visible. It may even pass WCAG contrast requirements. But if someone cannot comfortably sustain reading it, the design is still creating an accessibility barrier.

Better Design

When combining text and images:

  • Use text over photography sparingly.
  • Choose simple images with quiet areas behind the text.
  • Consider placing text on a solid or semi-transparent background.
  • Avoid combining busy images with heavy fonts, shadows, outlines, or other competing visual effects.
  • Check contrast, but don’t assume that more contrast always means more readable.
  • Test designs with people, not just automated tools.

The Takeaways

  1. Accessibility isn’t only about whether someone can technically read the words. It’s about removing unnecessary effort between the person and the information.
  2. Automated testing can tell you whether a design passes a rule. Human testing can tell you what it is actually like to use.

Learn More

WCAG.com: Content Over Images: How Does This UX/UI Trend Impact Accessibility?
A practical look at the accessibility challenges created when text and other content are placed directly over images, including readability, contrast, and visual complexity.

W3C: Understanding Contrast (Minimum)
Explains WCAG’s contrast requirements and why sufficient contrast between text and its background matters.

W3C: Text Over Background Images, Failure F83
Specifically addresses text placed over background images and how image details can interfere with letter recognition and readability.

Want a Second Set of Eyes?

Accessibility issues are not always obvious, especially when a design technically passes automated checks. The Infinite Mindset can help identify barriers that affect real people using your website.