Accessibility

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.

A badly design website form
A badly design website form
A badly design website form

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
An easy to use and well structured website form
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.

person finding it hard to use a website form
person finding it hard to use a website form
person finding it hard to use a website form

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

Accessibility

Accessibility

A person with visual impairment using a screen reader
A person with visual impairment using a screen reader
A person with visual impairment using a screen reader

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

Accessibility

Accessibility

© 2025 Mugs Studio Pty Ltd. All rights reserved.

© 2025 Mugs Studio Pty Ltd. All rights reserved.

© 2025 Mugs Studio Pty Ltd. All rights reserved.