Check web accessibility of a text on Webflow

At Digidop, we are convinced that web accessibility is the major challenge of the next 10 years.

To create an inclusive website, there are dozens of points to consider. Today, we will discuss:

👉 the readability of text on a Webflow site.

The Contrast Ratio on Webflow

The color contrast between your text and its background plays a crucial role in the readability of your message. To the naked eye, it can often be challenging to ensure that your content is accessible.

Fortunately, you can use the "Contrast Ratio Checker" tool from Webflow to easily analyze your content for accessibility.

A visual tool to check text/color accessibility

Webflow natively offers a tool that allows you to verify that your text is easily readable for users of your web page.

Based on WCAG recommendations (accessibility standards), the tool evaluates the readability of your text using 3 ratings:

AAA ✅✅
AA ✅
Fail ❌

Note: To provide the best possible experience on your site, we recommend consistently striving for a triple A rating.

How to use it on Webflow?

But... Where can you find the Contrast Ratio Checker?

Contrast Ratio Checker in Webflow Designer

You can find the tool directly in your Webflow project (designer interface). To do this:

Select the text you want to analyze
Go to the Color area in Typography (CSS style)
Click on the square field with your color
In the center of the popup, you can now check your score on the "contrast ratio" line

Is your score poor? How to easily improve it?

👉 You can visually adjust your score using an official recommendation area by activating the "👁" toggle on the right side of the tool.

Once the "eye" is activated, you will have a visual area outlined by lines that appear.

If your color falls between the two lines, your text will receive a double A rating. If your color is above this area, you will achieve a triple A rating!