Is compliance killing design?
How we made howtech.uk WCAG 2.2 AA compliant without ruining our brand's style.
There's a widely held belief in design circles that accessibility is where good design goes to die. Muddy colours, boring layouts, beige everything – compliance as creative kryptonite.
We've just finished making our own site WCAG 2.2 AA compliant, and we can report: that belief is wrong. But we understand where it comes from, because our first attempt at fixing things nearly proved it right.
What we found when we audited ourselves
We build software and websites for regulated businesses, so we ran the audit you'd expect us to run on a client: every page, against WCAG 2.2 Level AA – the standard behind the Equality Act's reasonable-adjustments expectations and the public-sector accessibility regulations.
The honest headline: we didn't pass. Across the full site we found the same issues that affect most modern websites:
Invisible
Our footer LinkedIn icon announced nothing useful to screen readers. Ten team-profile links all read out identically as "LinkedIn", and our contact page announced raw code instead of "Email us".
Motion
An autoplaying hero video and auto-scrolling carousels, with no pause button anywhere. Worse, the carousels used cloned slides – so screen readers dutifully read every one of them out twice.
Trapped
Our hidden anti-spam field was invisible to sighted users but perfectly visible to screen readers. Anyone who filled it in – exactly the people it wasn't meant for – had their enquiry silently binned.
Colour
The big one. Our lime and orange text on white measured as low as 1.96:1 contrast – WCAG requires 4.5:1. Anyone with low vision, or reading a phone in sunlight, simply couldn't read it.
The mistake we made next
Our first fix was the obvious one: darken the brand colours. It was a disaster. Darkened lime on our light-lime panels looked muddy and read worse. Applied globally, it dulled exactly the elements that gave the site its energy. This is the moment most teams conclude that compliance kills design.
It doesn't. We just weren't looking at it from the right angle.
The insight: contrast is about pairings, not colours
No colour is "non-compliant". Only combinations are. Our bright lime (#B1C351) is unreadable as text on white – 1.96:1. The same lime on our charcoal (#2B303B) measures 6.74:1, sailing past the 4.5:1 requirement with room to spare. Our bright orange: 2.03:1 on white, 6.52:1 on charcoal. Nothing needed to be muddied. Things needed to be rearranged.
Bright lime on charcoal – well clear of the 4.5:1 WCAG AA bar for body text.
Bright orange on charcoal – vivid, energetic and fully compliant.
That became a three-line rule our whole design system now follows:
- Bright brand colours on dark panels – full saturation, fully compliant (lime on charcoal 6.7:1, orange on charcoal 6.5:1).
- On white, text is charcoal or black – the brights become backgrounds, cards and graphics instead.
- On bright backgrounds, text is black or charcoal – black on our lime measures 10.8:1, which exceeds even the stricter AAA standard.
The result is arguably a stronger design language than we started with: vivid stat cards on charcoal, colour used with intent rather than habit. Compliance didn't kill the flair – it forced us to be deliberate about it.
What else changed
Beyond colour: every icon link got a real name, the video got a pause button, carousels stopped auto-scrolling, the spam trap was hidden from assistive technology, heading structures were straightened, and the static snapshots our site serves to search engines were brought up to the same standard as the pages humans see. We also respect your system settings – if you've asked your device to reduce motion, we listen.
How we did it: AI for the auditing, a designer for the judgement
This site is built in Lovable – we've written before about what that workflow looks like. The accessibility work followed the same philosophy: AI where it's strong, humans where it matters.
AI did the relentless part. Every page crawled, every text/background pairing measured against the WCAG maths, every icon link and heading structure inspected, every fix re-verified against the live site afterwards – the kind of exhaustive, repetitive checking that humans do badly and machines do perfectly.
But not one change shipped on the machine's say-so. Every fix was reviewed by our designer, because a change that passes the contrast checker but cheapens the brand is not a fix – it's a different failure. Several AI-suggested changes were rejected and redesigned for exactly that reason (the global colour-darkening episode above being the most instructive). The standard we held throughout: the site must be accessible and look great. We refused to accept either at the expense of the other – and as the numbers on this page show, we never had to.
What we learned
Audit before you assume
We thought we were in decent shape. We found issues on most pages – including the word "Accessibility" rendered in a colour that failed accessibility standards. (Yes, really. We kept the screenshot.)
Never darken a brand to save it
Rearrange the pairings instead. The maths is unforgiving but it's also freeing: check any combination in seconds, and you know exactly what's allowed.
Accessibility is a regression problem
Our site passed, then new content quietly reintroduced failures within weeks. It's a practice, not a project – which is why we now check continuously, not annually.
Built for the 1 in 20
Roughly 1 in 20 of your visitors has a visual impairment that this work directly serves – and that's before counting everyone squinting at a phone in the sun.
The takeaway for your business
If your brand book is full of bright, light, energetic colour, you do not have to choose between your identity and the Equality Act. You have to know your numbers. That's a design discipline, not a design tax.
We help clients run exactly this process – audit, remediation, and a design system that keeps you compliant as you grow. If you'd like the unvarnished version of what it takes, we're happy to share – including the mistakes.
Accessible design, done properly
Whether you need an audit, a remediation plan, or a design system that stays compliant as you grow – we can help.
Related insights
The research behind first impressions, credibility and app retention.
The AI-assisted workflow behind this website – and this accessibility project.
Our current WCAG 2.2 AA conformance status and how to report an issue.