What is color contrast ratio?

Color contrast ratio measures the luminance difference between text and its background. WCAG 2.2 AA requires at least 4.5:1 for normal text and 3:1 for large text and interface components. Low contrast is one of the most common automated findings on Shopify stores, and one of the easiest for plaintiff scanners to detect and document.

Where stores fail it

Brand palettes designed for looks, not legibility: light gray secondary text, white text on pastel buttons, sale badges on tinted backgrounds, and placeholder text inside form fields. Theme defaults usually pass; the failures arrive with custom colors, app widgets, and promotional banners.

How it is measured

The ratio is computed mathematically from the foreground and background colors, so tools can test every text element on every template without human judgment. That makes contrast a fully automatable check, and failures fully avoidable once reported with the exact element and required adjustment.

The fix pattern

Contrast fixes are usually small: darken the muted text token, adjust a button background, or add a solid backdrop behind overlay text. The risk is that a brand-color change reintroduces failures later, which is why contrast belongs in continuous monitoring rather than a one-time design review.