Цвет

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

«Мне нравится, когда цвет это оружие, которое достают из ножен только в крайнем случае, в ситуации смертельной угрозы или чтобы нанести зрителю coup de grâce»
© Олег Пащенко

Каждый цвет в интерфейсах Контура решает определенную задачу:

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

Примеры раскладок цветов в интерфейсах Контура

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

Черный, белый, серый

Мы используем «чистый» серый цвет. Он выглядит нейтрально и сочетается с остальными цветами в интерфейсе.

Фон

В большинстве сервисов Контура область контента — это белый лист на сером фоне. Это помогает сфокусировать внимание и снижает нагрузку на глаза.

Серый фон делит контент на смысловые блоки и группирует элементы на странице.

Для фона мы используем три цвета:

#FFFFFF
0%
Белый
#F2F2F2
5%
Серый
#E5E5E5
10%
Темно-серый

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

«Плохой монитор» — так дизайнеры Контура называют монитор с дешевой некачественной матрицей или просто плохо настроенным изображением. Такой монитор плохо передает оттенки. Светлые оттенки сливаются в белый, а темные — в черный.

Мы стараемся делать свои интерфейсы доступными даже на плохих мониторах.

Линия

Цвет разделительной линии #E5E5E5. Чтобы линия была контрастной и приобретала оттенок фона на котором находится — используйте прозрачность 10% черного #000.

#E5E5E5
10%
Разделительная линия

Линия используется:

  • для разделения смысловых частей на экране;
  • для усиления контраста на границе двух фонов;
  • в качестве однопиксельной тени.

Текст

В качестве базового «черного» цвета для текста, используйте #333 или 80% черного.

Цвет #333 на фоне #FFF дает контраст 12,6:1 по стандарту Web Content Accessibility Guidelines 2.0

Этот стандарт содержит рекомендации, как сделать веб-контент доступным для широкого круга пользователей, в том числе для людей с ограниченными возможностями. Согласно стандарта, минимальный контраст фона и текста должен быть 4,5:1.

Приложения для проверки контраста: Mac OS Web.

Для отображения вспомогательной информации используйте 2 оттенка:

#333333
80%
Основной текст
#808080
50%
Дополнительный текст
#A0A0A0
37%
Неактивный текст
  • Основной — цвет для набора основного текста, текста в активных контролах, текста в полях ввода, надписей и иконок на кнопках.
  • Дополнительный — для подписей, комментариев, заголовков таблиц.
  • Неактивный — для текста в заблокированных контролах, ватермарков и вспомогательных иконок. Например, лупа в поле поиска, стрелка в выпадашке.

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

#FFFFFF
100%
Основной текст
#FFFFFF
50%
Дополнительный текст
#FFFFFF
37%
Неактивный текст

Смысловые цвета

Цвет ссылок

В сервисах Контура стандартный цвет ссылок — синий. Этим же цветом можно окрашивать элементы интерфейса с которыми можно взаимодействовать.

#E4F3FF
Фон
#5199DB
Плашка кликабельная
#3072C4
Текст, иконки

Иногда фирменный цвет сервиса можно использовать вместо стандартного цвета ссылок. Для этого фирменный цвет:

  • не должен быть похож на красный, зеленый и оранжевый, чтобы не нести дополнительный смысл;
  • должен быть насыщенным: контрастным фону и тексту.

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

Фирменный цвет ссылок в Диадоке

Зеленый и красный

Зеленый и красный цвета зарезервированы для обозначения положительного и негативного контекста.

#E2F7DC
#3F9726
#228007
#FFD6D6
Фон
#D70C17
Плашка
#CE0014
Текст

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

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

Акцентный цвет

Чтобы просто привлечь внимание пользователя используйте желто-оранжевый цвет.

#FFF0BC
Фон
#F69C00
Плашка
#D97E00
Текст

Акцентный цвет используется:

  • для подсветки только что добавленной или изменившейся строки;
  • в оповещених о технических работах;
  • при необходимости оплаты;
  • в предупреждения о возможной ошибке;
  • в бейджах.

Фирменные цвета

У каждого сервиса Контура есть фирменный цвет. Он помогает пользователю узнавать сервис. Используйте фирменный цвет в меню и логотипе.

Фирменный цвет в меню Бухгалтерии

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

Палитра

Черный, белый и серый

#FFFFFF
0%
Фон для зоны контента
#F2F2F2
5%
Фон для блоков, боковой панели, меню второго уровня
#E5E5E5
10%
Фон сервиса, плашки лайтбокса, выбранный пункт списка
#A0A0A0
37%
Неактивный текст, ватермарк, доп. иконка
#808080
50%
Дополнительный текст
#333333
80%
Текст и иконки на белом фоне
#000000
100%
Черный для прозрачности

Смысловые цвета

#E4F3FF
Фон
#5199DB
Плашка кликабельная
#3072C4
Текст, иконки
#E2F7DC
#3F9726
#228007
#FFD6D6
#D70C17
#CE0014
#FFF0BC
#F69C00
#D97E00

Фирменные цвета

Контур, Ритейл, УЦ, Школа

#FFD7D7
Фоновый
#EE1722
Светлый
#D70C17
Фирменный цвет, меню
#C0040E
Текст, логотип
#AB0009
Выбранный пункт в меню

Экстерн, Норматив

#FFE8CF
#FF9933
#FF8000
#E36A00
#C95700

Фокус, Декларант

#D9F1E3
#64A980
#4D9068
#3C7252
#255B3B

Диадок

#C6F1EB
#0CC0A4
#00AA90
#038C77
#006D5D

Эксперт

#C8F0FE
#5BC8ED
#31ADD7
#1587AD
#006587

Эльба, КОПФ, EDI, Закупки

#CAE5F5
#3094D0
#1E79BE
#1363A0
#084F85

Бухгалтерия

#F5E0F3
#B254AA
#A23A99
#902987
#7A1871