Серый цвет в дизайне сайта: от палитры до читаемого интерфейса

Серый цвет в дизайне: начните с роли, а не с настроения

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

Мы предлагаем начать с простого правила: второстепенное не должно становиться нечитаемым. Светло-серую поверхность можно оставить почти незаметной, а подпись на ней нужно проверить по контрасту. Например, в восьмибитной шкале sRGB самый светлый нейтральный серый для обычного текста на белом по порогу WCAG AA — #767676. Следующий оттенок, #777777, уже не проходит. Ниже покажем расчёт и его ограничения.

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

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

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

Шкала серого: нейтральные, тёплые и холодные оттенки с HEX

В шестизначной HEX-записи sRGB пары цифр задают красную, зелёную и синюю компоненты. В нейтральной шкале они равны: #242424, #666666, #A3A3A3. Для тёплых и холодных вариантов мы подобрали оттенки с небольшим различием компонентов. Названия в таблице условные: это наши образцы для макета, а не стандартная палитра.

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

Как выбрать температуру

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

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

Вместо десятка оттенков «на глаз» заведите именованные роли: фон страницы, поверхность карточки, основной текст, дополнительный текст, декоративная линия, граница поля, недоступное состояние. Один HEX может занимать несколько ролей, пока это подходит их задачам. Так при смене фона будет понятно, какие пары нужно пересчитать.

Как распределить серый между текстом, фоном и элементами

Основной и второстепенный текст

Для основного текста на светлой странице начните с графитового #242424, для вспомогательной подписи на белом — с #666666. Между ними можно построить иерархию без бледных букв: заголовок сделать крупнее, пояснение короче, метаданные вынести на отдельную строку. Не осветляйте цену, срок или условие доставки только ради аккуратной карточки.

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

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

Фон страницы и поверхности карточек

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

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

Рамки, разделители и поля

Тонкая линия #D4D4D4 на белом даёт контраст около 1,48:1. Для декоративного разделителя между уже различимыми секциями это само по себе не нарушение критерия 1.4.11. Но если такая линия — единственный видимый контур поля ввода, её недостаточно для порога 3:1. Роль элемента определяет проверку; одинаковый HEX не даёт одинакового ответа для всех мест страницы.

У поля можно сделать более тёмный контур, а декоративную линию оставить светлой. Для нейтральной границы на белом #949494 даёт около 3,03:1. Это числовая граница для указанной пары, а не рекомендация делать все рамки едва проходящими. Проверьте толщину, масштаб и окружение контура в реальной вёрстке.

Кнопки и ссылки

Активная кнопка может быть серой: например, белая надпись #FFFFFF на заливке #444444 даёт 9,74:1. Чтобы её было легко отличить от недоступного действия, задайте ясную форму, подпись и состояния наведения и фокуса. Не используйте один и тот же светло-серый вид для вторичной рабочей кнопки и для отключённой.

Ссылку внутри абзаца предлагаем подчёркивать. На монохромной странице попытка отличить её лишь соседним оттенком серого потребует особенно внимательной проверки. Критерий 1.4.1 требует передавать смысл не одним цветом. Подчёркивание, текстовая подпись состояния и отметка выбранного пункта помогут сделать назначение явным.

Какой самый светлый серый проходит WCAG на белом

#767676 — самый светлый восьмибитный нейтральный серый, который достигает 4,5:1 на белом #FFFFFF. Его расчётный контраст — 4,5422:1. Следующий #777777 даёт 4,4781:1 и не проходит. Речь о сплошных непрозрачных цветах sRGB с равными компонентами R, G и B. Для тёплого или холодного серого нет одного общего предельного HEX: считайте выбранную пару.

В WCAG 2.2, критерий 1.4.3 уровня AA, минимальный контраст обычного текста — 4,5:1, крупного — 3:1. Крупный текст начинается с 18 pt обычного или 14 pt жирного начертания. Небольшая подпись на кнопке не становится крупным текстом из-за того, что она набрана заглавными буквами.

Мы перебрали все 256 нейтральных серых по формуле WCAG: сначала преобразовали компоненты sRGB в линейные значения и вычислили относительную яркость, затем нашли отношение (Lсветл + 0,05) / (Lтёмн + 0,05). Ниже — результаты для типичных ситуаций. Значения для показа округлены до двух знаков; прохождение порога определено по полному числу.

Пограничные случаи полезны для понимания метода, но в рабочей палитре мы бы оставляли запас. #767676 проходит на белом, а на чуть более тёмном фоне #F5F5F5 уже даёт 4,17:1. Если одна подпись встречается на обеих поверхностях, начните с более тёмного #666666 и проверьте остальные места её применения.

Есть и ловушка округления: #959595 на белом выглядит в таблице как 3,00:1, но точное отношение около 2,9953:1. До 3:1 оно не дотягивает. Для нейтрального серого на белом самый светлый проходящий вариант по этому порогу — #949494. Не округляйте результат вверх, когда принимаете решение о соответствии.

По критерию 1.4.11, AA визуальные признаки, необходимые для распознавания компонента и его состояния, а также значимые части графики должны иметь минимум 3:1 к соседним цветам. У него есть исключения, в том числе для неактивных компонентов и неизменённого автором оформления браузера. Порог 3:1 для контура поля не заменяет порог 4,5:1 для обычного текста внутри.

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

Неактивные элементы: где исключение, а где ошибка

Серым удобно обозначить недоступное действие в учебном макете, но сам по себе оттенок не определяет состояние. У светло-серой кнопки может быть работающий обработчик, а у графитовой — настоящий запрет взаимодействия. Согласуйте поведение с оформлением: пользователь должен понимать, что произойдёт при попытке нажать.

Пояснение W3C к критерию 1.4.3 определяет неактивный компонент так: «An inactive user interface component is visible but not currently operable» — компонент виден, но сейчас не действует. Для текста действительно неактивного компонента предусмотрено исключение из требования контраста. В критерии 1.4.11 такие компоненты также исключены. Это не основание осветлять все второстепенные элементы интерфейса.

Например, кнопка отправки пока недоступна, потому что не выбрана обязательная опция. Её оформление может быть приглушённым, но причину лучше написать рядом обычным читаемым текстом: «Чтобы продолжить, выберите способ доставки». Так не придётся угадывать, сломана форма или нужно что-то заполнить. Эта поясняющая фраза не становится неактивной частью кнопки от одного соседства с ней.

В HTML атрибут disabled у поддерживаемого элемента меняет поведение: элемент не получает фокус, его нельзя редактировать, а значение не отправляется с формой. Простая серая заливка этого не делает. Поле только для чтения, readonly, может оставаться фокусируемым; не считайте эти состояния взаимозаменяемыми.

• Вторичная кнопка работает. Сохраните читаемую надпись и видимые состояния. Более спокойная роль не даёт исключения из требований контраста.
• Действие недоступно. Обозначьте состояние поведением элемента и объясните, как продолжить, если такой путь есть.
• Товара нет в наличии. Статус остаётся информацией для чтения. Не переносите на него исключение для отключённой кнопки покупки.
• Поле доступно только для чтения. Значение всё ещё нужно человеку; проверьте его контраст и ясность состояния.

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

Корпоративный и премиальный серый фон

Для корпоративного сайта попробуйте светлые серые поверхности вокруг фактического содержания: направлений работы, документов, характеристик, команды. Холодный ряд из таблицы можно взять для первого эскиза B2B-проекта или технического каталога. Чтобы передать деловой характер, поддержите его спокойной сеткой и ясными подписями. Серый не служит доказательством компетентности — документы и условия работы должны говорить сами за себя.

В такой версии начните с фона #F1F3F5 и текста #252B35. Цветное действие вынесите в отдельную роль, а обычные подписи оставьте нейтральными. Проверьте страницу со множеством данных: заголовки столбцов, единицы измерения, примечания и выбранные фильтры. Если важное различается только тонким изменением серого, добавьте текстовую отметку или форму.

Для премиальной подачи можно примерить тёплый #F4F3F1 к графитовому #292725, крупной предметной фотографии и свободной композиции. У этой пары контраст 13,42:1. Она подойдёт как отправная точка для эскиза интерьерного проекта, керамики или мебели, если нужен сдержанный образ. Сравните его с холодным рядом на тех же фотографиях и текстах.

Тёмная галерея — ещё одно направление: поверхность #242424, основной текст #F5F5F5 и подписи #A3A3A3. У основного текста контраст 14,24:1, у подписей — 6,15:1. Оба результата относятся именно к этой поверхности. Если подпись переедет на светлую карточку, её цвет нужно пересмотреть.

Не переносите в тёмную версию ту же последовательность «чем светлее, тем менее важно», которую применяли на белом. Здесь светлая надпись может стать основным текстом, средняя — подписью, а тёмный оттенок — поверхностью. Две темы удобнее собирать по ролям. Общую логику выбора разбираем в статье о светлой и тёмной теме сайта.

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

Когда стоит добавить цвет

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

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

С чем сочетать серый: четыре палитры для макета

Ниже — четыре авторских примера с заданными ролями цветов. Рядом могут хорошо смотреться образцы, которые нельзя использовать для текста друг на друге. На схеме мы показываем роли, а контраст подписи на цветной кнопке считаем отдельно.

Холодный серый и синий

Возьмите #F1F3F5 для фона, #252B35 для текста и #1D4ED8 для основного действия. Белая надпись #FFFFFF на такой синей кнопке даёт 6,70:1. Попробуйте сочетание в эскизе с документами, таблицами или технической иллюстрацией. Более подробные варианты есть в статье про синий цвет в веб-дизайне.

Если синим уже выделены ссылки и выбранные разделы, не делайте им же все декоративные линии. Разведите задачи: нейтральные поверхности объединяют содержание, цвет указывает действие или выбор. Проверяйте выбранную вкладку не только по заливке: добавьте, например, линию и понятное название раздела.

Нейтральный серый и красный

Фон #F5F5F5, основной текст #242424 и красный #B42318 можно примерить к редакционному или предметному проекту, которому нужен выразительный акцент. Белая надпись #FFFFFF на этом красном даёт 6,57:1. Оставьте рядом достаточно спокойного пространства и посмотрите, какое действие оказывается главным.

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

Тёплый серый и глубокий зелёный

Для предметной подачи попробуйте #F4F3F1, текст #292725 и акцент #25634A. На зелёной заливке белая надпись #FFFFFF даёт 7,09:1. Начните с одного заметного действия и фотографии материала рядом. Если на снимках много зелени, проверьте, не теряется ли кнопка в общем цветовом пятне.

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

Графитовый монохром без цветной кнопки

Пара #242424 и #F5F5F5 с подписью #A3A3A3 позволяет собрать тёмную галерею без яркого акцента. Действие выделите ясной формой, размером и свободным местом вокруг. Для кнопки попробуйте светлую заливку с тёмной надписью и отдельно сравните её с обычной текстовой ссылкой.

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

Ошибки, из-за которых серая палитра перестаёт работать

• Приглушили всё второстепенное до #AAAAAA. На белом такой текст даёт 2,32:1 и не проходит AA для обычного текста. Верните подписи достаточный контраст, а её место в иерархии покажите интервалом и размером.
• Взяли один серый для всех фонов. #767676 проходит на белом, но не достигает 4,5:1 на #F5F5F5. Запишите пары «текст — поверхность» и проверьте повторно используемые компоненты.
• Сделали рабочую кнопку похожей на отключённую. Сравните активное, наведённое, сфокусированное и недоступное состояния рядом. Пусть различаются поведение и понятные признаки, а не только едва заметный оттенок.
• Распространили исключение disabled на пояснения. Условия, статус наличия и причина недоступности остаются информацией для чтения. Оставьте их контрастными.
• Одинаково ослабили декоративную и рабочую границу. Для обнаружения поля может понадобиться более тёмный контур, чем для разделения уже различимых секций. Проверьте назначение каждой линии.
• Назвали палитру доступной после одного измерения. Проверьте остальные пары, состояния, фокус и смысл сообщений. Контраст одной кнопки не подтверждает доступность страницы целиком.

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

Как проверить серый интерфейс перед вёрсткой и после неё

1. Соберите образец с настоящим содержанием. Заголовок, абзац, карточка, таблица, поле ввода, ссылка и кнопка покажут больше, чем ряд цветных квадратов. Возьмите и длинные, и короткие подписи.
2. Назначьте цвета ролям. Запишите HEX основных поверхностей, текстов, рабочих контуров и состояний. Для тёмной темы подготовьте отдельные значения.
3. Проверьте фактические пары. Измерьте контраст на каждом фоне. Для прозрачности учитывайте итоговый цвет, для фотографии — место надписи. Порог сравнивайте с точным результатом.
4. Пройдите форму без мыши. По критерию 2.4.7 при работе с клавиатуры должен быть виден фокус. Убедитесь, что его индикатор не теряется на соседних поверхностях.
5. Проверьте исключения по смыслу. Действительно ли кнопка недоступна? Не спрятали ли вы рядом нужное пояснение? Можно ли понять выбранный пункт и сообщение об ошибке без различения цветов?
6. Откройте готовую страницу на телефоне. Прочитайте подписи в реальном размере, проверьте длинные строки и расположение пояснений. Попросите человека выполнить обычную задачу и наблюдайте, где ему приходится искать действие или догадываться о состоянии.

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

Частые вопросы

Какой серый выбрать для второстепенного текста на белом?

Для начала попробуйте #666666: на #FFFFFF он даёт 5,74:1. Предельный самый светлый нейтральный восьмибитный серый для порога 4,5:1 — #767676. Сменили фон, добавили прозрачность или выбрали тёплый оттенок — проверьте пару снова. Второстепенная роль текста не освобождает от требований контраста.

Почему #777777 не проходит WCAG, хотя кажется достаточно тёмным?

На белом его точный контраст около 4,4781:1, ниже 4,5:1. Название и зрительное впечатление не заменяют расчёт. Для крупного текста он достигает порога 3:1, но небольшую подпись или обычный абзац по этому исключению оценивать нельзя.

Можно ли делать неактивную кнопку светло-серой?

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

Все серые рамки должны иметь контраст 3:1?

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

Серый сайт обязательно выглядит скучно?

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

Какой серый подходит для тёмной темы?

Начать можно с поверхности #242424, основного текста #F5F5F5 и подписи #A3A3A3. Их контраст к поверхности — 14,24:1 и 6,15:1 соответственно. Проверьте эти пары в меню, кнопках и полях, затем отдельно оцените индикатор фокуса и остальные поверхности.

Источники

• Формула контраста, относительная яркость sRGB и определение крупного текста — W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation, 12 December 2024 — стандарт и определения.
• Контраст текста, заполнителей и исключения для неактивных компонентов — W3C WAI, Understanding SC 1.4.3: Contrast (Minimum), WCAG 2.2 — пороги и пояснения.
• Различимость компонентов, состояний и значимой графики — W3C WAI, Understanding SC 1.4.11: Non-text Contrast, WCAG 2.2 — нетекстовый контраст.
• Дополнительные признаки помимо цвета — W3C WAI, Understanding SC 1.4.1: Use of Color, WCAG 2.2 — передача смысла в интерфейсе.
• Видимый фокус клавиатуры — W3C WAI, Understanding SC 2.4.7: Focus Visible, WCAG 2.2 — пояснение критерия.
• Запись экранных цветов — MDN Web Docs, <hex-color> — компоненты sRGB в HEX.
• Поведение отключённых элементов формы — MDN Web Docs, HTML attribute: disabled — отличие disabled от readonly.

Палитры и пороговые HEX в статье — наши учебные примеры и вычисления по формуле WCAG для непрозрачных однотонных цветов sRGB. Прохождение порога определялось до округления. Расчёт одной пары не подтверждает соответствие всего сайта стандарту.