Как выбирать цвета для темной и светлой темы так, чтобы на них было комфортно смотреть

#графика #цвет #дизайн #интерфейс #ui #ux

Сегодня хочу рассказать про область, которая меня интересует уже как минимум две трети жизни в качестве хобби: дизайн интерфейсов

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

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

Есть типовые элементы, такие как кнопки, переключатели, списки, заголовки и т.д. Эти элементы позволяют создать иерархию на странице с помощью формы, параметров шрифтов и цветов.

Но возникают вопросы:

Допустим, с выбором размеров все более-менее понятно. Часто встречаются значения кегля шрифтов или размера кнопок, кратные 8: 16, 24, 32 и т.п. Это называется модульной сеткой и большинство дизайн систем используют одинаковый шаг (часто — 8 пикселей).

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

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

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

Пару лет назад, во время создания очередного прототипа, я решил воспользоваться руководством Apple Human Interface Guidelines для подбора цветов темной и светлой темы. Мне хотелось, чтобы мой прототип выглядел также как и оригинальные приложения Apple, такие как заметки, календарь и другие.

Для меня оказалось большим открытием то, что для каждого цвета у Apple есть как минимум 2 варианта для светлой и темной темы по отдельности:

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

Рекомендации для доступного веб-контента (WCAG) помогают оценить то, насколько цвета сочетаются по контрасту. Считается, что контраст 3:1 является оптимальным для комфортного определения элементов интерфейса и их состояния (например, при наведении на кнопку).

Однако, стандарт WCAG достаточно старый и возможно такие рекомендации были актуальны для старых устройств. Сейчас у дисплеев контраст лучше, особенно у AMOLED-дисплеев. Лично на мой взгляд контрастность 2:1 уже выглядит хорошо, но это может быть как раз-таки субъективно, потому что исследований я не проводил.

Если проверить все цвета Apple для светлой темы, то выяснится, что контрастность WCAG для них как минимум 2.1 (кроме желтого).

В целом, можно заметить, что для светлой темы цвета более темные и насыщенные, в то время как для темной — более бледные. Также интересно то, что не у всех цветов совпадает оттенок (hue). Например, у голубого (cyan) в палитре Apple оттенок отличается на 2 градуса, что делает его более синим в светлом варианте:

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

Подводя итог, для себя я сделал следующий простой и очевидный в ретроспективе вывод:

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

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

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

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

Также если вам понравилась данная статья и вас интересует не только дизайн, но и технологии в целом, то приглашаю вас в свой блог «Код без тайн», где я пишу о веб-разработке, информатике и технологиях, которые меня вдохновляют: