ECOMMERCE
Poor text contrast on ecommerce hero banners (and how to fix it)
Hero copy over busy photography hurts readability, accessibility and CTA clicks. Practical ways to guarantee contrast on any image.
By VISIBI Ecommerce team·Reviewed by Adnan Khan, Co-founder & CEO·Updated 29 September 2026·5 min read
QUICK ANSWER
Hero copy over busy photography hurts readability, accessibility and CTA clicks. Practical ways to guarantee contrast on any image.
FROM OUR ENGINEERING WORKREAL CASE
Hero copy didn’t always stand out from the background photo, affecting readability, accessibility and likely CTA engagement.
KEY TAKEAWAYS
✓WCAG recommends at least 4.5:1 contrast for normal text.
✓Busy images make contrast unpredictable across devices.
✓Overlays, text panels or separate text areas solve it.
Why it matters
If shoppers can’t read your offer, they won’t click it. Poor contrast also fails accessibility requirements.
RELATED GUIDEGoogle Merchant Center feed optimisation: fix disapprovals and win more Shopping clicks → More sales from the same traffic?Research-led CRO, built and shipped by our developers.Get a free CRO audit →Fixes
- Add a gradient or solid overlay behind text
- Place text on a solid panel
- Choose images with calm areas for copy
- Check contrast on mobile crops too
- Use live text, not text baked into images
Common mistakes to avoid
✕Choosing a platform on licence price instead of total cost of ownership
✕Launching a new site without an SEO redirect plan
✕Adding extensions and apps without checking performance or security
✕Leaving upgrades until peak season
HOW VISIBI CAN HELP
How we help with ecommerce
01DiscoverRequirements, integrations and total cost of ownership mapped up front.
02Design for conversionUX decisions backed by data and CRO experience.
03Build & migrateCertified developers, SEO-safe migrations and full testing.
04Support & growPatching, monitoring and continuous improvement after launch.
Get a free CRO audit →Free · No obligation · Reply within 24 hours
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text under WCAG AA.
Is text in images bad?
Yes for SEO, accessibility and responsive layouts.
Can you audit accessibility?
Yes, as part of CRO and UX reviews.
AK
Reviewed by Adnan Khan · Co-founder & CEO25 years growing digital businesses across search, AI visibility and ecommerce. Written by the VISIBI Ecommerce team.Meet the team →
RELATED SERVICES