Legible documentation

Install

Open the Apps panel in the Webflow Designer (press E) and search for Legible.
Install it on your site and press Launch App.
Open the page you want to check. Legible runs as soon as it opens; press Check again after you change the page.

Read the results

Each row names the class and shows the first words of the text. The two "Aa" chips show the current color and the suggested one on the real background, with the measured ratio and the one required. Press the row to select that element on the canvas.

Thresholds are WCAG 2.2 AA: 4.5:1 for normal text, and 3:1 for large text (24 px and up, or 18.66 px and up at weight 700).

Check by eye

Text on a background image or gradient has no single color to measure. Those texts are listed under "Check by eye". Press one to go to it and judge it yourself.

Fix a class

Fix sets the class color to the nearest color that passes, moving it toward black or white only as far as needed. Every element using that class changes. To go back, set the class color again in the Style panel. Text with no class cannot be fixed: give it a class first.

Free fixes and unlocking

Checking and the suggested colors are always free, and you get 3 one-click fixes. After that, the panel offers Unlimited fixes for US$ 39, one payment through Stripe. The page you land on after paying shows your unlock code, and you can write to us if you lose it. Paste the code in the panel and press Unlock.

The unlock is saved in the browser you use. On another browser or computer, paste the code again.

What it does not check

Other pages: it reads the page open in the Designer, so open each page and check it.
Other breakpoints and states: it reads the base breakpoint and the default state, not hover or focus.
Text inside Code Embeds and images.
Any other WCAG criterion. Passing contrast does not make a site compliant.

If something goes wrong

"Could not read this page": open a page in Design mode and press Check again. "Could not change": you may be in a mode where styles are locked, such as Edit mode; switch to Design mode. Anything else: write to contato@designmaster.com.br.