Guides
How do you fix text that disappears into the background?
Learn how to improve readability by fixing low-contrast text, supporting text on images, and meeting WCAG accessibility standards with simple design steps.
Clear text is essential for readable design
Readable text is a basic expectation, yet many websites unintentionally hide important information by placing text over busy images or low-contrast colours.
Good design must not only look polished — it must work for users on all screens, in all conditions, and with all levels of visual ability.
Low contrast creates hidden messages and accessibility failures
In the original design example, white text was placed directly on a high-contrast photo without any support. With no overlay, shadow, or container, the text became difficult or impossible to read for many users.
Even the secondary card failed WCAG 2.1 AA requirements. Its 2.07:1 contrast ratio fell well below the required 4.5:1 for normal text.
This meant key information and calls to action could be overlooked entirely.
Low contrast doesn’t just affect aesthetics — it blocks access to content and prevents users from completing important tasks.
Increase contrast and support text with simple techniques
Improving readability starts with strong contrast and structure.
In the updated version, the text placed over images now sits on a dark translucent overlay, making it clear and legible in any context.
The call-to-action card uses a clean black-on-white layout that meets WCAG AA contrast standards.
Practical steps include:
Adding a semi-transparent overlay behind text placed on photos
Ensuring text meets the minimum 4.5:1 contrast ratio
Using strong text–background pairs such as black on white
Testing designs with tools like the Stark plugin in Figma
Structuring layouts so icons, colour, and copy work together — not in isolation
These simple changes improve readability for every user and ensure your design meets accessibility standards without sacrificing visual quality.
You might find these helpful
A few related articles that build on what you’ve just read.
