Надпись может хорошо выглядеть в большом макете и теряться после уменьшения. Проверяйте баннер в том размере, в котором его увидит читатель: сначала основное предложение, затем условия и кнопку. Если смысл приходится разбирать по буквам, увеличьте текст, сократите формулировку или упростите фон.
Начните с конечного размера
Откройте экспортированный файл при масштабе 100%. Не оценивайте читаемость только в редакторе на увеличенном холсте. Отдельно проверьте мобильный вариант: пропорции, расстояния и переносы могут отличаться.
Отделите текст от фотографии
Пёстрый фон меняется под каждой буквой. Перенесите надпись на спокойный участок или добавьте однотонную подложку. После этого сравните варианты в конечном размере. Не рассчитывайте, что тонкая тень автоматически сделает любую надпись разборчивой.
Проверьте всю надпись
Крупный заголовок не компенсирует неразборчивые условия. Просмотрите все строки, включая цену, срок действия предложения и пояснения. Если места мало, пересмотрите композицию, а не уменьшайте весь текст до предела.
Сохраните проверенный вариант
После правок экспортируйте баннер повторно. Сравните финальный файл с утверждённым макетом: текст, фон, границы и поля должны совпадать. Перед передачей площадке ещё раз откройте именно тот файл, который собираетесь отправить.
Как измерить контраст цифрового баннера
Для текста на экране можно использовать критерий WCAG 2.2 уровня AA: не менее 4,5:1 для обычного текста и 3:1 для крупного. Это соотношение яркостей текста и фона, а не разница между значениями RGB. Возьмите цвета букв и фона в макете, задайте их в инструменте проверки контраста и сравните полученное число с порогом. Значение ниже порога нельзя округлить вверх ради прохождения проверки.
Крупным здесь считается текст от 18 пунктов обычного начертания или от 14 пунктов полужирного. В веб-вёрстке это соответствует 24 и примерно 18,7 CSS-пикселя. Оценивайте размер букв при показе баннера: если баннер уменьшается при показе, уменьшаются и буквы. Когда фактический размер трудно установить, проверяйте контраст по более строгому порогу 4,5:1.
Эти значения относятся к доступности веб-контента, включая изображения текста. Их нельзя объявлять универсальной нормой для печатного рекламного полотна. Для печати отдельно оценивают материал, освещение, размер букв и расстояние до зрителя. Соответствие экранному порогу также не гарантирует, что пользователь прочтёт мелкую или перегруженную надпись.
Почему цветовая пара проходит проверку, а текст всё равно читается плохо
Контраст — одна из проверок. Тонкий шрифт, тесные строки, сложная гарнитура и слишком длинный текст способны испортить читаемость даже на спокойном фоне. Сначала сократите предложение до главной мысли. Затем проверьте толщину штрихов и свободное место вокруг надписи. После каждой правки снова откройте экспортированный файл в конечном размере.
На фотографии измерения одной пары цветов недостаточно: под строкой могут оказаться и светлые, и тёмные участки. Проверьте несколько мест непосредственно под буквами. Если они сильно различаются, надёжнее выделить текст отдельной плашкой. У полупрозрачной плашки оценивайте итоговый цвет после наложения на изображение, а не только её цвет в настройках.
Пример проверки перед отправкой
Допустим, нужно подготовить светлый баннер с серым текстом. Проверьте выбранную пару цветов в инструменте контраста. Если число меньше требуемого, затемните текст или осветлите фон и повторите измерение. Не меняйте одновременно размер, шрифт и фон: так сложнее понять, что помогло. Когда контраст выбранных цветов достаточен, оцените тот же макет без увеличения и убедитесь, что условие акции не превратилось в мелкую неразборчивую строку.
Общие решения по композиции разбираем в статье о дизайне рекламного баннера. А перед размещением на смартфонах проверьте мобильные форматы и отображение.
Видео: контраст текста на экране
Короткий пример выбора цветов и проверки экранного текста. Число контраста проверяйте вместе с фактическим размером и толщиной букв.
