Оранжевый цвет в дизайне сайта

Оранжевый сайт: сначала выбираем роль цвета

Оранжевый цвет в дизайне можно использовать, чтобы выделить одно действие: «В корзину», «Выбрать доставку», «Записаться». Но яркая заливка и читаемая кнопка — разные задачи. Белая надпись на оранжевом #FF8A00 даёт контраст всего 2,36:1. Для обычного текста по WCAG AA нужно минимум 4,5:1. Можно сохранить заливку и взять тёмный текст либо подобрать более тёмный оранжевый под белые буквы.

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

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

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

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

Оттенки оранжевого с HEX: от персика до тёмного оранжевого

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

Не переносите совет из последней колонки на все элементы страницы. Например, #B05F00 подходит под белую надпись на кнопке, но как цвет мелкой ссылки на кремовом #FFF7ED уже не достигает нужных 4,5:1. На этом фоне для ссылки можно взять #C2410C: её контраст составит 4,88:1.

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

Персиковый, терракотовый и коралловый решают разные задачи

Персиковый #FFD7BA попробуйте как фон небольшой истории о продукте или информационной плашки. Тёмный #202220 на нём даёт 11,96:1, а белый — всего 1,34:1. Светлый характер поверхности стоит поддержать пространством и фотографиями, сохранив тёмные читаемые буквы.

Терракотовый #C66B4E можно связать с глиной и предметными фактурами: керамикой, интерьером, текстилем. Но в выбранном образце ни белый #FFFFFF с контрастом 3,74:1, ни тёмный #202220 с 4,28:1 не проходят AA для обычного текста. Если нужна небольшая подпись, измените пару, а сам цвет оставьте в иллюстрации.

Коралловый #FF7F50 — ещё один вариант тёплого акцента. На залитой им кнопке тёмная надпись #202220 даёт 6,41:1, белая — 2,50:1. Не назначайте коралловому автоматически роль ошибки только потому, что он близок к красному: сначала определите правила сообщений всего интерфейса.

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

Белый текст на оранжевом: таблица контраста по WCAG

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

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

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

У ярких образцов в начале таблицы белая надпись не достигает даже порога для крупного текста. Простое увеличение шрифта не исправит такую пару. Зато смена белого на #202220 на фоне #FF8A00 даёт 6,78:1. Если характер бренда требует именно сочного оранжевого, начните с этого варианта.

Как затемнить оранжевую кнопку под белую надпись

1. Зафиксируйте исходную пару. Например, белый #FFFFFF и яркий #FF8A00: контраст 2,36:1. Не оценивайте её только по впечатлению от заливки.
2. Подберите более тёмный вариант и пересчитайте. У #D67400 с тем же белым получится 3,30:1 — для обычного текста всё ещё мало. У #B05F00 — 4,68:1, порог пройден. Это подобранные вручную ступени, а не шкала с равным шагом.
3. Проверьте состояние наведения. Для примера можно взять #9A5300: белая надпись даёт 5,82:1. Убедитесь, что при нажатии и клавиатурном фокусе текст тоже сохраняет нужный контраст.
4. Посмотрите на окружение. После затемнения сравните кнопку с фотографией, заголовком и соседними действиями. Если оттенок уже не поддерживает задуманный образ, попробуйте исходную яркую заливку с тёмным текстом.

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

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

Граница и фокус — отдельные проверки

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

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

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

Оранжевая кнопка призыва: что выделять на странице

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

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

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

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

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

Ретейл, доставка, еда и детские товары: примеры задач

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

Ретейл: товар, цена и действие

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

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

Доставка: отделить действие от состояния заказа

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

Еда: собрать палитру вместе с фотографией

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

Детские товары: проверить взрослый сценарий покупки

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

Для сервиса со множеством таблиц и предупреждений сначала разработайте систему состояний. Для каталога с терракотовой керамикой — сравните фон с продукцией. Для презентации дорогой мебели — попробуйте приглушённый акцент. Эти задачи могут вести к разным оттенкам даже при одном исходном слове «оранжевый».

С чем сочетать оранжевый: три палитры по ролям

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

Светлая основа. На кремовом #FFF7ED оставьте основной текст #202220: контраст 15,09:1. Для подчёркнутой ссылки подойдёт выбранный #C2410C с 4,88:1. Яркий #FF8A00 можно сохранить в декоративной форме рядом. Если он станет заливкой кнопки, отдельно назначьте ей тёмную надпись.

Тёмный синий. Оранжевый #FF8A00 на #17212B даёт 6,90:1. При заливке кнопки этим оранжевым тёмный #17212B внутри даст то же отношение. Основной текст страницы можно оставить светлым. Другие варианты основы разбираем в статье про синий цвет в веб-дизайне; здесь проверена именно указанная пара.

Материальная палитра. Бежевый #F3E8DD, персиковый #FFD7BA и глубокий ржавый #8F3B24 можно примерить к сайту с фотографиями керамики или интерьера. Последний на бежевом даёт 6,17:1. Для большого описания оставьте #202220, а светлые поверхности используйте, чтобы сгруппировать содержание.

Оранжевый на чёрном фоне: проверяем акцент заново

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

Если вместо тёмно-синей основы хочется почти чёрную, посмотрите идеи чёрного сайта с цветными акцентами. Но не переносите на новый фон число 6,90:1 из примера с тёмно-синим: оно рассчитано для #17212B. Даже близкие по впечатлению фоны имеют разные значения яркости.

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

Оранжевые предупреждения и статусы: не путать с брендом

Оранжевый может быть не украшением, а сигналом состояния. В актуальном руководстве IBM Carbon палитра статусов связывает его с серьёзным предупреждением, а жёлтый — с обычным предупреждением. Это правило конкретной дизайн-системы. Его полезно изучить как пример организации статусов, не перенося автоматически на каждый сайт.

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

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

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

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

Ошибки оранжевой палитры и проверка перед вёрсткой

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

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

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

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

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

В наших примерах #B05F00 даёт с белым #FFFFFF контраст 4,68:1, а #C2410C — 5,18:1. Обе пары проходят порог AA для обычного текста. Проверьте также наведение, фокус и фактический фон после вёрстки: результат одной пары не подтверждает доступность всего элемента.

Можно ли оставить яркий оранжевый, если белые буквы не читаются?

Попробуйте тёмную надпись. На #FF8A00 цвет #202220 даёт 6,78:1, а белый — 2,36:1. Другой вариант — сохранить яркий цвет в декоре и использовать более тёмную заливку рабочих кнопок. Не нужно затемнять весь фирменный стиль одновременно.

Подходит ли оранжевый сайт для еды и детских товаров?

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

Чем персиковый отличается от терракотового в интерфейсе?

В наших образцах #FFD7BA удобно начать со светлой плашки с тёмным текстом, а #C66B4E — с предметной иллюстрации или большой поверхности. Это авторские назначения. Для мелкого текста на терракотовом примере нужно подобрать другую пару: оба проверенных варианта надписи не достигают 4,5:1.

Обязательно ли оранжевый должен означать предупреждение?

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

Источники

• Формула относительной яркости и отношения контраста — W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation от 12 декабря 2024 года. Числа для наших палитр рассчитаны по определениям стандарта.
• Пороги контраста, крупный текст и исключения — 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.
• Видимый клавиатурный фокус — W3C WAI, Understanding SC 2.4.7: Focus Visible.
• Оранжевый как серьёзное предупреждение в конкретной системе — IBM Carbon Design System, Status indicators, обновление от 12 августа 2026 года.
• Запись цвета sRGB в HEX — MDN Web Docs, справочник <hex-color>.