WCAG A/AA requirement Priority: Serious
Text is hard to read because of low contrast
Some text is too light against its background, for example grey text on white or white text on a pale button.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Shoppers who see less sharply, older customers and anyone using a phone outdoors may miss prices, delivery terms or button labels. Hard-to-read text leads to hesitation and abandoned carts.
Who is affected
- people with low vision
- older customers
- people with colour vision deficiency
- people on mobile in bright light
How to fix it
Make the contrast ratio at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). Check placeholders, disabled-looking states, text on images and sale badges. Fix colours in the design tokens or CSS rather than one element at a time.
On Shopify
Usually comes from the theme's colour scheme. Adjust text and background colours in the theme editor's colour settings first; if the theme hard-codes colours, change them in the theme's CSS or Liquid sections.
On Shoptet (CZ)
Usually comes from the chosen template and its colour settings. Adjust colours in the template settings, or add custom CSS through the custom code options Shoptet provides.
On PrestaShop
Usually defined in the theme's CSS. Override colours in the theme's custom CSS file or a child theme; some themes expose colour options in their theme configuration module.
On WooCommerce
Usually set by the active theme or page builder. Change colours in the theme's customizer or global styles, or override them in a child theme's CSS so updates do not undo the fix.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 1.4.3 (AA) Contrast (Minimum) |
| WCAG 2.1 | 1.4.3 (AA) Contrast (Minimum) |
| WCAG 2.0 | 1.4.3 (AA) Contrast (Minimum) |
| EN 301 549 4.1.1 | 9.1.4.3 |
| EN 301 549 3.2.1 | 9.1.4.3 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.4.3 |
Automated check: axe-core rule color-contrast.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Clickable elements are nested inside each other
WCAG 4.1.2 A
-
A table's title is written inside a table cell
WCAG 1.3.1 A
-
A clickable image only works with a mouse
WCAG 2.1.1 A
-
An image button has no text description
WCAG 1.1.1 A