We were checking one of our websites for accessibility issues when the tool we were using, the Accessibility Checker, flagged a number of issues with what would probably be an “insufficient contrast between text and background”.
This is a really common problem that we encounter a lot and it’s usually after the design stage that we realise these issues exist. In this case, there was first the contrast issue with the cookie banners, which we quickly fixed using a default design setting in the WordPress plugin.
Next an issue occurred with the text links – our website’s colour scheme had a hot pink/magenta on white. And whilst this was OK with us, and we could sufficiently see the contrast, the validator failed the website. So we asked one of our favourite AI tools, Perplexity, for an alternative text colour, including our #FF00FF magenta text and #FFFFFF white background in the prompt [Yeah, just looking at the hex code, the RGB values themselves are far too close in the red and blue channels – Ed]
The analysis we ran said:
For your specific case of #FF00FF (bright pink) text on a #FFFFFF (white) background, the contrast ratio is approximately 3:1, which does not meet the WCAG 2.1 Level AA requirements for normal text (4.5:1) or large text (3:1)
It then went on to point out:
To improve accessibility while maintaining a pink colour, you can use a darker shade of pink. For example:
-
- #CC00CC (darker pink) on #FFFFFF (white) has a contrast ratio of 5.37:1, which passes WCAG AA standards for all text sizes.
- #990099 (even darker pink) on #FFFFFF (white) has a contrast ratio of 7.63:1, which passes WCAG AAA standards for all text sizes
So now we had a new pink, #CC00CC to use instead. we ran the checker again and… it passed!
But this left us with a lingering question: the contrast ratio – it’s great that generative AI could tell us that from a prompt, but what if we wanted to create and test a colour scheme for a website design as we were building it? Where’s the tool to check contrast?
Luckily, our prompt included the answer and, exploring the URLs provided in the result, there was a link to WebAIM’s contrast checker.
WebAIM’s Contrast Checker
Now this little tool is simple but awesome. You just pop in your foreground and background colour codes, and it tests them, providing a visual numerical contrast ratio and whether your colour combination has passed, and at which levels of WCAG accessibility – AA or AAA.
What’s even better is that with the sliders provided within the tool, you can even tweak your shades to see which colours are closest to your originals. Whilst AI suggested we use #CC00CC instead of #FF00FF, the contrast checker tool actually highlighted the fact that our newest shade of pink would pass AA but not WCAG AAA levels.
However, by moving the slider to give us a slightly darker shade again, the first contrasting colour ended up being #9E009E
So we’ve gone from magenta/fuchsia through dark magenta, to an unnamed shade of pink that’s dark enough to provide sufficient contrast ratio with the white background to pass WCAG AAA accessibility checks. It’s not what we were looking for in our original design, but that’s brilliant for those who may have struggled with those colours. And knowing this now changes our perceptions and attitudes to colour going forwards. We will now integrate colour contrast checking into our design routine.
Right, on to the next accessibility issue…
If your website needs accessibility checks and fixes, and you need technical help, call us on 01252 692 765 or you can complete the form with your request.
