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

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.

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

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.
Written by
Nick Gard
Senior Frontend Engineer
Rease Rios
Senior Content Marketing Manager

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 for different WCAG levels: 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 that provides contrast levels for normal text, large text, and graphical objects and user interface components. Tools like WebAIM allow you to plug in hex codes for your foreground colors and background colors to ensure your designs meet WCAG color contrast requirements. 

Of course, looking up hex or rgb color codes every time you select a color can get tiresome. That’s why we built the color contrast checking functionality right into Webflow. 

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.

The modern web design process

Discover the processes and tools behind high-performing websites in this free ebook.

Download now
The modern web design process

Discover the processes and tools behind high-performing websites in this free ebook.

Download now
Download now
Last Updated
January 12, 2023
Category