When text disappears into the background

Good design isn’t just beautiful—it’s readable. We improved text clarity and accessibility by fixing poor contrast and removing reliance on images alone. Simple changes, inclusive results.

The issue

In the first example, the text overlays a high-contrast photo without any support—no background overlay, no shadow, no container. While the photo is beautiful, the white text is hard to read, especially for users with visual impairments or on lower-quality screens.

Even the second card on that screen fails contrast checks. With a 2.07:1 ratio, it doesn’t meet WCAG 2.1 AA standards (which require a minimum of 4.5:1 for normal text). The lack of adequate contrast makes it easy to overlook this key call to action.

An easy to use and well structured website form

The solution

In the revised version, we tackled contrast head-on. The text over the photo now sits within a dark translucent overlay, making it legible regardless of background color. The call-to-action card uses black text on a white background—simple, elegant, and passes all WCAG AA contrast requirements.

We used the Stark plugin in Figma to test and validate all changes.
The updated card meets a minimum 4.5:1 contrast ratio.
Icons, colour, and layout now work together to support meaning, not rely on each other.

Fix Summary:

Validated design with Stark plugin
Added a semi-transparent overlay** to text-on-image
Improved button and text contrast to pass AA standards
Enhanced legibility without sacrificing design aesthetics

View more UX tips at: www.mugs.studio/uxtips

Curious to see more?

Browse all our UX showcases for real-world ideas and solutions.

View other UX showcases

person finding it hard to use a website form

Why people quit your online forms

If your customers can’t fill out your form easily, they won’t. A poorly designed form is often the silent reason your leads, payments, or sign-ups never come through.

Accessibility

A person with visual impairment using a screen reader

Can everyone ‘see’ your images?”

Good design isn’t just about what looks great — it’s also about what’s understood* Many websites overlook how people read images using assistive technology like screen readers. That one missed detail can quietly shut out a whole group of potential users.

Accessibility