Color contrast
Color contrast is the luminance ratio between text and its background; WCAG 2.1 AA requires at least 4.5:1 for body text and 3:1 for large text.
Detailed explanation
WCAG Success Criterion 1.4.3 (Contrast — Minimum) requires that the visual presentation of text and images of text has a luminance contrast ratio of at least 4.5:1 against its background, with a relaxed 3:1 ratio allowed for text 18pt+ or 14pt+ bold ("large text"). Logos, decorative text, and incidental text are exempt.
Contrast is calculated using the relative luminance of the foreground and background colors per the WCAG formula. Online tools like WebAIM Contrast Checker make this trivial to verify.
Common Shopify contrast failures: pale-grey body text on white backgrounds, brand-color buttons that fall short of 3:1 against the page, secondary navigation links rendered in low-contrast colors for "subtle" visual hierarchy.
How this applies to Shopify stores
AccessComply's ColorContrastAgent detects every contrast failure on a storefront, computes the closest brand-aligned passing color (preserving hue while raising lightness), and applies the fix to your theme's CSS variables.
Primary source: w3.org