Implementation overview
How to Ensure Sufficient Color Contrast for Text on Webflow?
Ensuring sufficient color contrast for text is crucial for readability and accessibility, especially for people with visual impairments
How to do it on Webflow?
- Check the contrast for all borders.
Borders need a contrast ratio of at least 3.0:1 against their backgrounds. This includes borders on actionable elements like text inputs, radio buttons, and checkboxes.https://webflow.com/accessibility/checklist/task/check-the-contrast-for-all-borders
- Check the contrast for all icons
Icons need a contrast ratio of at least 3.0:1 against background colors.https://webflow.com/accessibility/checklist/task/check-the-contrast-for-all-icons
- Check the contrast for all text
The text should have sufficient contrast against its background to be readable.Level AA compliance requires a contrast ratio of:3:1 for large text (>18pt normal, >14pt bold)4.5:1 for body text (<18pt normal, <14pt bold)https://webflow.com/accessibility/checklist/task/check-the-contrast-for-all-text
- Check the contrast for text that overlaps images or videos.
Text that overlaps images or videos needs sufficient contrast against the background to be fully legible. Images and videos with busy backgrounds make the text easier to read.Make sure text on images and videos have a minimum contrast of:3:1 for large text (>18pt normal, >14pt bold)4.5:1 for body text (<18pt normal, <14pt bold)https://webflow.com/accessibility/checklist/task/check-the-contrast-for-all-text
Do's
Don'ts
Tools
