Making Accessibility an Integral Part of the Creative Workflow

Empowering designers and engineers to create more accessible UI around a defined brand system by unraveling the secrets of the contrast ratio

By Yvonne So and Ricky Romero

At Intuit, the design teams work on a wide range of projects that include in-product experiences, feature improvements, marketing landing pages, and many more types of UX and UI experiences that we’ve found needed a defined system of patterns and components to achieve ecosystem cohesiveness. So, over the last few years, we’ve been working hard to build and evolve a design system and toolkit to help guide designers, engineers, and third party developers in their creative workflows.

As part of this work, we have most recently built in an internal tool that we’ve been calling Zebralyzer, which helps designers and engineers check color contrast.

We built this tool for a few specific purposes. We understood that there are several color contrast checkers that are popularly used today. Many of them allow you to select any HEX color for the foreground and background. We felt there was an opportunity to improve existing color contrast checkers by applying some constraints — specifically constraints that benefit our design org, providing a set of limited colors, font face, sizes, and weights to choose from. The goal was that by keeping the options limited, it would help accelerate design work and increase productivity when thinking about color combinations for background and foreground.

The brand team in our design org has defined our brand color palette, but we haven’t established any guidelines around when or how to use the colors:

The tool solves for multiple issues: it ensures we follow brand guidelines and color palette, while also following the WCAG 2.0 accessibility guidelines and standards for compliance. We also understand that we are not the only company that could benefit from a tool like this. We are aiming to open source it so that any organization, large or small, can use the tool by applying their own brand elements in mind.

Why focus on color and contrast

We understand that our products may have users who are color blind or have some form of low vision. Because dealing with money movement and financial information is such a critical part in our users’ lives, it is imperative that we provide content that is readable and legible. Not only does this apply to text content, it also applies to imagery and data visualization.

Here’s an abstract example of when color contrast fails and and an example of when color contrast passes:

Now, to the naked eye, or by doing a quick visual comparison between the two, you would probably think, “Sure, of course, that totally makes sense.” The difference between the two examples seems pretty straightforward because you can see and distinguish the lightness and darkness. However, what about using other brand colors that might be trickier to the naked eye? It’s hard to draw that line. Thankfully, the W3C came up with a formula to do exactly that. Let’s dive deeper.

Color contrast formula

The W3C’s formula takes two colors as input, and produces what’s called a contrast ratio. This ratio is used for evaluating how accessible your text is. It’s based on actual research on how people perceive light in color, and how computers reproduce that color.

Because contrast is necessarily about differences in brightness, first we calculate the relative luminance of both colors. You can think of it like converting a color photo to a black and white one. The luminance is calculated on a scale from 0 (black) to 1 (white).

Remember when you were in elementary school math class and the teacher asked you to show your work? To understand how color contrast is calculated, let’s use a simple example and work through the problem.

We want to use a lighter blue as the color for text links on our webpages. This color will appear on a white background.

This is a calculation which takes R, G, and B values, and provides a value from 0 (black) to 1 (white). Think of it like converting a color to black and white.

For blue, the calculation looks like this.

First, we take the hex values and split them into their individual components. Prefixing a value with “0x” is just another way to indicate that a value is written in base16 notation. The formula deals with R, G, and B as values from 0 to 1, so we divide by the maximum possible value, 0xff.

The contrast ratio calculation is designed for the sRGB color space, thus the suffix. Despite the rise of other color spaces, sRGB is the current standard for color on the web.

Next, we apply a gamma transfer function to the values. Gamma is meant to emphasize the difference between light and dark values. It’s designed to compress color in a non-linear way, similar to how humans perceive differences in brightness.

Finally, we calculate the relative luminance of the color as ≈ 0.17:

These constants are another perceptual trick. Humans perceive the brightness of red, green, and blue differently because our cone cells have different sensitivity to different colors. These values we’re multiplying by mimic this difference in perception.

Let’s do the same calculation for white:

So, white is easy… it’s just 1.

Now, to get the contrast ratio, we simply divide the lighter luminance value by the darker one, adding 0.05 to each luminance value.

Ta-da! Our contrast ratio is ≈ 4.72.

[Where does the 0.05 magic constant come from? It’s a mystery. Our best guess is that the formula is correcting for ambient glare from light falling on the screen. Adding 0.05 to both values always decreases the contrast ratio by a little bit.]

But what does that mean?

For grading color contrast, the WCAG recommendations state:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1, where “large-scale text” is defined as, with several caveats:

• At least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts.
• Converted to px values, those thresholds are 24px and 18.67px respectively. For our purposes, let’s round the latter up to 19px. [Points and pixels are different measurements on the web; px values are calculated at 72ppi, and points are 96ppi. Web developers generally don’t use px nor points when specifying type size on the web, but designers often think and work in px values.]

So, that means that any text smaller than 19px should have a minimum contrast ratio of 4.5:1 to have AA accessibility. Our link color meets that standard, just barely!

If we wanted to use a lighter blue for our links, we’d have to use at least 24px type to compensate. Or, we could use 19px type, but it would need to be bold.

How we use the tool

Here is an example of how we’ve brought this tool into play:

On the left we have a snippet of an initial design exploration to display add-ons. A designer arbitrarily chose which of our brand colors and fonts to use based on our internal toolkit and brand guidance. With the Zebralyzer tool, she discovered that there are some elements where the colors and fonts failed WCAG 2.0 AA compliance. On the right is a snippet of the revised design where she selected passing brand colors: the darker green in the title and a darker gray in the “additional employees per month” area. She also bolded and increased the font in the title area as per Zebralyzer’s recommendation to pass WCAG 2.0 AA. With just these small minor tweaks, we went from a design that was failing compliance to passing.

What we’ve learned so far

We thought designers knew a lot more about color contrast ratios and making accessible color choices. However, we’ve found that a vast majority of the designers we’ve talked to internally and externally do not have much knowledge about accessibility, particularly the visual aspects and benefits of accessible design, which was appalling because so much of the work we do is visual!

Future plans

We have big plans and dreams for the future of accessibility tools! Firstly, we aim to improve the UI and UX of the Zebralyzer tool and continue testing with designers and engineers, continually learning from them to understand what is most useful, if there’s anything we can improve upon, etc. Our mission is to make color contrast awareness and testing an integral part of the holistic design and development process. Zebralyzer is just the start. We are in the process of building a vision simulator, which we hope to scale to other platforms outside of web and mobile, such as VR and AR. Stay tuned!

Follow our authors this week, Yvonne So and Ricky Romero, as they relentlessly continue working toward building a more accessible future.