WCAG AAA: recommendation Priority: Minor
Text does not reach the higher (AAA) contrast level
Some text meets the basic contrast level but not the stricter one: 7:1 for normal text and 4.5:1 for large text. This is a recommended practice beyond WCAG AA, not a requirement.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Higher contrast helps shoppers with moderate low vision, older customers and anyone reading a phone in sunlight. It makes prices and buttons easier to read for everyone, but missing it is not a failure at the AA level the law relies on.
Who is affected
- people with low vision
- older customers
- people with colour vision deficiency
- people on mobile in bright light
How to fix it
Where practical, raise the contrast to 7:1 for normal text and 4.5:1 for large text (24px, or 18.66px bold), starting with body text, prices and checkout. Darken text colours or lighten backgrounds in the design tokens or CSS. Fix the basic 4.5:1 contrast problems (the color-contrast rule) first; this check is only a suggestion on top.
On Shopify
Usually comes from the theme's colour scheme. Choose darker text colours in the theme editor's colour settings; if the theme hard-codes colours, change them in the theme's CSS.
On Shoptet (CZ)
Usually comes from the chosen template and its colour settings. Pick darker text colours in the template settings, or add custom CSS through Shoptet's custom code options.
On PrestaShop
Usually defined in the theme's CSS. Override colours in the theme's custom CSS file or a child theme; some themes have colour options in their configuration module.
On WooCommerce
Usually set by the active theme or page builder. Adjust colours in the theme's customizer or global styles, or override them in a child theme's CSS.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.1 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.0 | 1.4.6 (AAA) Contrast (Enhanced) |
Automated check: axe-core rule color-contrast-enhanced.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Text does not reach the higher (AAA) contrast level
WCAG 1.4.6 AAA
-
Links with the same text lead to different places
WCAG 2.4.9 AAA
-
The page refreshes itself after a delay, even a long one
WCAG 2.2.4 AAA