Перейти к содержимому
Pandus

WCAG AAA: рекомендация Приоритет: Незначительно

Текст не достигает повышенного уровня контраста (AAA)

Часть текста соответствует базовому уровню контраста, но не более строгому: 7:1 для обычного текста и 4.5:1 для крупного. Это рекомендуемая практика сверх уровня WCAG AA, а не обязательное требование.

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

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

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

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

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

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

Где это возможно, повысьте контраст до 7:1 для обычного текста и 4.5:1 для крупного (24px или 18.66px жирным), начиная с основного текста, цен и оформления заказа. Затемните цвета текста или осветлите фон в дизайн-токенах или CSS. Сначала исправьте базовые проблемы контраста 4.5:1 (правило color-contrast); эта проверка — лишь дополнительный совет.

В Shopify

Обычно это зависит от цветовой схемы темы. Выберите более тёмные цвета текста в настройках цветов редактора темы; если цвета прописаны в коде, измените их в CSS темы.

В Shoptet (CZ)

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

В PrestaShop

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

В WooCommerce

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

Стандарты

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

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

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