Сильно или никак
Контраст — это разница, заметная без сравнения. Не «эти два элемента различаются», а «видно с одного взгляда, что они разные».
| Что различается | Не контраст | Контраст |
|---|---|---|
| размер | 14 и 16 пунктов | 14 и 28 |
| вес | обычный и полужирный в мелком кегле | обычный и жирный крупно |
| цвет | два близких серых | тёмный и светлый |
| расстояние | 8 и 12 точек | 8 и 24 |
Правило одно и оно повторяется в каждом уроке курса: либо сильно по-разному, либо совсем одинаково. Промежуток между этими двумя состояниями — самое плохое место: человек видит разницу, но не может решить, значит она что-нибудь или это небрежность.
Отсюда практический приём, который спасает больше всего макетов: если сомневаетесь, усильте или уберите. Два заголовка почти одного размера — сделайте разными вдвое или сделайте одинаковыми. Два оттенка серого, которые трудно отличить, — либо разведите, либо сведите в один. Среднее решение не бывает правильным ни в одном из двух смыслов.
И важная оговорка: контраст — средство, а не украшение. Он не делает страницу интереснее, он показывает, что здесь одно, а там другое. Контраст без причины — просто шум: два случайно разных шрифта, случайно разные цвета, случайно разные размеры. Человек честно пытается понять, что этим сказано, не находит ответа и перестаёт доверять макету целиком.
Чем контрастируют
Второе — чем контрастируют. Пар немного, и у каждой своя область.
| Пара | Где работает | Осторожно |
|---|---|---|
| крупное и мелкое | заголовок против текста | разница меньше полутора раз не считается |
| тёмное и светлое | текст против фона, акцент | самое надёжное: не зависит от цвета |
| плотное и свободное | блок против воздуха вокруг | требует места |
| залитое и контурное | главная кнопка против прочих | залитая должна быть одна |
| один шрифт и другой | заголовок против текста | работает только при явной разнице |
Самая надёжная пара — тёмное и светлое. Она работает на любом экране, на печати, у человека с дальтонизмом и при выключенных картинках; она же лежит в основе всей читаемости, и ей посвящён отдельный урок про контраст цвета. Всё остальное — надстройки над ней.
Самая ненадёжная — два шрифта. Два похожих шрифта не дают контраста вовсе: человек видит, что «буквы какие-то другие», и это единственное, что он понимает. Если уж брать два шрифта, они должны различаться очевидно — об этом урок про пару шрифтов.
И пара, про которую забывают чаще всего: плотное и свободное. Блок, вокруг которого много пустоты, выделяется сильнее, чем блок, покрашенный в яркий цвет. Это дорогой способ — он требует места, — но он единственный, который не добавляет на страницу ни одного нового элемента.
Где ломается
Третье — где контраст ломается. Поломок три, и все три встречаются в одном макете одновременно.
| Поломка | Как выглядит | Чем чинится |
|---|---|---|
| контраст без причины | разные шрифты и цвета просто так | убрать: разница должна что-то значить |
| слишком слабый | разницу надо разглядывать | усилить вдвое или свести в одно |
| слишком много | выделено пять вещей | оставить одну |
Первая — самая обидная, потому что на неё тратят время. Автор берёт второй шрифт «для разнообразия», красит блок «чтобы не было скучно», делает заголовок другим цветом «просто так». Каждое такое решение человек пытается прочесть — и, не найдя смысла, начинает сомневаться во всём остальном: если это ничего не значит, может, и подзаголовки ничего не значат?
Вторая связана с инструментами. Почти в любом редакторе разница между соседними размерами шрифта — один-два пункта, и человек, выбирая из списка, естественно берёт соседний. Так рождаются заголовки на 16 при тексте на 14. Лечится не вниманием, а решением: размеры берут не подряд, а через несколько шагов.
Третья — оборотная сторона желания помочь. Выделено пять вещей, потому что все пять важные. Разговор об этом устроен так же, как в уроке про порядок важности: важных вещей может быть пять, выделенной — одна, и выбирать приходится.