Apply recommended color contrast ratios on your site to improve accessibility.
Sufficient color contrast between text and background improves the experience and legibility on your site for everyone, especially for people with visual disabilities.
The 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
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
Webflow’s built-in color contrast analyzer
You can check the contrast ratio of text on your site 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.
Contrast ratio curve patterns
You can toggle the “preview” icon (i.e., the “eye” icon) under the palette on the right to see the curves for AA, AAA, and a Fail rating on WCAG. The ratio curve patterns are calculated by testing every combination of saturation and brightness for hue and 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
Webflow’s color contrast analyzer uses an algorithm to calculate the luminosity difference between two colors (i.e., 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.
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.)
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 hard and often impossible for visitors with visual disabilities to understand. Use styled text wherever possible.
WCAG References: Success Criterion 1.4.3: Contrast (Minimum), Success Criterion 1.4.6: Contrast (Enhanced), Success Criterion 1.4.5: Images of Text