🌈 🧐 An Opinionated Color Picker

Across the web, designers and engineers are getting better at building with accessibility in mind. At Wistia, the most recent update to our video player was a big step forward, with improvements to make it screen-reader friendly, keyboard navigable, and able to support Audio Descriptions.

But as fantastic and as talented as the team here is, there are some aspects of video accessibility that we just can’t fix behind the scenes. It’s still up to video creators to order Captions, add descriptive alt-text to their thumbnail images, and pick the color of their player that will suit their brand. And that choice has a big impact on accessibility, since a light background color can make text and icons low-contrast, to the point of illegibility.

Control over the look and feel of the player is one of the features our customers mention most as the reason for choosing Wistia, but it’s also a choice that can severely impact access without their realizing what’s at stake.

To solve this problem, we set out to design a color picker that makes accessibility easy to choose.

To put a number on it, that means making an informed choice in as few clicks as possible. Looking for an easy, low-friction UI for color picking, we took stock of the million (?) different ways to make a color choice. Why are all of these different? Why is there no color picker standard? And what’s the difference between “Lightness” and “Brightness”?

The answer lies in three-dimensional colorspace. That is, to accurately depict all possible colors, you need a three-dimensional shape. The model that maps most directly to our instincts about color is HSV: Hue (the spot on the rainbow), Saturation (purity of that hue versus the muddiness of it turning into gray), Value (lightness of that hue versus it blending into white or black). Each one of those three variables is a necessary dimension for defining a color displayed on a a screen.

Fun fact: the hex values of colors map not to HSV, but (the less intuitive) RGB. Each of the three pairs of characters represents a red, blue, or green color channel in hexadecimal (base-16), so #FF FF FF is white, because all three are maxed out like the 👆middle of the image of that cube, whereas #FF 00 00 is red, because only the R channel is maxed out. So, the left face of that cube is all the colors you could get if you only changed the R channel and the last four characters of your hex code stayed FF FF.

As neat as it would be to have users pick their color by navigating a three-dimensional world to the (x,y,z) coordinate that best matches their brand, it would not result in few clicks and quick, good choices. The reason there are so many color pickers is that it requires a degree of abstraction to take that three-dimensional color space and reduce it to a two-dimensional UI. That’s why all color pickers have at least two (sometimes three) axes of choice — the user needs to pick their x, y, and z; their hue, saturation, and value. And to our design team, those choices mean extra clicks. To minimize those clicks, we asked ourselves which were most and least important.

Picking a hue is the most important click; picking saturation is the least important click.

Hue is the first thing we think of when we think about choosing a color. And in the context of matching a video player to a brand color, saturation is the last thing we think of. That’s because most brand colors are full-saturation, and even when they aren’t, you probably still think of them that way. That means that many users will never want the saturation to be anything but 100, and if that’s its own click, it’s a click we can potentially avoid. That leaves only hue and value to choose, which can be the axes of a 2-dimensional field, and selectable with a single click.

In a single click, the user selects hue and lightness. The second click, to turn down the saturation, is often not needed.

Behold! A color choice in a single click. But what about accessibility? We can add helper text that explains why contrast is important (we do that) and show the calculated contrast ratio and whether that meets the standard (we do that too), but the work to be done is still the choice. Our users need to understand what they have to choose from, without losing the context of the full spectrum of options. After all, color pickers are complicated enough, and wrapping your head around what’s happening is easier with an animation showing what’s being taken away.

Our solution adds a click, but just one. When you click the checkbox, the picker masks any values which don’t create high enough contrast against the white player controls to be considered accessible. If your previous setting doesn’t fall into the acceptable range, the hue stays the same and the Lightness drops down to the highest acceptable level.

The calculation is based on the math provided by the Web Content Accessibility Guild, whose AA standard we base our accessibility work on. From there, we incorporate an additional lightness factor to account for the 80% opacity of the Wistia player. That means the lowest-contrast scenario, when the player is overlaid over pure white, still results in a sufficient contrast.

This color picker is only a small part of our accessibility tooling, which includes a checklist for every video and helpful tooltips throughout the customization process explaining how different choices impact accessibility. Much of that work is done by Wistia behind the scenes, but guiding users through the settings they have to adjust is how we’re working to make accessibility an easy choice to make.