Color contrast analyzer: a Dream Big Week 2020 project

A small team at Webflow decided to build a color contrast analyzer tool to help make all websites more accessible.

Nick Gard
Darin Dimitroff
September 10, 2020
Design process

Making websites accessible to all users is a fundamental part of a designer’s job. One part of making a website accessible is ensuring that it is readable — that text is visible on the page.

Every year, Webflow usually hosts an annual retreat for a week. We use the time to celebrate our achievements, bond in person (70% of our team is remote), align on our purpose and mission, and brainstorm together. But due to COVID-19, we had to change plans.

We decided to use the week to do something different. Employees were encouraged to try their hands at customer support, to learn and use the Webflow platform, or to build something new.

The overall week had a theme that harkens back to our mission: Dream big

Our mission at Webflow is to enable everyone to create for the web. It’s a big vision and it will take a lot to make it a reality. In the weeks leading up to Dream Big Week, people self-organized into small teams. We had a marketplace of ideas, and after some opening remarks from Vlad on Monday, teams went to work.

Everything from whole new features, fixing technical debt, and redesigning old work was on the table. While we can’t show you everything that was built, we wanted to give a peek into the making of one feature that we just released:

Color Contrast Analyzer 

Making websites accessible to all users is a fundamental part of a designer’s job. One part of making a website accessible is ensuring that it is readable — that text is visible on the page.

Luckily, the Web Content Accessibility Guidelines (WCAG) specifies a way to compute this contrast between text color and background color depending on the font size and weight. A lot of tools have been built to bring this information to the forefront at the time of design, but none of them were readily available for Webflow designers. They existed as stand-alone webpages, plugins, and browser page inspectors.

Darin noted this missing feature in March 2018 and started designing how a first-class color contrast tool would look and work in Webflow during his 10% time. It was his first 10% project at Webflow, and he was inspired by the earlier release of a similar tool in Chrome’s DevTools. 

When the company announced Dream Big Week in lieu of the annual company retreat, Darin wrote up a proposal and included his designs. When Nick read this proposal, he knew immediately that he wanted to bring this feature to life. Thanks to Darin’s fleshed-out designs and Nick’s knowledge of the code area that would need to change, they were able to assemble a nearly complete MVP by the end of Dream Big Week.

Taking Darin’s inspiration from the Chrome DevTools feature, Nick dug into the code powering that implementation and learned from there what would have taken weeks of trial and error and code refactoring to do. Working in vastly separated timezones (PDT and EEST), Darin and Nick did most of their communicating asynchronously, benefitting from the fact that Nick’s code changes for the day could be reviewed and improved by Darin during his workday some 6 hours later. Then Darin’s suggestions and requests guided Nick’s workday schedule. This pattern repeated all week long.

Neither of them wanted the Color Contrast Analyzer to stay as merely an MVP and, using their 10% time over the following weeks, they wrote tests, revisited iconography designs, urged colleagues to test it out and review it, and ultimately brought it to the point it could be released.

color contrast analyzer gif

So, what's next?

We’re happy to announce that this feature is now out and ready to use! This was just one of many projects built during Dream Big Week that we’re excited to bring into the world. If you want to know more about how to make your website more accessible you should check out our Webflow University lesson. And if you’re someone who is passionate about improving how we build for the web, consider joining our team.

Free ebook: The modern web design process

Discover the processes and tools behind high-performing websites.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Nick Gard

Nick has worked on the frontend of several companies’ websites over the past decade. Having a significant hearing loss, he found himself drawn to accessibility work, though he also enjoys bringing designs to life with CSS and eking performance out of JavaScript.

Darin Dimitroff

Darin is a product designer and UI engineer, currently working on the future of design tools at Webflow. His time is split between his lovely wife and two cats, mountain bike racing, cooking, playing the guitar, and learning Swift.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.