Annex

Fixing Contrast (Minimum) on Webflow (WCAG 1.4.3)

Body text needs a contrast ratio of at least 4.5:1 against its background; large text (18.66px bold or 24px regular and above) needs 3:1.

Why it matters

This is the single most common failure on commercial sites, and on a store it lands on the elements that carry money. Sale prices are routinely set in a light grey or a brand accent that fails against white. Placeholder text inside checkout fields fails almost by default. 'Free shipping over €50' banners in thin light type fail. A customer who cannot read the price does not buy, and unlike a broken button this failure is invisible to anyone with normal vision — including the designer who shipped it.

Webflow — where to look

Designer style panel; global swatches under the project's style guide.

What to do

Correct the swatch itself so every element bound to it inherits the fix. Webflow shows a contrast indicator in the colour picker — use it, but verify the computed pair, since the indicator only compares the two colours you have selected.

Verification status

Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Webflow and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to it.

How to verify the fix

  1. Sample the foreground and background colours with a colour picker and run the pair through a contrast checker; do not judge by eye.
  2. Check the price, the sale price, the stock label and the shipping note specifically — these carry the purchase decision.
  3. For text over imagery, test against the lightest image currently in rotation, not against the design mockup.
  4. Open a checkout field and read the placeholder against the field background.

Other platforms

The full criterion

Read the full explanation of WCAG 1.4.3 Contrast (Minimum), or the formal W3C definition.