Color contrast requirements for ecommerce: WCAG ratios and common failures

Color contrast is the most frequently detected accessibility failure in automated ecommerce scans. It appears on virtually every site: in sale badges, placeholder text, disabled form controls, footer links, breadcrumbs and promotional banners. It is also the failure that is easiest to fix once you know what to look for. For a full list of WCAG criteria relevant to ecommerce, see our WCAG 2.1 AA ecommerce checklist.

In Complyko's scan data from 382 ecommerce stores, 94% had at least one color contrast failure. Contrast is also one of the most commonly cited issues in ADA lawsuits. The average store had 8.3 distinct contrast failures. Many of these failures affect multiple instances across the site, meaning a single color pairing used in a reusable component can generate hundreds of individual violations.

What contrast ratio does WCAG 1.4.3 require for text?

WCAG 1.4.3 (Contrast Minimum, Level AA) requires:

• 4.5:1 minimum contrast ratio for normal text (text smaller than 18pt, or smaller than 14pt if bold).
• 3:1 minimum contrast ratio for large text (18pt or larger, or 14pt or larger if bold).

The contrast ratio is calculated between the text color and its immediate background. A ratio of 1:1 is no contrast (same color). A ratio of 21:1 is maximum contrast (black on white or white on black).

Converting the point sizes to pixels (assuming standard 96 DPI resolution): 18pt equals 24px. 14pt equals approximately 18.67px. So the 3:1 threshold applies to text at 24px or larger, or bold text at approximately 19px or larger.

Exemptions from WCAG 1.4.3:

• Inactive user interface components (disabled form controls, unavailable buttons). The text in a disabled button does not need to meet contrast requirements. However, users must still be able to identify that the button is disabled.
• Pure decoration (text that is decorative and conveys no information).
• Logos and brand names.
• Text in images that are not used as essential content (though image text is generally inaccessible for other reasons).

What does WCAG 1.4.11 require for non-text elements?

WCAG 1.4.11 (Non-text Contrast, Level AA, added in WCAG 2.1) requires a 3:1 contrast ratio for:

• User interface components: the visual boundary of form inputs (the border of a text field, the outline of a checkbox), the focus indicator, and other visual information required to identify the control.
• Graphical objects: parts of graphics that are required to understand the content (chart bars, icons that convey meaning, SVG illustrations used as informational content).

Common ecommerce failures under 1.4.11:

• Light grey borders on text inputs (#cccccc border on white background fails: ratio is approximately 1.6:1).
• Checkbox and radio button borders that are too light to distinguish from the background.
• Focus outlines that do not have 3:1 contrast against the adjacent colors.
• Icon-only buttons where the icon color does not have 3:1 contrast against its background.
• Thin underlines used as the only indication of a link failing 3:1 against the background.

Sale badges: why they almost always fail WCAG

Sale badges, "New" labels, "Low Stock" indicators and promotional tags are one of the most common sources of contrast failures on ecommerce sites. The reasons:

• Designers often choose bright, saturated colors for promotional badges: bright red, hot orange, vivid green. These colors pair poorly with white text. Bright red (#ff0000) with white text has a contrast ratio of 4:1, which fails the 4.5:1 requirement for normal text.
• Badge text is often small (12px or 13px) because badges are overlaid on product images in constrained spaces. Small text requires the stricter 4.5:1 ratio, not the 3:1 large-text threshold.
• Badges frequently use yellow or light orange backgrounds with white text, which fails catastrophically: yellow (#ffff00) with white text has a ratio of approximately 1.07:1.

Common solutions:

• Use dark text on light badges rather than white text on saturated badges. Dark text (near-black) on a light red or pink background can achieve 4.5:1 while still communicating the "sale" visual language.
• Darken the badge background color until it achieves sufficient contrast with white text. A dark red (#b91c1c) with white achieves 5.26:1.
• Use the browser-based contrast checkers to verify every color combination before committing to a design.

Placeholder text contrast failures

Placeholder text in form inputs is one of the most pervasive contrast failures on ecommerce sites. The typical failure: default browser placeholder styling renders placeholder text at approximately 40-50% opacity of the normal text color. On a white background with dark text, the placeholder color ends up around #aaaaaa or #999999, which fails the 4.5:1 requirement.

Some design systems intentionally style placeholder text to be light and grey to visually distinguish it from user-entered text. This intent is understandable but creates a WCAG 1.4.3 failure.

The fix: set an explicit placeholder color with sufficient contrast. A color of #767676 on a white background achieves exactly 4.54:1, barely meeting the requirement. A color of #6b7280 (Tailwind's gray-500) on white achieves approximately 4.6:1. Go slightly darker if your background is off-white.

Note: placeholder text should never be used as the only label for an input. WCAG 1.3.1 requires that form inputs have persistent labels. Placeholder text disappears when the user starts typing, removing the label entirely. Use placeholder text only as supplementary hint text, with a proper visible label above the input. Our accessible forms guide covers label association in detail.

Disabled button contrast

WCAG exempts disabled (inactive) components from contrast requirements. A disabled add-to-cart button showing greyed-out text does not need to meet 4.5:1. However, two caveats apply in ecommerce contexts:

First, a button that is disabled because a required selection has not been made (no size selected, no variant chosen) must still communicate clearly that the button exists and is currently inactive. A button so faded it is nearly invisible fails this practical requirement, even if not strictly required by WCAG.

Second, ensure that the button's disabled state is communicated programmatically, not just visually. A button styled to look disabled without the HTML disabled attribute or aria-disabled="true" is not semantically disabled. Screen readers will still announce it as an active button. WCAG 4.1.2 requires that the state of UI components be programmatically determinable.

Footer links and low-contrast text

Footer sections are a systematic source of contrast failures. The typical footer uses a dark background with links and text rendered in mid-grey or light grey colors. These color combinations look clean and modern but frequently fail contrast requirements.

Common failure pattern: dark navy footer background (#1e2d3d) with grey link text (#7a8fa6). Contrast ratio: approximately 2.8:1. Fails 4.5:1.

Footer links are subject to the same contrast requirements as all other text. The fact that they are in the footer does not change the requirement. Footer links often include legally required content: privacy policies, terms of service, accessibility statements and cookie preference links. These must be readable.

Quick fix: audit your footer text colors in a contrast checker. Lighten link and text colors until they achieve 4.5:1 against the footer background. On dark backgrounds, white and near-white colors achieve high contrast easily.

Text over product images

Promotional banners, hero images and product collection headers often overlay text on photographs. For guidance on writing effective alt text for these images, see our accessible product images guide. This creates a contrast problem that is difficult to solve automatically: the underlying image colors vary across the image surface, so there is no single background color to measure contrast against.

The WCAG guidance for text over images: the contrast requirement still applies. The text must have sufficient contrast against all the colors it appears over, not just the average background color.

Practical solutions:

• Semi-transparent overlay. Add a semi-transparent dark or light overlay behind the text to create a consistent background. A 50-60% opacity black overlay on most photographs creates a background dark enough for white text to achieve 4.5:1.
• Text shadow. A text shadow can improve contrast but is difficult to calibrate precisely for WCAG compliance. Do not rely on text shadow as the primary contrast mechanism.
• Solid background behind text. Place the text in a solid-color container overlaid on the image, rather than directly over the image. This provides a consistent, measurable background.
• Image cropping and composition. Choose product images where the intended text area has a consistent background: a plain sky, a solid-color surface. Brief your photography team or image selectors on this requirement.

Dark mode considerations for ecommerce

If your store supports a dark mode (triggered by the CSS prefers-color-scheme: dark media query), every color pairing must be verified in both light and dark modes. Dark mode introduces new contrast failures:

• Light blue links on dark backgrounds may have sufficient contrast in light mode but insufficient contrast in dark mode if the dark mode background is not dark enough.
• Colors used in branded elements (sale badges, promotional labels) may have been checked in light mode only.
• Focus indicators designed for light mode may not have sufficient contrast against dark mode backgrounds.

Test your dark mode color scheme systematically using the same contrast ratios required for light mode: 4.5:1 for normal text, 3:1 for large text and non-text elements.

Tools for checking contrast on ecommerce sites

For individual color pairs: WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) and the TPGi Colour Contrast Analyser desktop app. Both accept hex color values and return the contrast ratio immediately.

For browser-based checking: axe DevTools browser extension highlights contrast failures in context. See our accessibility testing tools guide for a full comparison of scanning tools, showing the actual element, the contrast ratio and the required ratio. Deque's axe-core (the underlying engine) is the most accurate automated contrast checker.

For design tools: Figma has built-in contrast checking plugins (Stark, A11y). Adobe XD and Sketch have similar plugins. Checking contrast in the design tool before implementation is more efficient than fixing it in the browser after deployment.

Automated tools cannot check contrast in all cases: text over images (variable background), text that overlaps gradients, and text rendered with CSS effects like text shadows. These cases require manual inspection.

Fixing contrast without breaking brand guidelines

The most common objection to fixing contrast failures: "our brand colors are defined and we cannot change them." This is often a false constraint. Brand guidelines define primary and secondary brand colors. They rarely specify that those colors must be used in every possible combination, including combinations that fail WCAG.

The practical approach: identify the specific color combinations that fail, then find the nearest compliant version. Darken the brand color slightly for text use. Use the brand color as an accent (border, icon) against a white or near-black background rather than as the text color on a mid-grey background. Use brand colors at larger sizes where the 3:1 threshold applies instead of 4.5:1.

Frequently asked questions

What contrast ratio does WCAG require for text?

WCAG 1.4.3 requires a 4.5:1 minimum contrast ratio for normal text (under 18pt) and 3:1 for large text (18pt or larger, or 14pt bold). These apply to all text on ecommerce sites including footer links, badges and placeholder text.

Do disabled buttons need to meet WCAG contrast requirements?

No. WCAG exempts inactive (disabled) UI components from contrast requirements. However, the button must be programmatically disabled with the HTML disabled attribute or aria-disabled to ensure screen readers communicate its state.

Why do sale badges usually fail WCAG contrast?

Sale badges typically use bright saturated colors (red, orange, yellow) with white text. Bright red with white text has only a 4:1 ratio, failing the 4.5:1 requirement. Darkening the badge color or using dark text on light badges fixes this.