Use Webflow’s Color contrast checker in the color picker to make sure your text meets accessibility standards and is legible against your background.
You might love the subtle use of dark text against an even darker background — but chances are it’s probably illegible to most people visiting your site, especially those with vision impairments. Put inclusivity and accessibility at the forefront of your design choices, and use the Color contrast checker in the color picker to make sure all people can read your text.
In this lesson, you’ll learn all about the Color contrast checker with the following:
Enroll in the entire accessibility course.
Sufficient color contrast between text and background improves the experience, accessibility, and legibility on your site for everyone, especially for people with vision impairments. WCAG offers suggested ratios of the best contrast based on size of text. Contrast is the difference in brightness (or luminance) between 2 colors and ranges from 1:1 (e.g., white text on a white background) to 21:1 (e.g., black text on a white background).
Note: While WCAG contrast ratio guidelines don’t apply to images (including logos), it’s best practice to apply a 4.5:1 ratio for images with prominent text. But keep in mind that images of text can be difficult and often impossible for visitors with visual impairments to understand — use styled text wherever possible.
Sufficient contrast ratio depends on the foreground (your text) and background colors (the solid background over which the text appears), font size, and font weight. You can use Webflow’s built-in color contrast checker to check the contrast ratio of text on your site and fix it if needed. You can do this directly from the color picker in Webflow, which displays not only the contrast ratio of text but also the WCAG level rating that corresponds to that contrast ratio.
Note: The Color contrast checker does not analyze the contrast of your text elements against image elements (e.g., if your text is placed on top of an image).
To check the contrast ratio of your text:
The WCAG level rating is based on the color of the background and the font size, weight, and color, which is explained with helper text that opens when you click the question mark icon. (This contrast ratio section only appears when editing the typography color of text elements.)
To view the Contrast ratio helper text for your text element:
If your text indicates it fails WCAG’s contrast ratio rating (Fail), you can change the text color to something with more contrast. As you update your text color, you’ll be shown a rating of AA (minimum to pass) or AAA (even better).
You can also click the Contrast ratio eye icon to show the range where you hit AAA, AA, and Fail contrast ratio standards between your foreground color and any solid background color.
To view your text color’s WCAG rating range:
The ratio range patterns are calculated by testing every combination of saturation and brightness for hue and opacity — watch the curves move as you adjust hue or opacity. Light text over a dark background will show an AAA rating in the upper left of the palette to Fail in the lower right, and vice versa for dark text on a light background.
Interesting: The color contrast analyzer uses an algorithm to calculate the luminosity difference between 2 colors (contrast) and rates it against WCAG guidelines for text size. The algorithm makes adjustments for font weight since bold text can be smaller and still readable. Small text needs a higher luminosity difference to be readable.
Learn more about the importance of color contrast in this section of our Webflow University video lesson on Advanced web typography and read about how to make your site more accessible.
Something went wrong while submitting the form. Please contact email@example.com