Insufficient colour contrast in WooCommerce

WCAG 1.4.3 (AA) · EN 301 549 9.1.4.3

There is {fontSize} text with a contrast ratio of {ratio} against its background, where the standard requires {required}.

Where to change it in WooCommerce

In the Customizer, under Colors; if the theme does not expose it, add it in Additional CSS.

In WooCommerce the theme and the plugins both contribute markup. Create a child theme before editing: otherwise the next update overwrites your changes.

/* 2.85:1 — fails */
.old-price { color: #999999; background: #ffffff; }

/* 4.83:1 — passes */
.old-price { color: #717171; background: #ffffff; }

Why it matters

This is the most widespread barrier and the one that affects the most people: anyone with tired eyes, a phone in bright sunlight, or a cheap screen. You do not need a diagnosed disability to be unable to read light grey on white.

On other platforms

• Insufficient colour contrast in Shopify