Ensure your text adheres to color contrast standards

Perhaps you appreciate the subtle utilization of dim text against an even darker backdrop — however, it’s likely to be unreadable by most individuals visiting your website, especially those with visual impairments. Prioritize inclusivity and accessibility in your design decisions, and utilize the Color contrast checker in the color picker to ensure that all individuals can comprehend your text.

In the upcoming section, you will discover all there is to know about the Color contrast checker, covering the following points:

1. Comprehend the significance of adequate color contrast ratios
2. Validate your color contrast ratio
3. Rectify your color contrast ratio

Enroll in the complete accessibility course. 

Comprehend the significance of adequate color contrast ratios

Adequate color contrast between text and the background enhances the user experience, accessibility, and readability on your site for all, particularly benefiting those with visual disabilities. WCAG provides recommended ratios for optimal contrast based on text size. Contrast represents the difference in brightness (or luminance) between two 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 visuals should have a ratio of 4.5:1
• Ample text (18 point or 14 point bold) requires a ratio of 3:1

Color contrast guidelines for AAA (enhanced)

• Text and visuals should have a ratio of 7:1
• Ample text (18 point or 14 point bold) necessitates a ratio of 4.5:1

Note: While WCAG contrast ratio guidelines do not directly affect images (including logos), it’s recommended to adhere to a 4.5:1 ratio for images containing prominent text. However, be mindful that images of text can pose challenges and often remain incomprehensible to visitors with visual disabilities — opt for stylized text whenever feasible.

Validate your color contrast ratio

The adequacy of the contrast ratio relies on the foreground (your text) and background colors (the solid backdrop against which the text is displayed), as well as font size and weight. Utilize Webflow’s built-in color contrast checker to assess the contrast ratio of text on your site and make adjustments if necessary. This can be accomplished directly from the color picker in Webflow, which not only showcases the contrast ratio of text but also the corresponding WCAG level rating. 

Note: The Color contrast checker does not assess the contrast of text elements against image elements (e.g., if your text is situated atop an image).

To evaluate the contrast ratio of your text:

1. Select the text element you wish to assess
2. Access Style panel > Typography
3. Click on the color swatch of the text element to unveil the color picker
4. Review the Contrast ratio section within the color picker to ascertain your text’s WCAG level rating (e.g., Fail, AA, or AAA)

The WCAG level rating is determined by the background color and the font size, weight, and color, which is clarified with explanatory text that appears upon clicking the question mark icon. (This contrast ratio segment exclusively appears while modifying the typography color of text elements.)

To access the Contrast ratio explanatory text for your text element: 

1. Select the text element of interest
2. Open the Style panel > Typography
3. Click on the color swatch of the text element to activate the color picker
4. Press the “question mark” icon associated with Contrast ratio 

Rectify your color contrast ratio

If your text is categorized as failing the WCAG contrast ratio assessment (Fail), consider altering the text color to a higher contrast option. As you modify your text color, you will observe a rating of AA (minimum for passing) or AAA (even more preferable).