Текст трудно читать из-за низкого контраста

Часть текста слишком светлая на своём фоне, например серый текст на белом или белый текст на бледной кнопке.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Покупатели с ослабленным зрением, люди старшего возраста и все, кто смотрит на телефон на улице, могут не разглядеть цены, условия доставки или подписи кнопок. Плохо читаемый текст вызывает сомнения и брошенные корзины.

Кого это касается

слабовидящие люди
покупатели старшего возраста
люди с нарушениями цветовосприятия
люди со смартфоном при ярком свете

Как исправить

Обеспечьте контраст не ниже 4.5:1 для обычного текста и 3:1 для крупного (24px или 18.66px жирным). Проверьте плейсхолдеры, состояния, похожие на неактивные, текст на изображениях и бейджи скидок. Исправляйте цвета в дизайн-токенах или CSS, а не у каждого элемента по отдельности.

В Shopify

Обычно это задаёт цветовая схема темы. Сначала настройте цвета текста и фона в разделе цветов редактора темы; если цвета зашиты в тему, измените их в CSS или Liquid-секциях темы.

В Shoptet (CZ)

Обычно это задают выбранный шаблон и его настройки цвета. Настройте цвета в параметрах шаблона или добавьте свой CSS через возможности пользовательского кода в Shoptet.

В PrestaShop

Обычно цвета заданы в CSS темы. Переопределите их в файле пользовательского CSS темы или в дочерней теме; в некоторых темах цвета настраиваются в модуле конфигурации темы.

В WooCommerce

Обычно цвета задаёт активная тема или конструктор страниц. Измените их в настройщике темы или глобальных стилях либо переопределите в CSS дочерней темы, чтобы обновления не отменили исправление.

Стандарты

Стандарты
Стандарт	Пункт
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

Автоматическая проверка: правило axe-core color-contrast. dequeuniversity.com, github.com, www.w3.org

Все правила, которые мы проверяем