Annex

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

Shopify — where to look

Theme editor colour scheme settings, which feed the CSS custom properties used throughout assets/base.css.

What to do

Fix the colour scheme rather than individual rules. Dawn derives nearly every colour from --color-foreground and --color-background, so correcting the scheme propagates. Check the sale price separately from the regular price — themes usually style them differently.

Verification status

Checked by reading the platform’s own source code. Dawn resolves colours through --color-foreground / --color-background custom properties fed from theme colour schemes, so contrast is a merchant setting rather than a theme bug. Note that several rules apply the foreground colour at reduced opacity, which lowers the effective ratio.

Source: https://github.com/Shopify/dawn/blob/main/assets/base.css

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.