Way, way back in the year 2015 – which in the world of the internet was about a millenia ago – I wrote an essay about color and the complexity of how it is selected and implemented into the work we produce. In the essay one of the topics I briefly addressed was in regard to the relationship between color and site performance. And now, with the rise in ADA (Americans for Disabilities Act) scrutiny on sites by both watchdog groups and Google’s Page Speed Insight Tools, the answer to the question about color and performance is even more clear.
CAN COLOR AFFECT SITE PERFORMANCE?
Even in 2015, I (along with many other designers out there in the universe) was already focusing on color within the usability spectrum. But with some admitted backpedaling and an ‘out’ when we would get pushback from our clients. In my original essay, I wrote;
“However, like in all things web design, there are some caveats and outlying factors we should, as designers, consider.”
- Me, 2015
While most of us were more than willing to deviate from color for usability for the sake of branding – and quite honestly, to avoid the inevitable fight that would occur with the marketing department of said company – this avoidance should no longer be the case. As designers, we have a responsibility to educate our clients about the purpose, importance, inclusion, and implementation of the ADA guidelines. Subsequently, this responsibility may also include an update to their branding color schemes to include an alternative swatch set specifically for online marketing efforts.
While there are still caveats and outlying factors we need to consider as designers, those things are not within the company branding itself, but rather, the ADA considerations we as designers are compelled to include when selecting color for a company’s online marketing efforts.
Too often, while surfing online, I come across sites that need some serious help when it comes to implementing ADA into their sites. I can’t tell you the number of times I see sites with body copy that are both too small and that use a color that is too close to the page’s background color. Or a logo that is virtually unreadable because of an unwillingness to simply reverse the color of the element.
In regard to performance, the answer is simple; When we improve readability through size and color adjustments, there is an improved usability for end-users. And when we improve the usability for end-users, they tend to stick around and not immediately bounce off the page, thereby improving the overall site performance.
Simple, right? But let’s back up a bit and start with something a little more basic, shall we?
What is ADA Color Compliance, Anyway?
For the longest time, we as designers really didn’t bother to consider much beyond “does this site fit the company’s branding?” and / or “does this site’s color scheme look cool?” when it comes to color usage. And while ADA has been around since the early days of the internet, the first ADA lawsuit (National Federation of the Blind v. Target Corp.(1)) wasn’t filed until 2006, and focus on ADA really didn’t hit its stride until Google added Accessibility to its Page Speed Insights tools and began using this score (in addition to the other metrics) to determine placement in search results.
ADA in respect to color usage is simple and easy to integrate into site projects. It’s determined by a contrast ratio(2) as set by the WCAG2 guidelines signed into law in December 2008. As designers, we should always be hitting the AA metric. And while AAA is a great goal to strive for, there are an additional 28 requirements(3) above AA, which can be extremely difficult to achieve, so the Google accepted (and measured on GPSI) standard is currently AA.
While there are great tools out there to help you check contrast, particularly the WebAIM CC Checker and the Accessible Color Generator (which provides both a check and alternative suggestion if your color set isn’t compliant) the ratio we need to follow to hit the AA metrics is as such:
- Normal text (16-18 px): 4.5:1
- Large text (18.66 px + bolding or larger): 3.1:1
- Graphical objects (buttons, etc.): 3.1:1
You can also use the WAVE tool, powered by WebAIM or the Color Contrast Accessibility Validator to check an existing site for contrast errors. Both are free and can provide a lot of insight when researching an upcoming project or checking a work in progress. Combining these with the Contrast Checker and Generator can really help to supercharge your review analysis and provide clear data when pitching to your client.
Selecting An Alternative Color Scheme
Obviously, when crafting original branding for a new client, you can start off with ADA considerations baked into the options that you provide and then build the remaining brand guidelines with ADA top-of-mind. But when dealing with a company with existing branding, adding an online-only secondary color option is something that they should be able to get on board with.
Conclusion
Providing that we as designers are working within the existing color family, and that we are crafting a clear explanation to the client as to the purpose of the alternative scheme, implementing an ADA-based color scheme will be a benefit to all involved (and even better, the end user).
. . . . . . . . . . . . . . . . .
Citations:
1 National Federation of the Blind v. Target Corp: http://tinyurl.com/bddfa4hv
2 WCAG2 Contrast Ratio, explained: https://webaim.org/articles/contrast/
3 The differences between A, AA, and AAA, explained: http://tinyurl.com/2p8khts2