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.
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.
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.
