Hi everyone!

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’s accessibility.

And go figure, the tips that I'm going to share with you all today are about not only how to make your product easier for customers but also to 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 like a lot of robust documentation and practical tips that you can do to make sure that your product is usable for people with different types of impairments.

Anything from motor impairments, audio impairments, visual impairments, cognitive or neurological impairments.

So 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.

'Cause it's a pretty easy win.

So 4.5 to one 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 CTA, 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. So let's go ahead and select this element here. [Selects a button]

I'm going to double click on top of that or right click and then inspect the element.

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.

So 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.

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. So 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 to one.

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 links on your product or website.

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!