Каждый цвет имеет контраст. Одно из его определений — разница в яркости или цвете, отличающая один объект от другого в том же поле зрения. Другими словами, контраст выделяет один объект и делает его более видимым, чем что-либо другое, например фон или другой объект на странице. Людям с нарушениями восприятия цвета синие и красные объекты с одинаковым контрастом могут казаться оттенками серого. Высокий контраст подсознательно привлекает взгляд на элемент и выделяет его. Бледный контраст делает элемент незаметным.

Еще один пример, который я люблю приводить, — старое телевизионное шоу «Я люблю Люси» (I love Lucy). Актеры постоянно говорили о ярко-рыжих волосах Люси. В первые дни показа зрители не могли в этом убедиться, потому что шоу было черно-белым. Зрители включали воображение, потому что единственное, что они могли видеть, — контраст цветов, но не сам цвет. Она могла покрасить волосы даже в зеленый, но количество зрителей не сократилось бы. Когда шоу сняли на цветную пленку, все смогли лицезреть потрясающие рыжие волосы Люси.

Один тип контраста — насколько тот или иной цвет яркий или темный в спектре черного и белого, как в примере с Люси, но также есть тип контраста, содержащий соотношение двух и более цветов друг к другу. Если необходимо что-то выделить, воспользуйтесь яркими контрастами — цветами, значительно отличающимися друг от друга. Если же вы хотите снизить приоритет какого-либо элемента для посетителя, поэкспериментируйте с уменьшением контрастов.

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

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

Рис. 6.2. Контраст — наиболее важная часть дизайна. Использование контрастных цветов и элементов может привлечь внимание на наиболее желаемые места или указатели либо определить порядок действий пользователя

Несколько лет назад среди графических дизайнеров бытовало заблуждение, что использование серого текста на белом фоне вместо черного упрощает восприятие и выглядит более привлекательно. К сожалению, если вам необходимо, чтобы люди действительно читали ваш текст, этот низкий контраст, скорее, наоборот, снизит показатель конверсии: текст окажется трудным для восприятия. Он даже может визуально потускнеть, слиться с общим фоном. Эту идею неплохо использовать с точностью до наоборот. С теми частями сайта, которые участвуют в поисковой оптимизации (SEO), не несущими смысловой нагрузки и не обязательными к прочтению пользователями, вы можете поэкспериментировать. Например, вместо 100 % используйте 80 %-ный контраст. Заголовки и важные элементы должны оставаться со 100 %-ной контрастностью.

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

Большинство сайтов, которые я встречал в своей жизни, как правило, имели относительно одинаковый вес элементов — либо ни одного, привлекающего внимания, либо слишком много. Запутанные или перегруженные сайты повсюду содержат элементы с высокой контрастностью. Дизайнер может сделать все красивым и привлекательным, не осознавая негативного эффекта. Это сродни прогулке по Тайм-сквер ночью, когда тысяча огней мигает одновременно. На что вы обратите внимание? Довольно трудно выделить один голос, когда все вокруг кричат. Если вы думаете, что этот пример не про ваш сайт, помните — все примеры слегка преувеличены. Тонкие различия в контрасте или цвете могут изменить способ взаимодействия сайта и пользователя.

В дополнение к контрастам, цвета вызывают у человека определенные ассоциации. Вы наверняка слышали, что зеленый цвет безмятежен, подобно лугу, а красный интенсивен, как огонь. А еще вы наверняка считаете, что зеленый цвет побуждает идти, а красный — стоять. С рождения у каждого человека формируется собственное ассоциативное восприятие цвета, основанное на культуре. Знаки «стоп», светофоры и прочие повседневные явления усиливают восприятие. Типы ассоциаций вызывают разные реакции на одни и те же цвета вашей страницы. Ярко-красный элемент может заставить остановиться, прочитать, а уже потом совершить покупку. Зеленая кнопка «Принять» побуждает людей нажать ее. Однако неправильный оттенок зеленого может вызвать недоверие к кнопке — например, если он слишком яркий. Также не забывайте, что разные цвета имеют разные ассоциации в разных культурах. Рассмотрим желтый цвет: в Северной Америке он, как правило, веселый, приветливый, ассоциирующийся с солнцем, летом и счастьем. В Латинской Америке и Египте желтый может ассоциироваться с трауром или утратой. Просто задумайтесь о своей целевой аудитории и о том, что цвета могут для нее значить.

Теперь взгляните на свою страницу и решите, где должны находиться базовые элементы. Затем увеличьте контраст этих элементов или уменьшите тон других. Изучите контраст не только на самой странице, но также и внутри элементов, включая текст на кнопках. Используйте эту концепцию, чтобы помочь посетителям расставить правильные приоритеты на странице. Помните, что цвет и контраст — разные вещи. Хотя цвета и имеют контраст, некоторые выглядят на экране ярче. Применяйте универсальные логические принципы конверсии в свою пользу и не забывайте проверять результаты.