This content originally appeared on DEV Community and was authored by patrick clancey
The EU's new accessibility recommendation are like that friend who always reminds you to label your Tupperware - everyone knows it's a good idea, but we don't always get around to doing it. Now, there's a deadline (June 28th, 2025, to be precise!). Many companies have already begun improving the accessibility of their websites. Since contrast often tops the list of common accessibility failures, let's delve into this particular challenge.
Introduction
The European Accessibility Act (EAA) - Directive 2019/882, which establishes a comprehensive set of accessibility rules for digital offerings within the EU market, is going to come into effect next year. The deadline for compliance with this new legislation is June 28th, 2025.
With this in mind, I'm going to take a look at some of the most common accessibility issues according to The 2024 report on the accessibility of the top 1,000,000 home pages and how to fix them.
In this post, I'll be looking at contrast, why it's important, who it affects, and how to fix it.
Low Contrast - Who Does It Impact?
A better question might be, who doesn't it impact? The group that won't be affected by low contrast are those using screen readers to access the website. However, for everyone else who relies on visual cues to navigate the site, contrast plays a crucial role. Therefore, it's safe to say that nearly all visually-dependent users will be impacted by the level of contrast on a website.
At some time or another, we all face issues with our sight, whether it's persistent (e.g., old age, hypermetropia), temporary (e.g., conjunctivitis, hay fever), or situational (e.g., sunny day, phone in low battery mode).
Having said that, people with colour blindness or other visual impairments are particularly affected by low contrast. It's important to follow the WCAG recommendations and ensure that our interfaces have sufficient contrast to be usable by everybody.
WCAG Contrast related Success Criterion
There are four WCAG SC specifically related to contrast levels, they are;
- WCAG SC 1.4.3: Contrast (Minimum) (Level AA)
- WCAG SC 1.4.6: Contrast (Enhanced) (Level AAA)
- WCAG SC 1.4.11: Non-text Contrast (Level AA)
- WCAG SC 2.4.13: Focus Appearance (Level AAA)
Testing for compliance
Firstly, we need to know what issues we have and where they are, so they can be prioritised. Thankfully, contrast is one accessibility issue that can usually be picked up by accessibility tools. There is a good list on Web Accessibility Evaluation Tools List. Ideally we want a tool like pa11y running against a dev server to surface issues way before they go live. For manual testing, a personal favourite of mine is the axe DevTools chrome extension. Also worth a mention is the stand-alone Colour Contrast Analyzer (CCA)
Once you have identified any low contrast elements, you can prioritise fixing them. Starting with elements commonly used across your site. For example, if you have a contrast issue with your global navigation that needs fixing ASAP. Same goes for any CTAs, like form buttons or link texts. And, as you are addressing contrast issues you may as well not pussy foot around with AA, go straight for AAA!
Addressing issues
On the good side, technically fixing contrast issues is easy work. Usually it's just a few simple changes to your CSS. The more difficult task is getting approval to make the changes in the first place! If your colour scheme is based on approved corporate colours and/or the designs have been "signed off", it's often a slow process to get approval make global changes to the colour scheme. So with the EU Accessibility Directive coming into force next year it's well worth getting the ball rolling in order to get your necessary updates live in time!
In my experience it's a good idea to offer some "ready-to-go" alternatives. As the site's product owner might not have time to fully digest the implications and impacts of contrast failures and come up with a solution, they will probably have time to look at three options and point at their favourite.
The first step is to explore some alternatives that meet the required contrast levels. Depending on what elements are failing, you'll likely find three or four viable options to consider.
Darken
If you have an issue with say a blue which is too light you can usually darken it, whilst still keeping the overall colour pallet. This won't work with colours like green, orange or gold as they don't darken nicely.
There are a number of theming tools like Theming Designer or Paletton.com
which you can use to extend your current pallet to include some WCAG compliant colour variations.
Complementary
You can expand the site's colour palette by finding some complementary colours which have higher contrast.
Look for colour wheel generators like Figma color-wheel or a matching colour generator like mycolor to get ideas.
Invert
You can try inverting the colours, or rather swapping white and black. For example if your issue is buttons that are a light colour with white text you can swap that round so the button is black with the light colour as the text.
Remove
The nuclear option. Remove the colour palette from the offending elements altogether. Falling back to generic grey scale. This might sound extreme, but, you can select greys that sit nicely within any colour pallet and easily meet the contrast requirements.
In the meantime
In the short term remove any CSS that is actively causing issues, for example check your CSS doesn't actively suppress the focus indicator (this was quite a common practise, so if you have inherited a code base, please check!).
/* remove anything that looks similar to these */
*:focus {
outline-width: 0 !important;
}
*:focus {
outline: 0 none !important;
}
Developers used to routinely remove the system outline so code similar to the above is still quite common. Read WCAG SC 2.4.13 Focus Appearance to get up to speed with requirements around the focus indicator.
It's worth checking when the user has requested High Contrast that your CSS is not overriding any important rules. Always a good idea to check this by enabling High Contrast on your machine to see what happens!
Implementing something is better than nothing. I recommend you pick your personal favourite solution and implement it within the CSS prefers-contrast: more media query.
button {
/* can't change this until the theme update is approved */
background-color: gold;
color: white;
}
@media (prefers-contrast: more) {
/* random example; */
button {
background-color: black;
color: white;
}
button:hover {
background-color: white;
color: black;
}
button:focus-visible {
outline: 2px solid black;
outline-offset: 2px;
}
}
/* or if you are using css variables */
:root {
--accent-color-1: gold;
}
@media (prefers-contrast: more) {
:root {
--accent-color-1: black;
}
}
At least users who have specifically asked for high contrast will get it. And it shows you are making an effort to address the site's issues.
In conclusion
Ensuring good contrast in web design is crucial for accessibility and usability. It affects everyone who visually accesses a website, whether they have permanent, temporary, or situational vision impairments. Adhering to the WCAG success criteria related to contrast not only enhances user experience but also helps meet the upcoming European Accessibility Act requirements. While technically simple to fix, these changes often require approval due to established colour schemes and designs. Therefore, it's important to start early, prioritize common elements, and aim for AAA compliance. Remember, there are various strategies to address contrast issues, from darkening colours and finding complementary ones to inverting or even removing the colour palette. In the meantime, avoid suppressing focus indicators and consider implementing high-contrast options for users who prefer them. Ultimately, improving contrast is about making your digital content more accessible and enjoyable for all users.
(Thank you to jan huber for the cover image)
This content originally appeared on DEV Community and was authored by patrick clancey
patrick clancey | Sciencx (2024-07-26T08:45:46+00:00) WCAG: Good contrast, good vibes!. Retrieved from https://www.scien.cx/2024/07/26/wcag-good-contrast-good-vibes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.