Accessibility overlays are often added to “protect” a carefully designed website. In reality, they can do the opposite - breaking layouts, clashing with your brand, and exposing deeper design problems. Oh, and they won't make your website accessible.
Accessibility overlays are often sold as an easy fix. Add a widget, tick the compliance box, move on. We’ve already written about why that promise doesn’t hold up from an accessibility point of view.
But there’s another layer to this that’s harder to ignore once you see it: accessibility overlays often make your website look worse. For us, there’s a particular irony in that. Many organisations turn to overlays because they’re trying to protect a carefully crafted (but not inclusive) design – only to end up undermining it the moment the overlay is used.
When a second design system is added in
At a visual level, overlays tend to sit awkwardly on top of a design rather than feeling like part of it. They introduce their own UI patterns, colours, spacing, and typography that rarely align with the brand system underneath. You end up with a site that has two competing design languages: the one you intended, and the one the overlay imposes.
When users activate features like text resizing, contrast modes, or font changes, then layouts can break, spacing collapses, the multiple features clash, and visual hierarchy disappears. What was once a considered design becomes unpredictable. This isn’t just a minor aesthetic issue, it affects how easily someone can actually navigate and understand the page.
One reason we find behind this approach is that organisations don’t understand how accessibility works or how these accessibility overlays work. They think that it changes how certain features work, but fail to take into account how that can actually change the design or how even some selections are inaccessible together.
The illusion of protecting your design
There’s a deeper problem in how overlays treat design as something separate from accessibility. Good accessible design isn’t about toggles or after-the-fact adjustments; it’s about making decisions early so that colour contrast, type, spacing, and interaction patterns work for as many people as possible by default.
Overlays bypass that thinking. They assume you can design for a narrow ideal user and then “patch” the experience later. But when those patches kick in, they often override the very design decisions teams were trying to preserve. The result is a kind of visual contradiction: a polished interface that only looks good if certain users don’t need to change anything.
It’s also worth being honest about scale. A significant proportion of your audience will have some form of access need – whether that’s permanent, temporary, or situational. Designing without that in mind doesn’t just exclude edge cases; it risks excluding a meaningful share of the people you’re trying to reach.
And accessible doesn’t mean bland. Some of the most effective, visually engaging websites are also the most inclusive, because they’re built on clarity, hierarchy, and thoughtful interaction. Design is there to do a job. If that job is to drive sales, enquiries, or engagement, then ignoring accessibility isn’t a creative choice – it’s a commercial blind spot.
What users actually experience
From a user’s perspective, accessibility overlays create friction that’s both functional and aesthetic. Accessibility features shouldn’t feel like a separate mode you switch into at the cost of the site’s usability or appearance.
When activating an overlay leads to clashing styles, broken layouts, or intrusive controls, it sends a subtle message: this experience wasn’t really designed with you in mind. People notice when they’re being accommodated as an afterthought, and it affects trust just as much as usability does.
We’ve seen websites talk upfront about accessibility, but then use an accessibility overlay that acts as a complete contradiction (the below image is a perfect example of this – if you can read the text, it says they have a “high-quality, inclusive and accessible co-working space”…). It will immediately alienate your users. While looking shocking at the same time.
Designing it right, from the start
There’s a key takeaway for us and hopefully you here: it’s that accessibility and design shouldn’t be in conflict – but shortcuts can put them there. The effort it takes to design and build accessibly from the start is exactly what prevents these problems later.
Overlays don’t just fall short technically; they expose the gaps in the thinking behind them. And in trying to protect a design, they often end up revealing how fragile or poor it was to begin with.
