Creating an accessible website requires a number of key components. Each has a role to play in ensuring that all users can navigate and consume site content.
Perhaps color is the basic element. Because, regardless of the other steps you take, an inaccessible color palette greatly undermines usability. Even visually impaired users will have a difficult time reading and understanding text.
As designers, we tend to design features in a way that we think looks good without always thinking about the consequences. Clients may also demand that they use brand colors – even if they are not accessible. There are many issues that can be avoided as a result.
The good news is that meeting WCAG color contrast standards is not very difficult. As we will show, testing color contrast ratios only takes seconds. From there, any necessary adjustments are a question.
In fact, the most important step is to take the time to test. Forward with us!
When to Test Color Contrast Ratios
In a perfect world, color contrast ratios should be tested right from the start of a project. That means applying a compliant color palette in website mockups and style guides. That way, you can be confident that your design will be extremely successful.
With permission, you may have lost the boat on current projects. But the color scheme of the site can be tested at any time. And thanks to the power of CSS, the process of repairing any non-compliant combinations can be quite simple. A search and substitute may do the trick.
However, accessibility is an ongoing process. This is especially true on sites where new content is added regularly. If clients have access to a WYSIWYG editor and the ability to change colors, routine testing may be required.
It also highlights the importance of educating clients on accessibility and best practices. The use of contrasting colors will save time and money to repair. Once clients understand the issue, they will be more likely to avoid any misguided decisions in this area.
Website Color Contrast Ratio Tools
Now that the “when to test” is gone, let’s focus on the “how” part of things. The first step is to find a suitable tool for passing tests.
There are several tools available on the web. However, we will quickly focus on a pair. One is a manual tool (WebAIM Contrast Checker), and the other (WAVE Tool) is automated.
WebAim Contrast Checker
This tool is as simple as testing your site’s contrast ratio. Enter the HEX codes for your background and foreground colors, and WebAIM Contrast Checker will calculate the exact ratio.
Based on your score, the tool will report whether or not you meet WCAG AA or AAA standards. If not, you can use the color sliders to change the colors until you get a pass grade.
WAVE Web Accessibility Assessment Tool
Enter the URL of your site and WAVE will automatically scan your site and consider a number of accessibility factors – including color contrast. Browser extensions are also available for Chrome, Firefox, and Microsoft Edge.
WAVE provides a lot of data – and there are times when it reports false positives. For contrast, this usually happens when HTML text is placed on top of an image background. Because the tool relies on CSS color values, there will be an error if text is light in color with no defined background color. So, you will want to do more investigation to verify its results.
Either of these tools will do the job. However, it is worth noting the limitations of automation tools. Sometimes a manual test will need to be part of the process.
Understanding the Standards and Resolving Issues
For most websites, the goal is to meet WCAG AA standards for “normal” text (below 14 points / 18.66 pixels). AAA standards are stricter, and even W3 documentation suggests that some content types may not meet the requirements.
If your Web site’s content areas meet these standards – bravo! If not, any questions should be simple enough to resolve.
For HTML and CSS, tweak your color combinations until they match or exceed the ratio (4.5: 1). If you are using an image background, you can use a tool like Photoshop or even a CSS filter to put things in order.
Perhaps the hardest part is convincing clients to use different colors. It is hoped that once they understand what is involved, they will be more open to change.
In addition, it is worth visually studying the elements you need to repair. There may be instances where you meet the requirements and the content is not yet as readable as it could be. Going for a higher contrast ratio can significantly enhance the user experience.
Color Your Website for Accessibility
Colors say a lot about a website. They help with brand recognition and set a mood. But they may have the greatest impact on accessibility.
And, unless you are using plain black-and-white normal, adherence to WCAG standards is not given. That’s where testing comes in.
I hope this guide will get you thinking about colors during your web projects. It’s best to start with an accessible palette, but even an old website can be turned upside down. Well worth the effort!
