Чтобы сделать надпись читаемой и красивой
Цвет шрифта влияет на восприятие текста не меньше, чем его содержание. Неудачный оттенок может снизить читаемость, сделать важную информацию незаметной и испортить общее впечатление от дизайна. В статье мы собрали 10 правил, которые пригодятся в работе с цветовой палитрой текста, помогут сохранить баланс между эстетикой и удобством чтения.
Один и тот же оттенок может выглядеть совершенно по-разному в зависимости от среды. Поэтому при работе с печатными и диджитал-материалами применяют разные цветовые модели:
Особого внимания требует работа с черным цветом. При печати чистый черный (K: 100%) может оказаться не таким насыщенным, как на экране, и смотреться темно-серым. Поэтому при подготовке, например, уличных баннеров, афиш и упаковок, дизайнеры часто используют составной черный.
Для этого к черной краске добавляют небольшое количество голубой, пурпурной и желтой, чтобы получить более глубокий и выразительный оттенок. Можно использовать следующие пропорции — C: 60%, M: 40%, Y: 40%, K: 100%.
В интерфейсах чистый черный на светлом фоне может смотреться слишком контрастным и быстрее утомлять глаза. Чтобы сделать текст комфортнее для восприятия и улучшить пользовательский опыт, дизайнеры чаще выбирают темно-серые оттенки — например, #2C2C2C или #333333.
На сайтах и в мобильных приложениях важно учитывать состояние элементов. Надписи на активных кнопках, ссылках, отключенных полях и элементах при наведении должны отличаться друг от друга. Такой подход помогает аудитории быстрее ориентироваться на странице. Например, в приложении для вязания карточки уроков, временно недоступные пользователю, сделали менее контрастными.
Главная задача текста — передавать информацию, поэтому удобство восприятия должно быть важнее его внешней привлекательности. За комфорт чтения отвечает контраст между буквами и фоном.
Высокий контраст лучше подходит для длинных текстов — например, для инструкций, описаний услуг и статей. Он снижает нагрузку на глаза, поскольку читателю не приходится напрягать зрение, чтобы разобрать написанное.
Низкий контраст можно использовать для второстепенных элементов: подписей, подсказок, примечаний и других вспомогательных текстов небольшого объема.
При выборе цветовых сочетаний можно ориентироваться на рекомендации Web Content Accessibility Guidelines — международного стандарта доступности цифровых продуктов. Он помогает создавать интерфейсы, которыми удобно пользоваться людям с разными особенностями восприятия, в том числе с нарушениями зрения. Например, по WSAG оптимальным считается соотношение контрастности 4.5:1.
Важно учитывать и особенности цветового восприятия людьми с нарушениями зрения. Например, сочетания красного и зеленого или синего и желтого могут быть проблемными для пользователей с цветовой слепотой: некоторые оттенки они различают хуже или не видят вовсе.
Если сайт рассчитан на широкую аудиторию, можно предусмотреть отдельный режим с повышенной контрастностью для слабовидящих пользователей.
Цвет текста должен поддерживать визуальную систему бренда и сочетаться с его общей палитрой.
Разные оттенки могут вызывать определенные эмоции. Синий часто ассоциируется с надежностью и спокойствием, красный — с энергией, вниманием и срочностью. Поэтому цвет шрифта важно выбирать не только с точки зрения дизайна, но и с учетом смысла, который должен передавать текст.
Например, зеленый цвет часто связывают с природой, экологичностью и натуральностью. Поэтому производители продуктов здорового питания часто используют его для надписей на упаковках.
Значение цветов может меняться в зависимости от культурного контекста. Например, в западных странах белый считается символом чистоты и праздника, а в некоторых восточных культурах — символом траура. Поэтому при создании материалов для международной аудитории важно изучать особенности восприятия цветов в конкретном регионе.
Пользователи привыкли воспринимать некоторые цвета как визуальные сигналы. Например, серый текст в форме обычно указывает на неактивное поле или недоступное действие. Красный — предупреждает об ошибке или проблеме, а зеленый сигнализирует об успешном выполнении операции.
Если нарушить эти паттерны, можно создать путаницу. Например, зеленый текст с сообщением об ошибке или красная отметка успешного действия будут противоречить ожиданиям пользователя.
Цвет помогает читателю быстро считать структуру текста и выделить главное. Если все элементы на странице оформлены одинаково, пользователю сложнее определить, на что обратить внимание в первую очередь.
Для разных уровней информации можно подобрать разные оттенки. Есть и другой вариант — взять один цвет, но с разной степенью контрастности и насыщенности.
Посмотрим на расписание конференции Young Con. Локацию и имена экспертов дизайнеры выделили желтым цветом. А регалии спикеров и время их выступлений написали белым шрифтом.
Чтобы текст не потерялся на странице, важно учитывать его визуальное окружение. Базовое правило простое: на светлом фоне лучше расположить темный текст, а на темном — светлый.
Если цвет шрифта сложный, например, градиентный, фон должен быть однотонным.
Если однотонный текст размещается на градиенте, важно проверить его читаемость на каждом участке цветовой растяжки. Оттенок, который хорошо выглядит в одной части изображения, может слиться с другой.
Чтобы буквы не сливались со сложным фоном, например, фотографией или иллюстрацией, можно добавить затемняющий или осветляющий оверлей, тень или обводку.
Подобрать гармоничное сочетание цветов поможет круг Иттена. С его помощью можно определить, какие оттенки хорошо сочетаются между собой и как распределить их в макете.
Например, можно воспользоваться триадной цветовой схемой. Она основана на сочетании трех оттенков, расположенных на равном расстоянии друг от друга. Один цвет можно использовать в качестве основного фона, второй — для текста, а третий оставить для акцентов.
Слишком большое количество оттенков на одной странице создает визуальный шум и мешает пользователю сосредоточиться на главном. Чтобы дизайн оставался гармоничным и легко воспринимался, обычно достаточно 2–3 основных цветов.
Обычно в визуальной системе бренда можно выделить базовый оттенок для больших массивов текста, акцентный — для заголовков, ссылок и важных элементов, таких как кнопки. Дополнительно можно использовать нейтральный цвет для подписей к иллюстрациям и другой второстепенной информации.
Чтобы пользователям было комфортно взаимодействовать с контентом в условиях слабого освещения, настройте темную тему. При этом нельзя просто заменить белый фон на черный и оставить прежнюю палитру. Цвета, которые хорошо работают в светлом интерфейсе, могут хуже восприниматься на темном фоне.
Вот несколько советов:
Важно проверять, как выбранная цветовая гамма выглядит на реальном контенте. Например, перед запуском сайта стоит протестировать шрифты и оттенки на разных страницах и в различных условиях использования.
Цвета могут меняться в зависимости от типа устройства и освещения вокруг. Решение, которое хорошо выглядит на мониторе при ярком свете, может оказаться менее читаемым на смартфоне в темной комнате.
Полезно проводить A/B-тестирование разных вариантов оформления и оценивать, как они влияют на поведение пользователей. Например, можно сравнить:
Когда решения принимают на основе данных, а не личных предпочтений, повышается эффективность дизайна. Например, растет конверсия сайта и повышается запоминаемость наружной рекламы.
Прямо сейчас мы тестируем новую услугу для компаний — ведение брендового блога в этом журнале.
Интересно? Напишите нам письмо на konvert@unisender.com с темой «Блог компании», чтобы обсудить подробности.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
