Перейти до вмісту
Pandus
uk Змінити мову
Меню

Вимога WCAG A/AA Пріоритет: Серйозно

Текст важко прочитати через низький контраст

Деякий текст надто світлий на своєму тлі, наприклад сірий на білому або білий на блідій кнопці.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

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

Кого це стосується

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

Як виправити

Забезпечте коефіцієнт контрасту щонайменше 4.5:1 для звичайного тексту і 3:1 для великого (24px або 18.66px жирним). Перевірте плейсхолдери, елементи, що виглядають неактивними, текст на зображеннях і значки знижок. Виправляйте кольори в дизайн-токенах або CSS, а не для кожного елемента окремо.

У Shopify

Зазвичай це залежить від колірної схеми теми. Спершу змініть кольори тексту й тла в налаштуваннях кольорів редактора теми; якщо кольори прописані в коді, змініть їх у CSS або секціях Liquid теми.

У Shoptet (CZ)

Зазвичай це залежить від вибраного шаблону та його налаштувань кольорів. Змініть кольори в налаштуваннях шаблону або додайте власний CSS через можливості власного коду, які надає Shoptet.

У PrestaShop

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

У WooCommerce

Зазвичай кольори задає активна тема або конструктор сторінок. Змініть їх у Customizer теми чи глобальних стилях або перевизначте в 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

Схожі перевірки

Усі правила, які ми перевіряємо