Ensure Readable Contrast - Webflow

Ensure Readable Contrast in Webflow

1. Open your Webflow project and navigate to the page containing the text, buttons, links, or UI elements you want to check for contrast.
2. Select a text or interactive element on the canvas and open the Style panel.
3. Locate the element’s Color settings for both text and background.
   • For text: check the Typography → Color field.
   • For backgrounds: check Backgrounds or the surrounding section/element’s background color.
4. Ensure the color combination meets WCAG contrast minimums:
   • Normal text: at least 4.5:1
   • Large text (18px+ regular or 14px+ bold): at least 3:1
   • UI components and graphical objects: at least 3:1
5. To adjust contrast, edit either the text color or the background color directly in the Style panel until the pairing is visually strong and passes contrast checks.
6. Repeat steps 2–5 for:
   • buttons and links,
   • navigation items,
   • cards and containers,
   • form inputs and labels,
   • icons that convey meaning.
7. If an element uses a background image, add a semi-transparent overlay (Style panel → Backgrounds → Gradient) to increase readable contrast behind text.
8. Check hover and focus states:
   • Select the element → States dropdown → choose Hover or Focused.
   • Ensure each state maintains readable contrast against its background.
9. Enter Preview mode to visually confirm all text remains readable across sections, including dark/light areas, gradients, and responsive breakpoints.
10. Publish the site and run a final check in your browser’s accessibility tools to confirm text and UI contrast meets WCAG guidelines on the live version.