How Colour Contrast Failures Break NHS Accessibility: 1.4.3 and 1.4.11 Explained
We were recently approached by a clinical commissioning group in the NHS. They were concerned about the accessibility of their website, which had been inherited from another agency. Built in WordPress, the site followed a shared template used by multiple hospitals under the same trust. The goal was simple: improve accessibility on this one site, and those changes could be rolled out across the others.
It was a practical and cost-effective approach. Unfortunately, what they discovered through real accessibility testing was that the template contained serious contrast issues—ones that had gone unnoticed for years. These were not small styling problems. They were clear violations of both 1.4.3 wcag and 1.4.11 wcag, two of the most commonly failed accessibility checkpoints in existence.
This post looks at what those failures were, why they mattered, and how we helped this NHS group resolve them in a way that protected their brand and respected their users.
The Basics of WCAG Contrast Rules
When we talk about contrast in accessibility, we usually mean the visual difference between foreground and background. The most familiar rule here is 1.4.3 wcag, which deals with text contrast. It ensures that users with visual impairments—including colour blindness and low vision—can read content without strain.
There is also 1.4.11 wcag, which focuses on non-text contrast. This includes things like button borders, focus indicators, and icons. While 1.4.3 is about reading, 1.4.11 is about interaction.
Fail either of these, and you risk excluding a large number of users. Sadly, this is exactly what was happening on the NHS site.
What We Found: Real Failures in a Live NHS Template
From the moment we began testing, the issues were obvious. The homepage used pale blue text on a white background for several key call-to-action areas. That is a clear fail under 1.4.3 wcag, which requires a minimum contrast ratio of 4.5:1 for normal text. The actual ratio was closer to 2.0:1.
Another common offender was grey on grey. Navigation menus were styled in a way that might have looked elegant to designers, but they were unreadable to many users. These menus also failed to meet 1.4.3.
Even worse, none of the interactive elements met the requirements of 1.4.11 wcag. Links and buttons had no visible focus state. When using keyboard navigation, you could tab through the page—but there was no visual indicator showing where you were. This made the site unusable for anyone navigating without a mouse.
We also found toggles and tabs with insufficient contrast between selected and unselected states. This violated 1.4.11 and made it almost impossible for users to know what content was visible on screen.
The Impact on NHS Trust and Patient Experience
These issues had serious consequences.
Patients trying to book appointments, find contact details, or access guidance were being shut out—not because the information was missing, but because they simply could not see it or interact with it. The lack of visible focus states meant that users relying on keyboard navigation or screen magnifiers were left guessing where they were.
For an NHS trust, this was not just a technical oversight. It damaged credibility. Accessibility is a legal requirement under the Equality Act, and for publicly funded services, it is a matter of trust and inclusion.
That is why 1.4.3 wcag and 1.4.11 wcag are more than just abstract numbers. They are the difference between access and exclusion.
Fixing the Problem Without Breaking the Brand
One concern the NHS team had was that improving contrast might require ditching their colour scheme. The light blue and soft grey tones were part of their established identity, used across signage and leaflets.
We reassured them: it is entirely possible to meet 1.4.3 and 1.4.11 without abandoning brand guidelines. We tested several alternative shades of blue and grey that maintained the same visual identity while delivering the required contrast ratios.
Focus indicators were added to all buttons and links, with strong visible outlines that stood out without looking out of place. We also updated hover and active states to ensure that keyboard users could clearly see where they were at all times.
Our changes were tested by multiple disabled users, including people with low vision, screen magnifier users, and those navigating entirely by keyboard. Their feedback confirmed that the new version of the site passed both usability and compliance tests.
Lessons for Anyone Using a Shared Template
The problems uncovered on this site were not unique. Because the WordPress template was used across multiple NHS hospital websites, the same issues were being replicated again and again.
If your organisation uses a shared template, it is essential to have it properly tested by experts. Do not assume that because something “looks nice” or “follows brand” it is compliant.
If you are in doubt, check for 1.4.3 wcag and 1.4.11 wcag issues:
- Can all text be read easily against the background?
- Are focus states clearly visible when using the keyboard?
- Do icons and buttons stand out from surrounding elements?
If the answer to any of these is no, you may be locking out real people from critical services.
Final Thoughts
The good news is that contrast issues are among the easiest accessibility problems to fix. Unlike more complex code changes, meeting 1.4.3 wcag and 1.4.11 wcag often requires only a few styling tweaks and some care with colours and outlines.
Yet despite how easy they are to fix, they are also the most frequently failed criteria. That is why awareness matters.
If you work with NHS templates or inherited websites from other agencies, now is the time to check your contrast. You might be surprised what you find. And once you see it, you cannot unsee it.
If you would like help reviewing your site for these a