What color contrast ratio is required?

WCAG 2.1 Level AA requires 4.5:1 contrast for normal text and 3:1 for large text (18px+ or 14px bold). WCAG AAA raises these to 7:1 and 4.5:1. Failing contrast affects 8% of men and 0.5% of women with color vision deficiency, plus everyone reading in direct sunlight.

How contrast ratios work

Contrast ratio measures the relative luminance difference between foreground (text) and background colors. The scale runs from 1:1 (identical colors, zero contrast) to 21:1 (black on white, maximum contrast).

The human visual system can distinguish text reliably down to approximately 3:1 in ideal conditions. In challenging conditions — bright sunlight, dusty screens, aging eyes, color vision deficiency — the threshold rises substantially. WCAG 2.1 Level AA at 4.5:1 provides a buffer for real-world viewing conditions.

To calculate contrast ratio: use the WebAIM Contrast Checker (webaim.org/resources/contrastchecker), the browser-native DevTools accessibility panel, or the Figma Contrast plugin during design.

The size thresholds explained

Normal text: Any text at 17px or smaller (or non-bold text smaller than 24px) requires 4.5:1 minimum contrast.

Large text: Text at 18px and above, or bold text at 14px and above, requires only 3:1 minimum. This reflects that larger characters are easier to distinguish at lower contrast.

UI components and graphical elements: Borders of form fields, focus indicators, chart elements, and icons that convey information require 3:1 contrast against their adjacent color.

Decorative text: Text that is purely decorative and conveys no information (background watermarks, artistic typography that duplicates visible text) has no contrast requirement.

Where e-commerce stores commonly fail contrast

Sale price tags. Red sale prices on white backgrounds often fail — red (#FF0000) on white is only 3.99:1, below the 4.5:1 threshold for normal text. Deeper reds or larger text size resolves this.

Light grey body text. Many designs use #999999 or #888888 for secondary information (product codes, small print, dates). Grey #999 on white is only 2.85:1 — fails significantly. Shift to #767676 minimum (4.55:1) or #666666 for comfortable margin.

White text on colored buttons. Brand-color CTA buttons with white text frequently fail. A medium-blue brand color (#4A90D9) with white text is only 3.1:1. Either deepen the button color or use dark text.

Input field borders. Thin grey borders around form fields typically fail the 3:1 requirement for UI components. A border of #767676 or darker on white background meets the threshold.

Placeholder text. Placeholder text in form fields should ideally meet contrast requirements, though WCAG’s strict position is that it’s informational rather than decorative. Aim for at least 4.5:1 to be safe, and ensure placeholder text disappears when real label text is visible.

Promotional banners. Overlaying text on product photography without a dark overlay or text shadow almost always fails contrast — the background image creates unpredictable contrast across different screen calibrations and viewing conditions.

Practical tools

WebAIM Contrast Checker: webaim.org/resources/contrastchecker — input hex codes directly, instant result

Chrome DevTools: Inspect any element, click the color swatch in the computed styles panel, shows contrast ratio automatically

Figma: Plugins like Contrast or A11y – Color Contrast Checker provide inline checking during design

Stark (browser extension and Figma plugin): Full accessibility toolkit including contrast checking and color blindness simulation

Design-compatible approaches to meeting contrast

High contrast doesn’t mean ugly design. The constraint is specific: the contrast between text and its immediate background. This leaves enormous freedom for:

• Brand colors used as accent elements, borders, and decorative backgrounds (without text overlay)
• Colored UI elements at larger sizes (where 3:1 threshold applies)
• Dark text on light brand-colored backgrounds (often passes easily)
• Gradient backgrounds where text sits on the lightest section

The most common design adjustment: shift from light-brand-color backgrounds with white text to dark-brand-color backgrounds with white text, or light-brand-color backgrounds with dark text.

Review your color palette systematically before building: check each text color against each background it appears on. A one-day design review prevents weeks of developer rework. Book a call to discuss how to build accessibility into your design process from the start.