Designing for Accessibility : The colour contrast compliance

We recently finished designing an app demo for the Samsung Gear S3. The design exercise was really interesting because we were designing for a watch interface for the first time & it was an intensive 1 week sprint. One of the key moments in the project was when we received a particular email feedback from the client {screenshot attached below}

So what’s the email about?

The email is trying to highlight that the colour contrast between text/icon colour and the background colour will make the platform inaccessible for a section of people. The minimum preferred score is 4.50:1 contrast and our proposed designs have failed to pass the accessibility compliance at a number of places!

This email was disappointing for two main reasons: 1) we ignored the colour contrast accessibility check (which we resolved that day itself!}; 2) there is no check in our design process to account for colour contrast and other accessibility compliances.

I had first read on this topic in this fantastic article on Backchannel a few months back: How the Web became Unreadable | Backchannel

But as we all know, knowing & practicing are two different things. Even after knowing it I didn’t make it a part of our process. Something which I’ll rectify immediately with the design process at Tinkerform. And while I am at it, I would also like to make people involved anywhere in the product cycle, be it design or dev or QC or PM; aware of the same. Somewhere between being inspired by Dribble and making products look pleasing to the eyes, we ignore the fundamentals of product design.

For a product to be used, a person should be able to use it comfortably. Text readability is one of the most fundamental tenets of a usable product.

How to design & test in accordance with the color-contrast compliance

1) If you have never explored WebAIM’s colour contrast checker, I urge you all to do so :
WebAIM compliance checker:

2) If you are using sketch, then go get the stark plugin & you’ll be able to check your design’s colour contrast scores right within sketch!
Stark :

3) As a part of the design process, make this compliance check a step of the process. The moment you are done with choosing your color palette or when you have received the brand guide {shades of grey, primary, secondary, error & success; to keep it simple}, perform a contrast check and see if the text/background colour ratio & icon/background colour ratio meet the compliance. There are different checks for different objects. You’ll become more familiar with them as you start using stark or read about it over WebAIM.

Understanding & practicing accessibility is not a one-day thing. It’ll take time for us to become aware of all the compliances and start practicing them but let’s attempt to make sure that the next piece of design we put out in the world is accessible for everyone.


What do you think ?