Контраст по WCAG · бесплатно
Проверю контраст текста на креативе
Найду каждый блок текста, отделю буквы от фона и посчитаю контраст. Покажу, какие надписи не читаются, и сколько не хватает до нормы.
1. Площадка
2. Картинка
Перетащите карточку или баннерДля технической проверки файл остаётся на устройстве
Покажите файл — сверю его с требованиями Wildberries за секунду, а потом проверю контраст, читаемость и оффер.
Как я проверяю
- Нахожу блоки текста и их роль: заголовок, цена, скидка, кнопка, мелкий текст.
- Внутри рамки делю пиксели на буквы и фон порогом Оцу и считаю контраст по формуле WCAG 2.x.
- Порог — 4,5 : 1 для обычного текста и 3 : 1 для крупного: от 24 px на экране или от 18,7 px у заголовка, цены и кнопки.
- Размер на экране беру из площадки: карточка в выдаче маркетплейса — 180 px шириной, лента соцсети — 360 px.
Частые ошибки
- Белый текст на светлом фото товара без плашки.
- Серая «элегантная» подпись на белом — обычно 2–3 : 1.
- Красная цена на оранжевом фоне: контраст по яркости почти 1 : 1.
Другие проверки
Проверка для площадок
Частые вопросы
Что такое контраст 4,5 : 1?
Отношение яркости светлого цвета к тёмному по стандарту WCAG. Чёрный на белом — 21 : 1, одинаковые цвета — 1 : 1. С 4,5 : 1 обычный текст читается на телефоне при дневном свете.
Почему контраст на фото считается неточно?
Фон под текстом бывает пёстрым. Я считаю средний цвет букв и средний цвет фона внутри рамки — на градиенте реальный контраст в худшей точке ниже.
Как исправить?
Темнее буквы, плашка под текстом или затемнение фото под надписью. Нейро делает это в режиме «Улучшить под CTR» и проверяет результат тем же способом.