An easy accessibility win - Erin Weigel
What Erin covers:
- Web content accessibility guidelines (WCAG) compliance
- The ideal color contrast ratio for WCAG compliance
- How to determine the current color contrast ratio of your calls to action (CTA)
Click below to read the transcript.
An easy accessibility win - transcript
Hey everyone, my name is Erin, and I'm one of the principal designers at booking.com. I'm here to share with you all today a tip that I learned from my experience leading product design and development teams at booking, that are responsible for our design system and our product accessibility. And go figure, the tip that I'm going to share with you all today on how to not only make your product easier for customers but also improve the bottom line of your business, has to do with... ♪ Da da da da ♪ accessibility.
So, broadly speaking, I recommend to everybody that you make your products WCAG compliant. What does that mean? It means web content accessibility guidelines, and you can read all of those guidelines at w3.org. You see that there's a lot of robust documentation on practical tips that you can do to make sure that your product is usable for people with different types of impairments, be they motor impairments, audio impairments, visual impairments, cognitive or neurological impairments. Go ahead and check that out.
But this is supposed to be a very short talk with an easy tip.
So, the first step that you should take on the journey of making your products WCAG compliant is to begin by improving the contrast ratio of the colors that are on your products, because it's a pretty easy win.
4.5:1 is the recommended contrast color ratio for normal sized texts on products. Let's dig into a practical example so you know how to understand what is the color contrast ratio of different elements on your product, and where's the best place to start other than your CTAs, because they're often one of the most impactful ways to not only improve and make your product easier for customers to use, but also to see a conversion increase. So, you know, buttons and links and stuff.
We're going to start by improving the color contrast ratio of the background color to the text on top of it, of our buttons. Practical example, we'll use one of my favorite products, Hotjar here, to see what the color contrast ratio of their buttons on their product is or are.
Let's go ahead and select this element here. I'm going to double click on top of that, or right-click, and then inspect the elements. And you'll see that Chrome has opened a drawer and I'm able to navigate over here to where I see a background color. I'm going to get this little number-letter code, it's called a hexadecimal code, and you'll see that it's this beautiful pink brand color that they have, and I've now copied that to my clipboard.
Now I'm going to navigate to one of my favorite tools. It's called webAIM. So if you go to webaim.org and scroll the whole way to the bottom, you'll see something called popular resources and click on the color contrast checker.
This tool is not very beautiful, but it is extremely useful and very practical. And here you'll see that it automatically calculates for you what the color contrast ratio is between a foreground color and the background color.
The text color on the button of the calls to action on Hotjar are white and that hexadecimal color is FFF. Now, I've copied to my clipboard this beautiful pink brand color, and I've copied and pasted it into the background color. And you'll see that the contrast ratio for this white on top of the pink is 3.56:1. And that does a great job at passing for WCAG AA compliance, which is really good, and unfortunately, fails with WCAG AAA compliance.
You'll see that this is a good WCAG compliant color combination for large white text on that beautiful pink background. I highly suggest that all of you, as you want to make an impactful change to improve your e-commerce customer experience by making your product broadly WCAG compliant. But first starting with improving the color contrast ratio on the calls to actions and releases on your product or website.
So again, remember as you go out and use this tip that as you improve your product for some, you're ultimately improving your product for everyone. Thanks so much. Happy hacking, bye.