Accessible to All: How Our Figma Plugin Contrast Helps Designers Foreground Inclusivity

4.5:1. ‍

For many readers, these numbers might not mean anything at all. But for digital designers, it’s our responsibility to recognize this ratio immediately.

According to the Web Content Accessibility Guidelines (WCAG), 4.5:1 is the minimum contrast ratio between text and background colors to ensure content is legible to users with visual impairments, including people with colorblindness or low vision. Color contrast is one of many factors designers and developers must consider as they strive toward universally inclusive digital experiences.

1.6 billion people worldwide have disabilities affecting cognitive, neurological, speech, physical or visual capabilities. That number gets even more significant when you consider other dimensions such as age, temporary health conditions, environmental factors (access to light, for example), or product-related limitations (such as small screens).

If firms don’t comply with web accessibility standards, they purposefully exclude billions of individuals.

On a human level, that’s unacceptable.

From a business perspective, that leads to an estimated $10-16 billion in revenue loss and a $3-6 billion risk in legal fees. Moreover, if assistive technologies like screen readers can’t effectively engage with content, neither can search engines indexing pages — leading to negative SEO ramifications.

Organizations creating more inclusive digital experiences are the companies that will win.

WillowTree is well-versed in this space: our augmentative and alternative communication (AAC) app Vocable provides a free mobile platform for users to communicate via head and eye movements or text-to-speech. The tool can help nearly 18 million people experiencing speech difficulties save about $15,000 on otherwise costly alternative communication devices.

In 2020, I set out to develop and launch another digital tool that facilitates accessible experiences. I wanted to make it easier for designers to build more equitable, impactful experiences on behalf of all our users (ourselves included).

And we did it: meet our Figma accessibility plugin Contrast.

Experimentation + delight + equity = Contrast

Contrast is a Figma plugin downloaded by more than 220,000 users. The free tool helps designers implement and test color combinations to ensure web experiences are accessible to visually impaired users. Contrast is adding 1,000–2,000 weekly new users, and I’m extremely proud that it’ll be one of just 10 Figma plugins (in an ecosystem of 1,000+) featured at Config, Figma’s annual global conference.

We built Contrast to create experiences that foster universal delight for all audiences and offer more powerful design tools to the teams developing those experiences. As the marketplace shows us, it’s these inclusive experiences that drive revenue gains because they are accessible to all.

Take a look at the tool in action:

Designers can select a layer within their Figma file, and Contrast automatically searches for the color directly behind that selection to display the contrast ratio of those layers. Then, the plugin labels that ratio as passing or failing, according to WCAG standards. In addition to individual layers, Contrast scans entire pages to report all text-based contrast levels and detect any assets that fail WCAG standards.

Here’s another view of the plugin’s capabilities as we consider two contrasting designs:

Here, Contrast labels the color combination of black on white as passing, whether used as a font or in an image. This combination has a contrast ratio of 21:1 — exceeding WCAG’s AA and AAA accessibility ratings.

However, the grey-on-white logo lockup isn’t as successful. While it passes in image assets, it fails in text-based contexts. The color contrast ratio of grey-on-white doesn’t meet that minimum standard of 4.5:1, ultimately rendering that content more difficult to read by visually impaired users.

But accessible color contrast ratios aren’t always black-and-white.

The algorithm WCAG currently uses — and the one Contrast uses, by extension — to determine passing or failing color combinations can be overly simplistic. In specific contexts, that 4.5:1 ratio color contrast ratio should shift: think headlines versus body copy, serif versus sans serif fonts, patterned versus solid backgrounds, etc.

Enter the Accessible Perceptual Contrast Algorithm (APCA). It’s a more advanced, peer-reviewed algorithm that better accounts for the nuances and variations in visual perception — backed by design and accessibility experts like Andrew Somers, co-author of the forthcoming WCAG 3.0 standards. Incorporating the new APCA is what WCAG calls a “significant update” between versions 2.0 and 2.2 and the yet-to-be-released version 3.0.

We’re not waiting around for that to happen, though.

Many Contrast users have asked for an update incorporating the APCA. In advance of Config, my WillowTree colleagues Maxi Conedera, Mason Plunkett, James Sullivan, Mark van der Hyde, Todd Yard, and I are excited to launch a new version of our Contrast plugin that integrates the APCA while still providing the same real-time, native in-app feedback our users have come to know and love. We look forward to having our users test out this beta and help us continue making the tool stronger and smarter in the future.

For successful digital engagement, all audiences must get into 'flow.'

It starts with digital product teams.

What do I mean by “flow”? WillowTree President Tobias Dengel summarizes the concept well in this blog post:

“Connecting on a project across higher planes of concentration and commitment allows us to collaboratively design, build and ship high-quality products at incredible velocity. This is why one of WillowTree’s seven core values is Sustainable Flow. It’s an approach to work where people engage in deep focus and immersion, either on an individual task or a group activity.”

In recent years, teams across WillowTree — not just design — have progressed in incorporating accessibility best practices into their work. As we sought to understand more about the accessibility lifecycle, our design teams ran into a substantial blocker. Before building Contrast, any tools we implemented to promote accessibility standards only interrupted our flow. To test accessibility, we had to break our flow and rely on third-party tools that took us out of the Figma experience.

With Contrast, our teams receive the real-time, natively delivered feedback they need. We no longer have to guess if text is legible on a background or an image. We can immediately measure it.

We did what the best product experts do when we can’t find the right tools to fit our needs.

We built our own solution. And we shared it with the rest of the world.