About this presentation

Ever since Salesloft’s rebrand I’ve been thinking a lot about accessibility. Our decision to make green our brand color helps us standout in the marketplace. However, it causes issues for our customers affected by colorblindness.

This presentation covers discusses improving accessibility with design tokens. By using tokens to enable theming, we can begin to build colorblind themes.

This is an abbreviated version from July 22, 2022 and given to Salesloft’s Product Leadership, Product Management and Product Experience teams.

Transcript

Good morning everyone.

For those of you I haven’t had the opportunity to meet yet, my name is Sam Solomon. I’m a Staff designer here and I lead design for our platform and workflow pods.

I’d like to talk with you today about improving accessibility with design tokens.

But first, I’d like to talk about a problem.

A problem several of our customers started having about a year ago.

For those of you who have been here longer than a year this page might look familiar—it’s our old homepage, old colors and old brand.

If you login to Salesloft today, this is what you’ll see.

This is the rebranded product—which was a great accomplishment.

It has been well-received by our customers and allowed us to differentiate ourselves in the market.

And as far as rebranding projects go, this went incredibly smoothly.

However, there’s a problem.

Because not everyone got this. Some people got this—

A collection of gray blobs.

Those that got this—of course—are our users affected by colorblindness. Some 4 to 5 percent of the population, and presumably our customers.

And it’s unfortunate. 

You know salesloft isn’t a place to go to kill downtime. It’s not a travel website that someone uses once or twice a year.

It’s not a toy.

Salesloft is a professional tool that our customers use 2 to 6 hours each day. 

Many depend on it for their livelihoods. If demos don’t get booked or deals aren’t closed, salespeople are going to struggle.

And that’s something I take very seriously.

To better illustrate the problem here I have our 3 most common buttons. 

Real quick—can you tell which is the destructive one?

Did you guess right?

Now buttons have labels in the app and we require confirmation for destructive actions. But it’s not super-easy to tell, is it?

—and this is 10 times the size of most of the buttons on our screens.

So what do we do about this?

The answer is to give the user back a bit of control through theming.

So a colorblind user with a colorblind theme might instead see something like this.

Cool, right? But how do we get there?

We’ll need to need to adjust Salesloft’s design system to move away from standard color variables and towards design tokens.

What exactly does that mean?

I’ve taken this blurb from Adobe’s Spectrum Design System.

Essentially design tokens take the subtle, overarching patterns that already exist in the design system. It codifies and turns them into variables.

Just to level-set—today we’ll be discussing colors specifically, because that is most impactful to our colorblind users. Just know that there are a lot of other uses for design tokens.

OK, so let’s take a look at how to implement design tokens.

This is a shot from a theme I’m calling Light Default—which is basically our existing theme.

If you look closely you’ll see colors—Green 500, Blue 500—accompanied by a label.

Essentially, what we’re trying to do here is take these colors and apply labels that have meaning and inherit from these colors.

So when we take these labels and start applying them to components, we’ll end up with something like this—

As you can see we’re not applying colors to these components. We’re applying those design tokens.

For the background of the button we’re not applying Base Green or Green 500, we’re applying Action/Primary Default.

For the field border we’re not applying Gray Base, we’re applying Border/Default.

Hopefully the gears are starting to turn. We’re going to keep these tokens, but change the colors that they are associated with them—that’s how we’ll build a theme.

So I have some examples screens I’ve build in Figma using design tokens. Let’s take a look.

This page should look somewhat familiar to you all. It’s a recreation of our Cadence Detail page.

Notice I’ve put a few large tokens in the corner of each page so you can see how the status colors change—Primary, Info, Warning, Danger.

Now let’s see how this changes with a Red-Green colorblind theme.

Watch the buttons—those are the most notable elements to change.

See how the buttons change from green to blue? Also you’ll notice that the error color changed from red to yellow.

Let’s take a look at another colorblind theme.

Here the buttons change to teal. To help those affected by yellow-blue colorblindness.

And it’s not just colorblindness. Maybe I have a hard time staring at a bright white screen all day. What can I do about that?

This is a Dark Tritanopia theme. Not only will it help those who are yellow-blue colorblind, but also for those who don’t like the brightness of our largely light theme.

I know I’m running out of time here, so I’m going to cycle through one more example real quick.

This is the default people list.

Light Protanopia theme—for red-green colorblindness.

Tritanopia theme for yellow-blue colorblindess.

And finally a Dark Tritanopia theme.

We’re nearing time here—I have a couple closing comments.

First, I’d like to thank Andrii, who has been a huge resource. He’s always quick to answer questions or be a sounding board. He’s helped point me in the right direction when I’ve been unsure. So shout out to him.

Finally, I’ve stressed the importance of building an accessible platform for our customers—this isn’t a game. We’ve got real people that count on our efforts. They count on our efforts to make a living. 

Let’s not let them down.

Thank you.

9 thoughts on “ Improving Accessibility with Design Tokens ”

  1. One thing that I’d like to know more about is how the colors for each theme was chosen? I’d like to develop a similar system to address colorblindness in our product, but I’m not entirely sure how to go about picking the colors in a given theme.

    FWIW, I’m an engineer so if there are any resources you could point me to that would be great!

    1. Hi, thanks for the comment!

      There is a fantastic open source tool called Sim Daltonism that we use to simulate different types of color blindness.
      https://michelf.ca/projects/sim-daltonism/

      As for coming up with the colorblind themes themselves I focused on what I thought the most important colors were—Primary/Success and Danger. If nothing else those two needed to be distinguishable. So I swapped Green and Red for Yellow and Blue for our Protanopia theme. For Tritanopia we swapped our Green for Teal as it came off more prominent. We left the Red as the Danger color.

      Designing colors for dark or “night mode” is a good bit more difficult. You essentially need a color scale of each base color that you can invert depending on the theme. If you’ve done a good job that will get you the answer for 90% of the way to your dark theme. The problem is it will never be perfect and you’ll have to make judgement calls on small things. This is where design tokens can come in handy. They allow you to swap lighter or darker variations of the color depending on needs.

      Hope that is enough to point you in the right direction.

  2. Love that you all are exploring how design tokens can be used to create a more inclusive experience for everyone.

    I realize this was probably given to leadership and less technical people, but as a designer I am curious about the the technical details. Could you share more about the naming patterns you all are using? How did you choose colors for the dark theme? Is that systematic? Are these variables handled in the codebase as well as Figma?

    Sorry for all the questions, lol.

    1. Hi Alex,

      I answered some of the questions around choosing colors in my reply to R Kumal. The naming conventions are still something we’re refining. Generally we’re following the pattern Adobe Spectrum lays out with Global tokens passed into alias tokens passed into component tokens.
      https://spectrum.adobe.com/page/design-tokens/

      As for how those are handled—the codebase follows the above as expected. From a design standpoint there are plugins that have tokens inherit styles from others. We also discussed building an internal Figma plugin to keep the styles in the code base and in Figma in sync. We decided against the plugin route for now. It’s going to be more work to manage color changes, but hopefully that is not too often.

  3. Just want to say that I love your presentation style.

    Technical presentations like this tend to be incredibly dry. Great storytelling, great pacing.

  4. You’re a little dismissive of other types of software. I’m a designer in the travel space for a company everybody knows. We build a lot of tools for our hosts. Many of whom depend on us for income.

    Good presentation nonetheless. Glad more design teams are focusing on accessibility.

    1. That’s fair. I didn’t consider the business side of travel sites. I was trying to emphasize the importance of building a functional tool for our customers.

      Appreciate the comment!

  5. Our design team is trying to figure this out right now. I stumbled upon your video when searching for implementing theming in Figma. I’m trying to make a recommendation on how we might implement theming within our Figma library. Is the idea that you use swap libraries and the swaps handle the colors? If so, do you know of a way for those tokens to inherit parent colors? Is your team using a plugin?

    Sorry for all the questions. I just haven’t found much helpful information on how to implement design tokens in Figma so far.

    1. That’s right. The plan is to use Figma swap libraries to change themes—although I expect most designers to work with our default theme.

      Unfortunately, Figma will not let you set color variables right now. You will need to use a plugin if that’s a requirement. I had considered using Figma Tokens or building something custom. However, I decided against both.
      https://www.figma.com/community/plugin/843461159747178978

      Until Figma has a native solution we’re going to manage and document our colors as best as we can.

      Hope that helps!

Leave a Reply

Your email address will not be published.