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

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.

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.

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.