Building Contrast: Making Accessibility Accessible to Designers

When we couldn’t find the right tool to help our designers make accessible color combinations for our web experiences, we made our own.

By most measures, web accessibility is finally getting serious. Whether it's the growing number of accessibility-related lawsuits (and the household names involved) or the commitments of big tech institutions, building accessible experiences has become an important part of building for the web.

For us at Maark, this means making sure our entire team—from designers to developers to managers—is trained and knowledgeable on how to create experiences that work for everyone.

We developed a checklist to help our designers look for common accessibility issues while they design. One part of that list includes testing our designs for appropriate color contrast so that text can be read by people with moderately low vision (and without the use of any contrast-enhancing technologies).

Designers test colors using online tools, inputting values, and making sure the ratios meet the WCAG standards. But inevitably, transparencies, shadows, and a countless number of other design details shift as we work. And as those details change, so do the colors, and what may have met the standard before no longer works. We felt there was a real need for a tool that could be used while we worked to ensure that we were always using accessible color combinations.

Our design tool of choice is Figma, and with the recent release of their plugin platform, we started our search for a tool that could help us test color contrast while we work. We wanted a solution that did two core things:

• Quickly figure out the contrast ratio for any layer we select
• Measure colors on transparencies, blends, gradients, and images

We found a few options that could help, but none of them were hitting the mark. (not one supported gradients or images). Our next logical step, as software makers, was to build our own. That's why we made Contrast.

Contrast is a Figma plugin that displays passing and failing contrast ratios for a selected layer against the color it finds directly behind it. This means you don't have to select the two layers you want to compare—you can go layer by layer and let Contrast find the background layer for you.

After our initial release, we evolved the tool to calculate blends and transparencies in the background to make Contrast work in many of the situations we were coming up against.

Then we took it even further and came up with a way to measure contrast against images and gradients by taking a sample of colors behind the selected layer and testing the contrast against each sample. We no longer have to guess if text is legible on an image, we can actually measure it. All of these features help our team be more confident in the color decisions they are making and how they will be perceived by our audience.

Contrast is just one part of accessibility design. Tools like ours and others’ help teams make better decisions. Still, designers, developers, and managers all need to have an understanding of the role accessibility plays in the creation of products to actually make better experiences. Accessibility education, referenceable patterns, real testing, and better tools will be the path to create a more accessible web and better products for everyone.

Check out Contrast, and let us know what you think.