Annex

Fixing Contrast (Minimum) on WooCommerce (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.

WooCommerce — where to look

Customizer colour settings, which compile into the theme stylesheet; page builder global palette.

What to do

Fix the colour once at the palette or Customizer level rather than per block, otherwise the failure reappears on every new page. Pay particular attention to the sale price and the stock status text.

Verification status

Checked by reading the platform’s own source code. Storefront resolves colours through SCSS variables compiled from Customizer settings rather than runtime CSS custom properties, so a colour change requires the theme stylesheet to regenerate — a cached old stylesheet can make a fix look like it did not apply.

Source: https://github.com/woocommerce/storefront/blob/trunk/assets/css/base/_base.scss

Reference themes change. If your store runs a different or older theme, confirm the file before editing 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.