Color contrast analyzers: why they’re important and how to use them

Learn why it’s so important to use a color contrast analyzer in web design and how to make sure your color combinations are accessible.

No items found.

Using a color contrast analyzer is essential if you want your website to be accessible to the majority of visitors.

Making websites accessible is a fundamental part of a designer’s job. And one aspect of accessibility is ensuring that text and background colors have sufficient contrast ratios so that words are visible and legible.

Why you should use a color contrast analyzer

Just because you can read text, does not mean the majority of people can. Your color contrast ratio needs to make text legible for visitors with low vision, vision impairments, and different types of color blindness. 

The Web Content Accessibility Guidelines (WCAG) specify a way to calculate the contrast between text color and background color. The guidelines designate success criteria for level AA (minimum), level AAA (enhanced), and fail ratings. 

Unfortunately, you can't check the ratio by just looking at the colors  — you’ll need a color contrast analyzer tool. 

How and why we built the Webflow color contrast analyzer

A lot of tools have been built to bring this color contrast 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.

Former Webflow product designer, Darin Dimitroff, was inspired by the Chrome DevTool color contrast checker. He decided to use his ten percent time — the four hours per week allotted to Webflow employees to work on dream projects — to design a color contrast tool directly in Webflow. 

Once Darin had a basic design, he brought a proposal to senior frontend engineer, Nick Gard. Darin’s designs combined with Nick’s knowledge of the code area that would need to change allowed the team to take this idea to build stage. 

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.

Neither of them wanted the color contrast analyzer to stay as merely an minimum viable product (MVP). So, using their ten percent 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 where it could be released.

An image of the color contrast analyzer in the Webflow designer. The text box reads "Can you read this?"

How to use color contrast analyzer in Webflow

You can calculate the color contrast ratio of your text directly from the color picker in Webflow. 

To check the contrast ratio of your text:

  • Select the text element you want to check
  • Open Style panel > Typography
  • Click the text element’s color swatch to open the color picker

Within the color picker, you’ll see a contrast ratio of either level AA, level AAA, or fail. You can also drag your cursor through the color box to see which areas would meet the success criteria and which would fail. 

An image of where to find the color contrast analyzer in the Webflow Designer.

Start using the color contrast analyzer to build more accessible websites

For more guidance on color contrast ratios, check out the Webflow University color contrast lesson

If you want to know more about how to make your website more accessible you should check out our accessibility checklist. 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

Published

April 6, 2022

Category

Resources

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

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

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

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

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

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

More about Hosting