Жёлтый цвет в дизайне: как собрать палитру сайта

Жёлтый цвет в дизайне: сначала решаем, где будут буквы

Яркую жёлтую кнопку хочется подписать белым, а ссылку на белой странице — сделать жёлтой. Обе идеи стоит проверить до отрисовки остальных экранов. Чистый жёлтый #FFFF00 рядом с белым #FFFFFF даёт контраст всего 1,07:1. Для обычного текста WCAG 2.2 требует не менее 4,5:1 на уровне AA. Насыщенность цвета здесь не спасает: яркий образец ещё не означает хорошо различимые буквы.

Поэтому жёлтый цвет сайта мы предлагаем сначала использовать как поверхность под тёмным текстом: заливку кнопки, небольшую плашку, фон выделения. Например, тёмный #202220 на лимонном #F5E642 даёт 12,42:1. Та же лимонная краска для букв на белом — 1,29:1. Цвет сохранился, а результат зависит от того, какую роль ему дали.

Слово «жёлтый» охватывает и светлый песочный, и густую охру. Не будем объявлять любые оттенки одинаково трудными для текста. У чистого #FFFF00 контраст с белым ниже, чем у проверенных нами чистых красного, зелёного и синего. Но тёмный охристый #6B5300 на белом уже даёт 7,34:1. Дальше нужны конкретные HEX, соседние цвета и задача элемента.

Какой образ можно собрать

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

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

Лимонный, горчичный, медовый и песочный: оттенки с HEX

Ниже — наши образцы для макета. Названия условны: у «горчичного» или «медового» нет единственного кода, который обязан использовать любой дизайнер. Записывайте HEX рядом с названием, чтобы команда обсуждала один и тот же цвет. В таблице отдельно указан тёмный текст, которым мы проверили каждую заливку.

Все четыре пары с тёмным текстом проходят порог AA для обычной надписи. Но это не свойство оттенка «самого по себе». Белый текст #FFFFFF на нашем горчичном даёт 2,38:1, на медовом — 1,83:1, на песочном — 1,42:1. Ни один из этих вариантов не достигает даже порога 3:1 для крупного текста.

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

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

Куда поставить жёлтый: фон, кнопка, выделение, иконка

Фон и плашки

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

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

Выделение фрагмента текста тоже можно сделать светло-жёлтым. Сохраняйте тёмные буквы: #202220 на #FFF4C2 даёт 14,47:1. Не закрашивайте весь абзац, если задача — помочь найти одну мысль. Если внутри есть ссылка, оставьте у неё подчёркивание и проверьте цвет уже на выделенной подложке, а не только на основном фоне.

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

У кнопки проверяются разные отношения: надпись к заливке и необходимые для распознавания признаки к окружению. Для #FFD84D с тёмной надписью #121212 контраст текста составляет 13,54:1. Белая надпись на той же кнопке даёт 1,38:1. Выбирайте цвет букв по расчёту, даже если у остальных кнопок сайта они белые.

При этом сама заливка #FFD84D на белой странице также даёт 1,38:1. Хорошо читаемая подпись ещё не решает вопрос различимости границы или состояния. Если для распознавания кнопки нужна её форма, попробуйте тёмный контур; если элемент уже однозначно узнаваем иначе, оцените необходимые признаки отдельно. WCAG не требует обводить каждую декоративную заливку.

Для текстовой ссылки на белом яркий жёлтый лучше заменить тёмным оттенком своей гаммы. Наш вариант #6B5300 даёт 7,34:1 к белому. Подчёркивание поможет отличить ссылку от обычного текста без угадывания цвета. На подложке #FFF4C2 та же охра даёт 6,63:1; при другом фоне измерение понадобится заново.

Значки и состояния

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

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

Предупреждение: цвет поддерживает смысл, а текст его объясняет

В Carbon Design System статус Warning обозначен жёлтым и отдельным значком: его используют для действий, которые нежелательны или могут привести к неожиданному результату. Error описан как другой статус. Это полезный пример организации уведомлений; переносить его в свой интерфейс нужно вместе с понятными текстами.

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

USWDS рекомендует начинать уведомление с обозначения его типа, чтобы назначение оставалось понятным без опоры только на цвет или форму значка. Для нашего примера возьмём тёмный текст #202220 и светло-жёлтый фон #FFF4C2: их контраст — 14,47:1. Иконку и необходимые границы проверяем отдельно.

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

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

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

Для каких задач примерить жёлтый сайт

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

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

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

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

Сочетания жёлтого с другими цветами: назначаем роли

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

Жёлтый и чёрный

Для выразительного варианта возьмём #FFD84D, почти чёрный #121212 и белый #FFFFFF. Жёлтую кнопку на тёмном первом экране подпишем тем же #121212: получится 13,54:1. Для содержательных блоков можно оставить белую поверхность с тёмным текстом. Чёрно-жёлтая гамма при этом свяжет страницы через повторяемый акцент.

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

Жёлтый и синий

Наш вариант — яркий #FFD84D, тёмно-синий #243B53 и светлый #F7F8F4. Тёмно-синий текст на жёлтом даёт 8,32:1. Можно начать с жёлтой кнопки на синем блоке, а затем повторить синий в заголовках светлой части страницы. Светлые синие оттенки потребуют других измерений.

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

Лимонный и фиолетовый

Для афиши, программы фестиваля или творческого проекта попробуйте #F5E642 рядом с тёмным фиолетовым #503A78 и белым #FFFFFF. Фиолетовый текст на нашей лимонной заливке даёт 7,34:1. Рядом можно поставить крупную цветную иллюстрацию, оставив расписание и форму на спокойных однотонных поверхностях.

Если хотите осветлить эту пару, пересчитайте контраст для новых HEX: значение 7,34:1 относится именно к тёмному фиолетовому #503A78 и лимонному #F5E642. Яркость впечатления от палитры и числовой контраст текста — разные вещи. Не переносите результат на другие оттенки по одному названию цвета.

Песочный и тёмно-зелёный

Более приглушённый набор — #E8D8A8, тёмно-зелёный #294C3B и фон #F7F8F4. Зелёные буквы на песочном дают 6,76:1. Попробуйте эту пару в карточке материала или небольшой цитате рядом с предметной фотографией. В заголовке раздела можно сохранить тот же зелёный, но на другом фоне проверить его заново.

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

Жёлтый в тёмной теме: проверяем весь набор состояний

На фоне #121212 наш жёлтый #FFD84D даёт 13,54:1. Такая пара подходит по контрасту и для жёлтой надписи на тёмном, и для тёмной надписи на жёлтом: отношение симметрично. Но у этих решений разные роли. Жёлтый заголовок выделяет фразу, залитая кнопка обозначает действие; не обязательно применять оба приёма в одном блоке.

На жёлтой кнопке тёмной темы оставьте тёмные буквы. Если сделать надпись белой, у нашей заливки #FFD84D контраст с ней будет всего 1,38:1. У надписи свой непосредственный фон — жёлтая заливка, а не тёмная страница за её пределами.

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

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

Контраст по WCAG: таблица для проверки макета

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

В таблице — наш расчёт по относительной яркости sRGB. Для отношения контраста яркость более светлого цвета с добавлением 0,05 делится на яркость более тёмного с тем же добавлением. Значения показаны с двумя знаками после запятой, а с порогом сравнивались до округления.

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

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

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

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

Ошибки, которые проще исправить до вёрстки

• Белый текст на любой жёлтой кнопке. Сначала измерьте пару. В наших примерах даже горчичный не даёт белой надписи нужного контраста. Начните с тёмного текста, а дальнейшее изменение оттенка проверяйте расчётом.
• Попытка спасти жёлтую ссылку одним увеличением размера. Для #F5E642 на белом отношение 1,29:1 остаётся ниже порога и для крупного текста. Можно сохранить цвет в подложке, а буквы сделать тёмными.
• Один цвет для акции, ошибки и текущего шага. Выпишите смыслы этих элементов и добавьте разные подписи и формы. По странице должно быть понятно, где предложение, где действие, а где последствие, требующее внимания.
• Удачная палитра только на первом экране. Соберите с теми же цветами таблицу, карточку товара и форму с длинной подписью. Именно там проявятся слабоконтрастные границы, незаметные ссылки и конфликтующие метки.
• Жёлтый на светлой фотографии без подложки. Проверьте участок под буквами. Если фон неоднородный, попробуйте однотонный блок или перенесите текст рядом с изображением. Измерение цвета самой надписи без фона ничего не подтверждает.
• Ожидание продаж от смены заливки. Выберите цель проверки: например, завершённый заказ. Сравнивайте варианты на конкретном сценарии и не обещайте прирост только потому, что жёлтый выглядит активным.

Как довести палитру до рабочего экрана

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

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

Можно ли сделать весь сайт жёлтым?

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

Каким цветом писать на жёлтом фоне?

Начните с тёмного. В нашем наборе #202220 на лимонном #F5E642 даёт 12,42:1, а #121212 на ярком #FFD84D — 13,54:1. Это результаты для конкретных HEX. Белый текст на жёлтом автоматически подходящим не становится.

Горчичный подходит для белых надписей?

Наш #D4A017 с белым даёт 2,38:1 — ниже порогов WCAG AA для обычного и крупного текста. С тёмным #202220 получается 6,74:1. Если нужен именно белый текст, подберите более тёмную заливку и пересчитайте пару; по одному названию оттенка ответить нельзя.

Жёлтый всегда означает предупреждение?

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

Чёрно-жёлтая палитра доступна сама по себе?

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

Нужно ли соблюдать правило фиксированной доли жёлтого?

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

Источники

• Доступность веб-контента, формула относительной яркости и контраста, видимый фокус — W3C, Web Content Accessibility Guidelines (WCAG) 2.2 — текст рекомендации и определения.
• Контраст обычного и крупного текста, размеры и исключения — W3C WAI, Understanding SC 1.4.3: Contrast (Minimum) — пояснение критерия.
• Различимость необходимых признаков управления и значимой графики — W3C WAI, Understanding SC 1.4.11: Non-text Contrast — нетекстовый контраст.
• Дополнительные признаки помимо цвета — W3C WAI, Understanding SC 1.4.1: Use of Color — использование цвета.
• Жёлтый статус Warning и его назначение — Carbon Design System, Notifications — статусы уведомлений.
• Понятное содержание предупреждений — U.S. Web Design System, Alert — рекомендации для уведомлений.
• Пример жёлтого фона и чёрного изображения в предупреждающих знаках — Health and Safety Executive, Safety signs — раздел Warning signs.