Imagine that you designed a website from the ground up and then that work was completely lost to a percentage of viewers. Imagine that, worst of all: you didn’t even know it was happening. Right now, without you even knowing it, your viewers can be seeing a different website than you think. Hard work can get lost between the screen and your viewer’s eyes if you haven’t used a color palette with sufficient contrasting. If like me, you may or may not have found a color palette or two on Pinterest, read on.
Accessibility
Colorblind viewers may be seeing a whole different color palette than what you’ve selected. While most people have three sets of cones and rods in their eyes, allowing them to perceive the range of visible colors, colorblind viewers’ eyes may have only two sets of cones and rods. This makes it so there is less perceivable contrast between colors like green and red. With over 7% of the population experiencing some kind of colorblindness, that’s a lot of viewers to lose to what is essentially an error in translation.
“Well, they’re used to it,” you may think about those colorblind viewers. But the truth is that most of us aren’t walking around thinking about what we’re not seeing. Check out this colorblindness generator and see how dramatic certain differences can be. If your CTA color and background color aren’t separated by at least 2.5x color saturation, 8% of viewers may not be getting the experience you designed and/or engineered. That may not seem like a lot, but it could add up. Plus, why take the risk? That 8% could include serval important clients that would love to give you money. If only they could read your website…
If you’ve done government design work, it’s possible that you’re more familiar with these standards. In theory, all government websites are required to meet sufficient standards for contrast, but they often don’t.
The Work
Familiarize yourself with WCAG Accessibility Guidelines. These guidelines have three conformance levels from A-AAA. Then, be willing to adjust your color palettes! We know! We feel it too: the resistance to change a good design. But, remember if it really is a good design, it will stand up to scrutiny and will be usable by the largest number of people! We love this post from @thefuturishere on ways to improve color palette design. To learn more about tools and plug-ins that help manage ADA compliant design, check out this list and this one.
Making sure your website is accessible and attractive at the same time is always in your best interest. But don’t worry because you are not alone in trying to get it right. There are a lot of resources out there to help you find the right level of contrast for your site. Of course, if you don’t want to spend your time figuring it out, reach out to our design experts here at Avant8. We’re well versed in making sure websites are accessible.