Insufficient colour contrast

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}.

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.

The text that usually fails is exactly the text that sells: struck-through prices, delivery costs, stock messages.

How to fix it

Darken the text or lighten the background until it meets the required ratio. Normal text needs 4.5:1; from 24px (or 18.66px bold) 3:1 is enough. Greys around #999 on white almost never pass.

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

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

On your platform

• Shopify

  In the theme editor, Settings › Colors lets you change the theme colour schemes without touching code.

• WooCommerce

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