Ensure your text meets color contrast standards

Updated

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 visual disabilities. 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. 

Enroll in the entire accessibility course

Understand the importance of good color contrast ratios

Sufficient color contrast between text and background improves the experience, accessibility, and legibility on your site for everyone, especially for people with visual disabilities. 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).

Color contrast guidelines for AA (minimum)

  • Text and images should have a ratio of 4.5:1
  • Large text (18 point or 14 point bold) need a ratio of 3:1

Color contrast guidelines for AAA (enhanced)

  • Text and images should have a ratio of 7:1
  • Large text (18 point or 14 point bold) need a ratio of 4.5:1

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 disabilities to understand — use styled text wherever possible.

Check your color contrast ratio

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:

  1. Select the text element you want to check
  2. Open Style panel > Typography
  3. Click the text element’s color swatch to open the color picker
  4. Reference the Contrast ratio section of the color picker to determine your text’s WCAG level rating (e.g., Fail, AA, or AAA)

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: 

  1. Select the text element you want to check
  2. Open Style panel > Typography
  3. Click the text element’s color swatch to open the color picker
  4. Press the Contrast ratio “question mark” icon 

Fix your color contrast ratio

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: 

  1. Select the text element you want to check
  2. Open Style panel > Typography
  3. Click the text element’s color swatch to open the color picker
  4. Toggle the “eye” icon at the far right of the Contrast ratio section on and off to view the WCAG rating range

The ratio range patterns are calculated by testing every combination of saturation and brightness for hue and opacity — 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.

Note

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.

WCAG References: Success Criterion 1.4.3: Contrast (Minimum), Success Criterion 1.4.6: Contrast (Enhanced), Success Criterion 1.4.5: Images of Text