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.

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.
Start reading

Join the conversation

What's Webflow?

Try it for free
More about the Designer


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


Build website interactions and animations visually.

More about Interactions


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

More about the CMS


Goodbye templates and code — design your store visually.

More about Ecommerce


Edit and update site content right on the page.

More about the Editor


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

More about Hosting