Accessible colour contrast: the how-to guide for e-commerce
In short — the contrast ratios you must meet
Contrast measures the difference in lightness between a foreground colour (text, icon) and its background. It's expressed as a ratio, from 1:1 (identical) to 21:1 (black on white). To comply with the European Accessibility Act (EN 301 549 / WCAG 2.1 level AA), in force for e-commerce since 28 June 2025:
- Body text: at least 4.5:1 between the text and its background (criterion 1.4.3);
- Large text: at least 3:1 — from 24 px regular, or 18.66 px (≈14 pt) bold;
- Components and meaningful icons: 3:1 — field borders, buttons, icons that carry meaning, the focus indicator (criterion 1.4.11);
- Never convey information by colour alone (criterion 1.4.1): a label, a pattern or text must back up any colour code;
- Logos and purely decorative elements: no contrast requirement.
Contrast is the failure most reliably flagged by automated tools — and one of the simplest to fix, once, at the level of your brand palette.
"Our brand is this elegant light grey." That's probably the sentence that creates the most accessibility failures on the web. Pale grey text on white, a brand-colour button that's too light, an error shown only in red: each is a barrier for people with low vision, colour blindness, or anyone reading a screen in bright sunlight. The good news: contrast is fixed at the level of your brand palette, once, and then benefits the entire store.
What a contrast ratio is, and why it matters
A contrast ratio compares the luminance (perceived lightness) of two colours. The calculation is defined by WCAG: it runs from 1:1 (no contrast) to 21:1 (pure black on pure white). The higher the ratio, the more the text stands out from its background. Two criteria set the thresholds for accessibility: WCAG 1.4.3 "Contrast (Minimum)" for text, and WCAG 1.4.11 "Non-text Contrast" for interface components and graphics. Both are level AA — so required by EN 301 549, the technical reference behind the European Accessibility Act, which has applied to e-commerce services since 28 June 2025.
Contrast isn't a minority concern: it improves readability for everyone, on every screen and in every lighting condition. It's also, alongside missing text alternatives, one of the two failures that automated scanners detect most reliably — which cuts both ways: it's easy to catch, so it's the first thing an auditor (or a complainant) will see.
The 6 rules for accessible contrast
At least 4.5:1 between text and its background
This is the baseline: any normal-size text must show a ratio of at least 4.5:1 against its background colour. It applies to paragraphs, labels, prices, legal notices and the footer. The most common trap: the "subtle" light grey.
#595959 on white (≈7:1), or #767676 on white (≈4.5:1, the lightest grey still acceptable).#999999 on white (≈2.8:1) or very light grey placeholder text: pleasant to the designer, unreadable for a share of your customers.→ See also the full EAA compliance checklist.
3:1 is enough — but only above a certain size
The threshold drops to 3:1 for "large text", defined precisely: at least 24 px regular weight, or at least 18.66 px (≈14 pt) when bold. Below those sizes, the 4.5:1 rule applies, even to a heading. So don't assume a heading escapes the requirement — check its real rendered size.
3:1 for anything non-text that carries meaning
Criterion 1.4.11 extends the requirement to essential non-text elements: the border or fill that makes a form field identifiable, a button outline, an icon that conveys information (basket, padlock, alert), the segments of a chart. Each must show at least 3:1 against what surrounds it. An input field bounded by a near-invisible grey fails here.
#767676 on white; an alert icon in a colour clearly detached from the background.The keyboard marker must be visible too
When you navigate with the keyboard (Tab key), the active element shows a focus indicator — usually an outline. That indicator is a non-text element: it must contrast at least 3:1 with the adjacent background to be perceivable. Never remove the default focus (outline: none) without providing a well-contrasted one in its place.
outline: none with no replacement, or a pale grey focus ring that's invisible.Information must not rely on colour alone
Distinct from contrast but closely linked: criterion 1.4.1 forbids conveying information by colour alone. A field in error shown only by a red border, a sale price written only in red, a link in a paragraph set apart only by its colour: all fail for a colour-blind person. Always back up colour with a label, a pattern, an icon or an underline.
Contrast must hold everywhere under the text
A white heading over a hero banner photo is the trickiest case: contrast varies pixel by pixel depending on the light or dark areas of the image. The ratio must be met across the whole area the text covers. Reliable fixes: a semi-opaque overlay (dark or light) between image and text, a solid colour band behind the text, or a strong enough text shadow.
The thresholds at a glance
| Element | Minimum ratio | WCAG criterion |
|---|---|---|
| Body text (<24 px, or <18.66 px bold) | 4.5:1 | 1.4.3 (AA) |
| Large text (≥24 px, or ≥18.66 px bold) | 3:1 | 1.4.3 (AA) |
| UI component (field border, button, meaningful icon) | 3:1 | 1.4.11 (AA) |
| Focus indicator (vs adjacent background) | 3:1 | 1.4.11 / 2.4.7 |
| Logo, decorative text, inactive element | no requirement | — |
| Level AAA (recommended, beyond the EAA) | 7:1 | 1.4.6 (AAA) |
How to check your own colours
Three free ways, from broadest to most precise:
- An automated scan (axe-core, WAVE, Lighthouse) detects text below the threshold on a solid background very well: it's one of the failures it flags most reliably, with the exact ratio and the offending selector.
- Your browser's tools: in the inspector (DevTools), the colour picker shows a text element's contrast ratio directly and tells you whether it passes AA/AAA.
- A pair checker (a "contrast checker"): when defining the palette, test every text/background pair before adopting it — that's where the fix costs the least.
The tools' blind spot: text over an image or a gradient, which scanners can't evaluate reliably (the background isn't a single colour). Those cases need a human check. This is exactly the kind of fix a clean, keyboard-and-contrast-checked checkout depends on, and it feeds straight into the express compliance test.
Check your store's contrast for free
DeclareAccess scans one page of your store with the axe-core engine against WCAG 2.1 AA, lists the text and components below the contrast threshold (with the exact ratio) and the other failures, then generates the ready-to-publish accessibility statement — English, French (RGAA), German (BFSG), Italian or Spanish template. Free, no credit card.
WCAG report by email within 1 business day.
Got it. Your audit request is recorded — you'll receive your WCAG report by email within 1 business day.
Frequently asked questions
How is a contrast ratio calculated?
WCAG defines a formula based on the relative luminance of the two colours: (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter colour and L2 that of the darker one. The result runs from 1:1 to 21:1. In practice you don't compute it by hand: a contrast checker, the browser inspector or an automated scan give the ratio instantly from two colour codes.
Does the 4.5:1 rule apply to my logo?
No. Logos and brand names (text that is part of a logotype) are explicitly exempt from the contrast requirement, as is purely decorative text and inactive interface elements (a disabled button, for example). But as soon as text conveys useful information — a heading, a price, a label — the rule applies.
My brand colour doesn't pass the threshold — what do I do?
You don't have to change your visual identity. The usual solution is to define a dark variant of the brand colour, reserved for text and interactive elements (links, buttons), while keeping the original tint for flat fills, backgrounds and decoration. The colour stays recognisable and the text becomes readable. Failing that, place the text on a neutral background (white, dark grey) rather than on the colour itself.
Does dark mode change the contrast requirements?
No, the thresholds are the same (4.5:1 and 3:1) — but they must be met in each theme. A colour that passes in light mode can fail in dark mode, and vice versa. If you offer a dark mode, check contrast separately in both. Many oversights come from grey text inherited from light mode that becomes unreadable on a dark background.
How do I handle text placed over a banner photo?
This is the trickiest case, because the background isn't a single colour. Contrast must be met wherever the text sits. Reliable fixes: add a semi-transparent overlay between image and text to even out the background, place the text on a solid colour band, or use a strong text shadow. Since automated scans don't evaluate this well, check it by eye on the real image.