В Material Design для Wear OS используется более темная цветовая палитра. В частности, вы должны использовать черный фон для своего приложения и плитки.
Цветовая схема
Цветовая схема Wear OS создана на основе базовой цветовой темы Material Design . Вы можете использовать эту тему как есть или настроить ее для своего приложения.
Эта тема включает цвета по умолчанию для:
- Первичные и вторичные цвета
- Варианты основных и дополнительных цветов
- Дополнительные цвета пользовательского интерфейса, например цвета фона, поверхностей, ошибок, типографики и значков.
Темная тема
Все цвета темной темы должны отображать элементы с достаточной контрастностью, соответствующей стандарту WCAG AA не менее 4,5:1 для основного текста при применении ко всем поверхностям высот.
Используйте ненасыщенные цвета для доступности.
В темной теме следует избегать использования насыщенных цветов, поскольку они не соответствуют стандарту доступности WCAG как минимум 4,5:1 для основного текста на темных поверхностях. Насыщенные цвета также создают оптические вибрации на темном фоне, что может вызвать утомление глаз. Вместо этого используйте ненасыщенные цвета как более разборчивую альтернативу.
Рисунок 1. Менее насыщенные цвета вашей цветовой палитры улучшают читаемость.
Рисунок 2. Избегайте использования насыщенных цветов на темном фоне.
Основной цвет
Основной цвет — это цвет, который чаще всего отображается на экранах и в компонентах вашего приложения. Базовая темная тема Material Design использует тон 200 в качестве основного цвета. Это соответствует стандарту AA WCAG как минимум 4,5:1 для обычного текста на всех поверхностях возвышений.
Рисунок 3. Пример основной палитры в темной теме. 1. Индикатор основного цвета 2. Тональные варианты
Вторичный цвет
Вторичный цвет можно использовать для акцентирования определенных частей вашего пользовательского интерфейса. В темной теме вторичный цвет можно обесцветить, чтобы обеспечить уровень контрастности 4,5:1.
На рисунке 4 1) обозначает вторичный цветовой показатель, а 2) обозначает тоновые варианты.
Рисунок 4. Пример дополнительной палитры в темной теме.
Акцентный цвет
В темной теме темные поверхности занимают большую часть пользовательского интерфейса. Акцентные цвета обычно бывают светлыми (ненасыщенные пастельные тона) или яркими (насыщенные, яркие цвета). Это помогает выделить акцентированные элементы. Используйте акцентные цвета экономно, чтобы подчеркнуть ключевые элементы, такие как текст или кнопки.
Поиск акцентных цветов Используйте генератор цветовой палитры , чтобы создать или просмотреть цветовую тему. Генератор цветовой палитры также создает тоновые палитры, которые представляют собой диапазон вариаций от светлого до темного цвета, созданных на основе основных и дополнительных цветов. Выберите их варианты для своей темной темы.
На рисунке 5 1) обозначает индикатор основного цвета темы по умолчанию, а 2) обозначает индикатор основного цвета темной темы.
Рисунок 5. Чтобы обеспечить большую гибкость и удобство использования темной темы, рекомендуется использовать более светлые тона (200–50), а не насыщенные тона (900–500).
Используйте более темный спектр цветов для больших частей пользовательского интерфейса, например для цвета фона. Зарезервируйте более светлые цвета для акцентов и элементов пользовательского интерфейса.