WCAG 1.4.3 — Contrast (Minimum)
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.
What this means for a store
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.
The failures we see most often
Light grey secondary text (#999 or lighter on white) used for prices, stock status, shipping notes and form hints.
Why it happens: Designers use grey to create visual hierarchy. #999 on #fff is 2.8:1 — it fails. Reaching 4.5:1 on white needs roughly #767676 or darker.
Brand colour used for text as well as for backgrounds.
Why it happens: A colour chosen because it looks right as a button fill is reused for links and headings, where the contrast requirement is different and stricter.
Text placed over a photographic hero or product image.
Why it happens: Contrast is checked against one sample image. Then the merchandiser swaps in a lighter photo and the same text becomes unreadable. No automated test catches this unless the overlay is tested per image.
Placeholder text used as the only label inside checkout fields.
Why it happens: Browser default placeholder grey rarely passes, and the text disappears as soon as the customer types. This fails 1.4.3 and 1.3.1 at the same time.
Disabled buttons and low-priority actions styled at very low contrast.
Why it happens: Disabled controls are exempt from this criterion, but the pattern spreads to controls that are actually active — for example a 'Continue as guest' link.
How to check it yourself
- Sample the foreground and background colours with a colour picker and run the pair through a contrast checker; do not judge by eye.
- Check the price, the sale price, the stock label and the shipping note specifically — these carry the purchase decision.
- For text over imagery, test against the lightest image currently in rotation, not against the design mockup.
- Open a checkout field and read the placeholder against the field background.
Fixing it, by platform
- Shopify — Contrast (Minimum) Theme editor colour scheme settings, which feed the CSS custom properties used throughout assets/base.css.
- WooCommerce — Contrast (Minimum) Customizer colour settings, which compile into the theme stylesheet; page builder global palette.
- Webflow — Contrast (Minimum) Designer style panel; global swatches under the project's style guide.
- Wix — Contrast (Minimum) Site Design colour palette; individual text element styling.
- Squarespace — Contrast (Minimum) Site Styles colour themes; section colour theme assignment.
What this page covers
What follows is the practical meaning of a WCAG 2.2 success criterion. Automated tests catch only a portion of accessibility issues, so a clean scan result does not mean compliance. Platform paths vary by version and theme.
Source
The formal definition of this criterion: W3C — Understanding Contrast (Minimum)