Цвет фона для светлой темы: почему #FFFFFF недостаточно и 8 цветов, которые стоит использовать

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

Почему полностью белый экран получается плоским

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

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

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

Исправление 1: начните страницу с #F2F2F7

#FFFFFF страница

Страница и карточки #FFFFFF

#F2F2F7 страница

Страница #F2F2F7, карточки #FFFFFF

#F2F2F7 это серый, который iOS кладёт под сгруппированные списки. Это системный серый 6 Apple в светлой теме, и собственная рекомендация Apple такова: использовать цвета сгруппированного фона для сгруппированных табличных видов. Классический пример: Настройки, бледно-серая страница и белые строки.

Это одно изменение даёт и пол, и потолок. Страница это пол, карточки и листы это потолок, а зазор между ними виден без единой нарисованной линии.

Где применять:

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

Если ваш экран это одна длинная белая статья без карточек вообще, белый подойдёт. Правило для интерфейсов, собранных из поверхностей.

Исправление 2: пусть поднимают тени

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

Две привычки делают это правильным:

• Подкрашивайте тень своими чернилами, а не чистым чёрным. Тень цвета вашего текста (в посте использован #1B1530, глубокий фиолетовый) выглядит частью интерфейса. Чистый чёрный выглядит как грязное пятно.
• Пусть «больше» значит «выше». Возьмите короткую шкалу из четырёх ступеней, от малой к большой, и привяжите каждую к задаче: карточка, приподнятая карточка, меню, диалог. И никогда не изобретайте пятую.

/* A starting point, not a platform spec. Tune the values to your brand. */ :root { --shadow-ink: 27 21 48; /* #1B1530 */ --shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08); --shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10); --shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14); } .card { background: #FFFFFF; box-shadow: var(--shadow-sm); } .menu { background: #FFFFFF; box-shadow: var(--shadow-md); } .dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }

Серая страница заставляет это работать. На белой странице мягкая тень почти не видна, и люди компенсируют это более тёмной тенью или рамкой. На #F2F2F7 хватает светлой тени.

Исправление 3: смягчите чёрный, затем углубите акцент

Чистый #000000 текст на белой или почти белой странице жёстче, чем нужно, и из-за него любой другой цвет рядом выглядит слабым. Material 3 задаёт светлый текст на шаг мягче.

#1D1B20 текст

Текст

#49454F вторичный

Вторичный текст

#A9A8AA неактивный

Неактивный, 38 процентов

• #1D1B20 для текста. Это цвет on-surface в Material 3. Почти чёрный с намёком на фиолетовый, хорошо сочетается и с белым, и с серым.
• #49454F для вторичного текста: подписей, вспомогательных строк и времени. Он по-прежнему легко читается и заметно тише основного текста.
• Те же чернила при 38 процентах для неактивных подписей и иконок. На белом это даёт #A9A8AA, и Material использует именно такую прозрачность. Неактивный текст это единственное место, где низкий контраст и есть цель, и WCAG для него делает исключение.

Акценту нужна противоположная поправка. Яркий светлый фирменный цвет, отлично смотревшийся на тёмном экране, на белом исчезает.

#BB86FC

Светлый акцент на белом

#6200EE

Глубокий акцент на белом

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

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

8 цветов светлой темы

Нажмите на любую плашку, чтобы скопировать код.

#F2F2F7Основа#FFFFFFКарточки#E5E5EAРазделители#1D1B20Текст#49454FВторичный#A9A8AAНеактивный#6200EEОсновной#B00020Ошибка

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

Отдайте это разработчику

Те же восемь цветов в виде CSS custom properties:

:root { --color-base: #F2F2F7; --color-card: #FFFFFF; --color-divider: #E5E5EA; --color-text: #1D1B20; --color-text-secondary: #49454F; --color-text-disabled: #A9A8AA; --color-primary: #6200EE; --color-error: #B00020; } body { background: var(--color-base); color: var(--color-text); } .card { background: var(--color-card); } .caption { color: var(--color-text-secondary); } .card + .card { margin-top: 12px; } hr { border: 0; border-top: 1px solid var(--color-divider); }

Если вы выпускаете и тёмную тему, дайте каждому из этих имён второе значение в @media (prefers-color-scheme: dark), как в карте токенов тёмной темы. Имена остаются прежними, меняются только значения, и именно это не даёт светлой теме превратиться в «тёмную, но наоборот».

Цифры за словами «хорошо видно»

В посте сказано «хорошо видно» и «плохо видно». Для того, кто защищает выбор на ревью, вот цифры (коэффициенты контраста WCAG 2, рассчитанные на белом):

Ещё один факт, который стоит знать: светлая поверхность в самом Material 3 тоже не #FFFFFF. Это #FEF7FF, едва подкрашенный белый. Даже дизайн-система, которую большинство команд считает эталоном, не заливает экран чистым белым.

FAQ

Какой цвет фона лучше всего подходит для светлой темы?

Мягкий светло-серый вроде #F2F2F7 для страницы и #FFFFFF для карточек поверх. Серый даёт белым поверхностям то, от чего им можно отделиться, так что рамок и теней нужно меньше.

#FFFFFF плохой цвет фона?

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

Что такое #F2F2F7?

Это системный серый 6 в iOS в светлой теме, серый, который Apple кладёт под сгруппированные списки, например в приложении Настройки. Apple рекомендует цвета сгруппированного фона для сгруппированных табличных видов.

Какой цвет текста использовать на белом фоне?

Мягкий почти чёрный вроде #1D1B20 для текста и #49454F для вторичного текста. Оба цвета из Material 3, и оба легко читаются и на белом, и на #F2F2F7.

Как показать высоту поверхности в светлой теме?

Тенями. В тёмной теме более светлая поверхность означает более высокую, но в светлой выше белого шага нет, поэтому поверхности остаются белыми, а тень растёт вместе с высотой.

Должен ли акцентный цвет меняться между светлой и тёмной темой?

Да. Светлый акцент вроде #BB86FC работает на тёмных экранах, но почти исчезает на белом. На светлых поверхностях используйте более глубокий шаг того же оттенка, например #6200EE.

Источники

• Apple Human Interface Guidelines, Color: #F2F2F7 это systemGray6 в светлой теме (R242 G242 B247), а цвета сгруппированного фона предназначены для сгруппированных табличных видов.
• Цветовые роли Material 3, считанные из androidx Compose ColorLightTokens и PaletteTokens: on surface #1D1B20 (Neutral10), on surface variant #49454F (NeutralVariant30), светлая поверхность #FEF7FF. См. цветовые роли Material.
• Прозрачность 0.38 для неактивных подписей и иконок из токенов компонентов Material 3. #1D1B20 при 38 процентах поверх #FFFFFF это #A9A8AA.
• #BB86FC и #6200EE это базовые основные цвета Material для тёмной и светлой тем. #B00020 это базовый цвет ошибки Material для светлой темы. #E5E5EA это системный серый 5 в iOS в светлой теме.
• WCAG 2.2, 1.4.3 Contrast (Minimum) и 1.4.11 Non-text Contrast. Коэффициенты рассчитаны по формуле относительной яркости WCAG. Неактивный текст исключён из требования к минимуму.
• Цвет тени #1B1530 и четыре уровня теней это наша собственная рекомендация, а не значение платформы.
• Впервые опубликовано как карусель в UX Brainy.