Accessible Interface Design

A year ago I joined the Salesforce UX team as a Product Designer working on Mobile Self Service products. I came from a small startup, so I was new to practically everything happening at such a large scale in the world of enterprise software design. One of the things new to me as a designer was the topic of accessibility. Regrettably, I hadn’t previously considered how people with different capabilities than myself would use the products I designed. Specifically, I had never factored in color contrast ratios while building a color palette for a given app or interface.

A year later, I’ve changed my process to account for color contrast ratios and have even built a tool with a friend and colleague to make things easier for other designers facing accessible color palette challenges.

The Frustrating Cycle…

Inspiration can be difficult in a pass / fail world

As a designer working on products that need to meet WCAG Accessibility standards, I’ve found myself stuck in a somewhat frustrating cycle. It goes like this…

Once I’ve gotten a clear understanding of the problem that I’m solving for, and after I’ve validated the design goals and use cases with the appropriate stakeholders, I start to turn bullet points and lists into visuals and interfaces that people can connect and interact with. In this process, I apply color and detail to my work. I’m not just aiming to simplify; I’m also trying to inject beauty into the given screens to try and bring fun and delight to the people who will use the product. In this process, I start with rough grayscale wireframes and then slowly ratchet up the fidelity of each component and screen.

In fleshing out the visuals for these components and screens, I try lots of different background colors, typefaces, font sizes, and weights and ultimately, I pick colors that look good to me.

I then socialize my higher fidelity designs with other designers, product managers, researchers, customers, etc. and something bad happens. I start to fall in love with the chosen colors. I know I’m not supposed to, but it happens. I’m human.

Then as development begins on the given product and we start to hammer out the finer details, the topic of accessibility and color contrast ratios comes up. D’oh!

If only I had checked all the colors at the beginning of my explorations, before my color crush turned to love.

So now I go to one of the many color contrast ratio calculators available and check if the colors chosen will work with the given background colors / font sizes / font weights.

Invariably something fails. And this is where the frustrating cycle begins.

Let’s say I’m trying to style a feed item on a gray card. The designer before established the gray card, and its already shipped. I can’t change it.

For argument’s sake let’s say the card has a background of #FAFAFA.

And I’m looking for a blue color to use for link text. I use this blue. #33A8DC.

I go to WebAIM’s contrast checker and… the color contrast fails. Now what?

I know I need to figure out a blue color for text on a gray card, but I have no tool to help ensure the next color I like will pass. So now I try a bunch of blues. I’m not a computer, so analyzing hexcodes isn’t necessarily something I want to do in my head.

There has to be a better way.

The Solution

Introducing ColorSafe.co

Instead of simply returning pass / fail information regarding color contrast ratios (often when it’s too late), ColorSafe.co aims to be your first step in the process of selecting accessible colors for apps and interfaces. It is totally okay to fall in love with these colors, because all of them will pass accessible contrast ratios.

So imagine I was back with the gray card and need blue text.

First I set up my canvas…

I set the background color, select my font size and weight, and set the desired accessibility grade.

Then I generate a palette. This step will take all the configurations I set up and automagically only show me colors that will pass accessibility contrast ratios…

But I don’t need the whole rainbow, I know I want a blue for the link text. So I filter by color…

And now I can preview blues that will work on my gray background…

I can even grab hexcode or RGB values.

… and Boom!

Now my link color looks good and more importantly passes accessibility contrast ratios.

About ColorSafe

ColorSafe.co is a tool that Donielle Berg and I designed and built together. We’re excited to share it with the design community and hope it brings value to designers looking to bring accessible colors to their apps and interfaces.

Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System