Как выбирать цвета для темной и светлой темы так, чтобы на них было комфортно смотреть
Сегодня хочу рассказать про область, которая меня интересует уже как минимум две трети жизни в качестве хобби: дизайн интерфейсов
И хотя основной вид моей деятельности — это программирование, но из-за того, что я работаю в сфере веб разработки, то мне часто приходится либо верстать готовый дизайн, либо придумывать свой.
Я никогда систематически не изучал принципы дизайна, однако у меня всегда интуитивно было понимание того, что дизайн поддается каким-то пусть даже и гибким, но правилам. Это особенно заметно в области дизайна интерфейсов приложений.
Есть типовые элементы, такие как кнопки, переключатели, списки, заголовки и т.д. Эти элементы позволяют создать иерархию на странице с помощью формы, параметров шрифтов и цветов.
Но возникают вопросы:
- Как выбрать ширину и высоту элемента?
- Какими должны быть размер и толщина шрифта?
- Какие цвета выбрать, чтобы они сочетались?
Допустим, с выбором размеров все более-менее понятно. Часто встречаются значения кегля шрифтов или размера кнопок, кратные 8: 16, 24, 32 и т.п. Это называется модульной сеткой и большинство дизайн систем используют одинаковый шаг (часто — 8 пикселей).
Работая с готовыми компонентами, которые были созданы дизайнерами сам невольно привыкаешь к таким правилам и начинаешь делать с учетом этой сетки.
Другое дело — цвет
С цветом всё настолько сложно, что есть даже отдельная область под названием колористика, которая изучает закономерности и особенности восприятия цвета.
На самом деле, при создании интерфейса программы приходится очень тщательно подбирать цвета в зависимости от их применения.
Пару лет назад, во время создания очередного прототипа, я решил воспользоваться руководством Apple Human Interface Guidelines для подбора цветов темной и светлой темы. Мне хотелось, чтобы мой прототип выглядел также как и оригинальные приложения Apple, такие как заметки, календарь и другие.
Для меня оказалось большим открытием то, что для каждого цвета у Apple есть как минимум 2 варианта для светлой и темной темы по отдельности:
При использовании этих цветов они идеально смотрятся как на белом, так и на черном фоне. Такие казалось бы незначительные на первый взгляд изменения в яркости цвета оказалось играют огромную роль при восприятии цвета.
WCAG и доступный дизайн
Рекомендации для доступного веб-контента (WCAG) помогают оценить то, насколько цвета сочетаются по контрасту. Считается, что контраст 3:1 является оптимальным для комфортного определения элементов интерфейса и их состояния (например, при наведении на кнопку).
Однако, стандарт WCAG достаточно старый и возможно такие рекомендации были актуальны для старых устройств. Сейчас у дисплеев контраст лучше, особенно у AMOLED-дисплеев. Лично на мой взгляд контрастность 2:1 уже выглядит хорошо, но это может быть как раз-таки субъективно, потому что исследований я не проводил.
Если проверить все цвета Apple для светлой темы, то выяснится, что контрастность WCAG для них как минимум 2.1 (кроме желтого).
В целом, можно заметить, что для светлой темы цвета более темные и насыщенные, в то время как для темной — более бледные. Также интересно то, что не у всех цветов совпадает оттенок (hue). Например, у голубого (cyan) в палитре Apple оттенок отличается на 2 градуса, что делает его более синим в светлом варианте:
Для оценки цветов по контрастности есть очень классный инструмент — huetone. Поэтому я теперь вместо того, чтобы просто так перебирать цвета, сначала опираюсь на рассчитанные значения контрастности. Только после этого пытаюсь «дожать» цвет до желаемого, что, как оказалось, не в��егда возможно физически из-за особенностей восприятия цвета человеком.
Подводя итог, для себя я сделал следующий простой и очевидный в ретроспективе вывод:
на белом фоне цвета должны быть темнее, а на темном — ярче
На сколько темнее и на сколько ярче — это достаточно размытая граница и здесь действительно играет роль субъективное восприятие и даже брендинг и цель, для которой цвет планируется использовать.
Например, для крупного логотипа можно позволить сделать более низкую контрастность для цвета бренда, в то время как для часто встречающихся элементов интерфейса, таких как кнопок, контрастность должна всегда находится на оптимальном уровне.
В любом случае с помощью таких формальных инструментов оценки контрастности, как WCAG (и других, более современных вроде APCA) можно точно измерить контрастность на начальном этапе, а не прикидывать ее буквально «на глаз».
В ходе подготовки данной статьи я нашел очень хороший материал здесь на vc.ru по контрастности в интерфейсах. Если кому-то из вас интересна данная тема, то в ней более подброно описаны технические ньансы:
Также если вам понравилась данная статья и вас интересует не только дизайн, но и технологии в целом, то приглашаю ва�� в свой блог «Код без тайн», где я пишу о веб-разработке, информатике и технологиях, которые меня вдохновляют: