Цвета для сайта: как подобрать палитру под бренд и не потерять читаемость

Палитра начинается с назначения цвета

Хорошая палитра сайта помогает читать, выбирать и узнавать компанию. Подбирать цвета стоит по ролям в интерфейсе: фон, текст, действие, ссылка и состояние, а затем связывать эти роли с фирменным стилем, чтобы узнаваемость бренда не мешала человеку оформить обращение.

Выбор между любимым оттенком руководителя и удачным примером конкурента слишком узок. Оба варианта говорят о вкусе, но мало объясняют работу страницы. Для сайта услуг полезнее сначала определить, какое действие главное и какое содержание человек читает перед ним. Тогда яркость можно отдать кнопке обращения, а длинное объяснение оставить на спокойном фоне. Когда одинаково насыщены плашки, заголовки и все кнопки, посетителю приходится разбираться в приоритетах заново на каждом экране.

Цвет работает в паре. Фирменный оттенок по-разному работает на большой иллюстрации и в маленькой подписи, поэтому его пригодность оценивают вместе с фоном и размером текста в конкретном элементе страницы.

Фирменный цвет и рабочие оттенки

Сохранить узнаваемый цвет компании обычно проще через акценты, чем через заливку всех экранов. В палитру интерфейса при этом добавляют более тёмный вариант для текста и более светлый для фона, если исходный цвет не даёт читаемой пары. Это решение не меняет знак бренда. Оно задаёт способ пользоваться фирменным стилем в среде, где человек читает условия, выбирает услугу и вводит данные. Попросите дизайнера показать такой вариант рядом с буквальным переносом цвета логотипа: сравнение сразу станет предметным.

Что измерять вместо спора «слишком бледно»

Контраст можно посчитать. Он описывает различимость текста и его фона, поэтому помогает заменить субъективный спор измерением конкретной пары, которую посетитель увидит на странице.

В критерии WCAG 1.4.3 ориентир для обычного текста уровня AA составляет 4,5:1. Для крупного текста указан порог 3:1. Эти числа относятся к паре цветов, а не к оценке красоты всего макета. В задании на сайт их удобно закрепить как критерий читаемости. Приёмка тогда обсуждает измеренные сочетания для заголовка, основного текста и подписи, а не общее впечатление от презентации.

Крупным в пояснении W3C считается текст от 18 пунктов либо полужирный от 14 пунктов. Размер лучше уточнять у дизайнера вместе с фактическим отображением в браузере: название стиля в редакторе ещё не говорит, насколько крупным он станет на телефоне. Мелкие подписи требуют своего порога контраста: совпадение цвета с крупным заголовком не меняет требований к читаемости маленького текста.

Пары важнее образцов оттенков

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

Цифра не отменяет осмотр. Тонкий шрифт способен выглядеть слабее, чем ожидается по замеру цвета, поэтому крупный заголовок и длинное объяснение полезно прочитать в реальном размере на обычном экране.

Статус различают не одним оттенком

Красная рамка может остаться непонятной. Если посетитель не различает выбранные оттенки или смотрит на тусклый экран, сообщение об ошибке всё равно должно объяснить, какое действие требуется от человека.

В критерии WCAG 1.4.1 цвет не используется как единственный визуальный способ передать информацию или обозначить действие. Для компании это практическое правило работы формы: ошибочное поле получает понятный текст, а выбранный пункт — заметный признак выбора. Не нужно угадывать значение красного и зелёного. Словесное пояснение также помогает тому, кто прекрасно видит цвета, но не знает, какую именно часть номера телефона сайт отверг.

Лучше назвать причину рядом с полем, чем ограничиться красной обводкой всей формы: так человек исправит ввод, сохранив уже набранные сведения, а компания уберёт препятствие на последнем действии перед отправкой обращения. Обещать процент роста от одной подписи нельзя. Однако связь понятна без статистики: сообщение объясняет препятствие там, где оно возникло.

Ссылки и выбранные элементы

Для ссылки внутри абзаца устойчивым дополнением к цвету служит подчёркивание. В переключателе выбора можно использовать отметку и текстовое состояние. В графике данные различают подписями и формой линий. Эти способы не требуют отказа от палитры: они сохраняют её смысл для человека, который воспринимает цвета иначе. Поэтому при выборе между ещё одним оттенком и ясной подписью я оставлю подпись, если без неё теряется значение элемента. Вопрос здесь касается понимания действия, а не декоративного разнообразия.

Кнопка, рамка и фон решают разные задачи

Главная кнопка просит внимания. Её цвет стоит выбирать по отношению к окружающему экрану, потому что насыщенный акцент перестаёт выделяться, когда рядом столько же ярких карточек и рекламных плашек.

Критерий WCAG 1.4.11 задаёт контраст 3:1 для визуальной информации, необходимой для распознавания элементов управления и их состояний, относительно соседних цветов. Это ориентир для значимых границ, отметок и других признаков, по которым человек понимает интерфейс. Из него не следует обязанность обводить каждую кнопку рамкой: если элемент и его состояние различимы без границы, она может быть лишней. Поэтому просите показать назначение детали перед обсуждением её цвета.

Для сайта услуг я выберу один устойчивый вид основного действия, потому что посетителю приходится заново искать продолжение, если на одной странице кнопка обращения яркая, а на другой выглядит как второстепенная ссылка. Дизайнеру проще сохранить роль цвета, когда заказчик заранее различил обращение, дополнительное чтение и служебные действия. Тогда слово на кнопке и её оформление говорят об одном.

Светлая и тёмная тема

Тёмный вариант нельзя получить только заменой белого фона на чёрный. Палитру читают заново: текст, границы полей, статус ошибки и изображение товара оказываются рядом с другими цветами. Если компания заказывает обе темы, в состав работ входят обе системы пар, поскольку автоматически перевёрнутая фотография может исказить цвет товара, а слишком яркий акцент начнёт отвлекать от чтения основного текста. Для первого запуска разумно выбрать одну качественно подготовленную тему, если у второй нет ясной пользовательской задачи и бюджета на полноценную приёмку.

Фон тоже несёт нагрузку. Сильная фактура за длинным текстом заставляет искать буквы среди деталей, поэтому красивое оформление первого экрана не стоит механически переносить на условия услуги и форму.

Как собрать палитру и выбрать инструмент

Сервис сочетания цветов даёт отправную точку. Он удобен для поиска близких или контрастных оттенков, но результат предстоит перенести в реальную страницу, где появляются фотографии, длинные тексты и состояния полей.

Начните с фирменных материалов и содержания будущего сайта. Если брендбук уже задаёт цвета, дизайнер разбирает допустимые варианты их применения. Если его нет, маркетолог собирает примеры, которые передают нужное впечатление, и объясняет словами причину выбора: например, ему нравится спокойная подача, при которой условия легко прочитать и выделить главное действие. Следующий этап — небольшой фрагмент интерфейса с основным текстом, ссылкой и кнопкой, на котором сравнивают варианты. Так согласование опирается на чтение и действие.

Для передачи оттенка используют точную запись. Например, шестизначная запись #RRGGBB, описанная в спецификации CSS Color, задаёт компоненты красного, зелёного и синего. Маркетологу не нужно рассчитывать их вручную. Достаточно просить код цвета вместе с назначением, чтобы разработчик не восстанавливал оттенок по сжатой картинке из переписки.

Образец записи в задании

Образец задания: «Подготовить светлую палитру для сайта услуг, показав основной текст и подписи на фактическом фоне. Фирменный акцент использовать для главного действия, а второстепенные переходы оформить спокойнее. Для ошибок добавить текст с причиной. В передаче указать коды цветов, роли и пары, для которых измерен контраст». В эту заготовку добавляют фирменные ограничения и страницы, где будут длинное описание, карточка услуги и форма обращения.

Выбирайте инструмент по задаче. Генератор сочетаний помогает искать настроение, измеритель контраста — оценивать читаемость пары, а редактор интерфейса — видеть, как выбор работает с содержанием; один экран генератора не выполняет все три задачи.

Какой вариант дизайнер может защитить перед заказчиком?

Хороший ответ начинается с причины выбора. Дизайнер показывает на реальном экране, где цвет помогает узнать компанию, где выделяет главное действие и как текст остаётся читаемым на разных фонах, потому что решение о палитре должно объяснять удобство этого сайта и давать заказчику причину сохранить выбранные цвета при создании следующих страниц.

На приёмку стоит вынести небольшой набор реальных экранов. Нужны длинный текст, форма с ошибкой, выбранный элемент и страница с фотографией. Маркетолог читает их в обычном масштабе на телефоне и компьютере. Специалист дополняет это измерениями контраста для значимых пар. Такой состав показывает, какие решения уже работают, а где ещё требуется оттенок или текстовое пояснение. Общий обзор удобства можно продолжить по статье о конверсии сайта, но цветовую палитру принимают по её собственным задачам.

Попросите сравнить варианты на одинаковом содержании. Если первый макет показывает сильную фотографию и короткий заголовок, а второй — длинные условия без снимка, выбор станет спором о разной подаче. Для честного сравнения нужны те же слова, размеры и действия. Тогда заказчик сможет объяснить предпочтение и сохранить аргумент для следующих страниц.

Финальный вопрос подрядчику прост: «На каком фрагменте сайта я увижу, что выбранные цвета помогают посетителю прочитать условия и сделать нужное действие?» Ответом служит работающий фрагмент: на нём видно назначение каждого цвета и можно оценить чтение текста.