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
Похожие проверки
-
Текст не достигает повышенного уровня контраста (AAA)
WCAG 1.4.6 AAA
-
Ссылки с одинаковым текстом ведут в разные места
WCAG 2.4.9 AAA
-
Страница сама обновляется через некоторое время, даже долгое
WCAG 2.2.4 AAA