При проведении аудитов у нас часто возникает вопрос совместимости цвета шрифта и фона сайта. Порой дизайнер проекта выбирает такое сочетание, что аж глаза режет от его фантазии. Инфоблог содержит несколько статей по цвету фона и цвету шрифта, а я попытаюсь совместить их вместе. В этой статье я разберу основные цвета, используемые для шрифта и фона.
Самое лучшее объяснение — это наглядная визуализация того, что пытаешься донести до аудитории. В связи с этим предлагаю сразу посмотреть на изображение, оно как раз обрисует сочетание цветов фона и шрифта:
Белый - открытость и нейтральность
Это фон черного или синего шрифта в тетрадке, а так же цвет шрифта на черном фоне доски в классе, заложенный нам еще с детства. Белый шрифт по контрастности хорошо сочетается с красным, зеленым, синим и черным фоном, а белый фон с такими же цветами шрифтов. Влияние белого шрифта на пользователя при различных цветах фона:
Это цвет гармонии, дружбы, привязанности и родственных душ. Голубой шрифт плохо контрастен на представленных фонах, но голубой фон хорошо сочетается с черным, красным, желтым и белым цветом шрифта. Голубой фон используется для усыпления осторожности действий посетителя, а также подталкивает его принимать инновационные решения.
Желтый - общительность, коммуникабельность и открытость
Это цвет уравновешенности и внутренней гармонии, он хорошо запоминается и воспринимается жизнерадостными активными людьми. Цвет активизирует развитие, и деятельность мысли, не зря одно из направлений подачи информации назвали «желтой прессой», так как она дает длительное обсуждение её информации. Желтый цвет шрифта по контрастности хорошо сочетается с черным, синим, зеленым и красным фоном, а фон с черным, синим, зеленым и красным цветами шрифта. Влияние желтого шрифта на пользователя при различных цветах фона:
Это цвет успокоения, уменьшения болевых ощущений и усталости, формирования уравновешенности. Ассоциации вызываемые цветом это свежесть и естественность. Зеленый шрифт по контрастности хорошо сочетается с желтым и белым фоном, а фон с желтым и белым шрифтом. Влияние зеленого шрифта на пользователя при различных цветах фонах:
Самое большое развлечение (после затенения, разумеется) - печатать белые буквы на черном фоне. Это очень смелое решение; к тому же текст, напечатанный таким образом, привлекает внимание окружающих не меньше, чем синяк под глазом. Поэтому пользуйтесь этим приемом осмотрительно.
Когда вы печатаете белым по черному, то помните, что первым делом вы должны создать черный фон, а затем - текст белого цвета. Черный фон создается следующим образом.
Лучше всего начинать с уже готового текста. В какой-то момент у вас получится черный текст на черном фоне, поэтому текста не будет видно. Если у вас имеется набранный документ, завершение процедуры будет ознаменовано превращением его в белый. (Информацию о выделении текста вы найдете в главе 6 .)
Появится диалоговое окно Границы и заливка.
Убедитесь, что вкладка Заливка находится на переднем плане.
Если это не так, щелкните на ярлычке этой вкладки. Вкладка Заливка появится на переднем плане (см. рис. 19.5).
Это четвертый сверху квадрат в первой колонке; в поле справа от палитры цветов вы увидите сообщение Черный .
Сейчас вам ничего не видно, потому что перед вами черный текст на черном фоне. (Вообще-то, если текст выделен, вы увидите потрясающее зрелище: большой белый блок, плавающий в черном море. Не пугайтесь!)
Не снимая выделения блока, измените цвет текста на белый. Для этого воспользуйтесь кнопкой Цвет шрифта на панели инструментов форматирования.
Появится раскрывающаяся палитра.
(Это последний квадрат палитры, расположенный внизу справа. Если подвести к нему указатель мыши, то "всплывет" подсказка со словом Белый.) Щелкните на этом квадрате, чтобы изменить цвет шрифта.
Теперь вы должны снять выделение. Текст станет видимым на экране: белые буквы на черном фоне.
Яркие цвета привлекают покупателей
Цветовая гамма , в которой оформлен магазин, оказывает сильное влияние на посетителя в процессе выбора товара и совершения покупки. Каждый цвет подает подсознанию клиента условный сигнал и пробуждает в ответ определенную эмоцию. Предлагаем ознакомиться с основными законами психологии цвета.
Статистика показывает, что восприятие ухудшается в следующей последовательности:
Но воздействие рекламных носителей как раз наоборот, именно поэтому красный цвет обычно используют для выделения ценников со скидками и акциями . Чаше всего для этого применяют красный фон и желтый либо белый текст.
А для оформления магазина применяют не столь вызывающие сочетания.
Под воздействием теплых цветов
(оттенков красного, желтого и оранжевого) покупатели обычно чувствуют прилив энергии, эти оттенки стимулируют психику. Поэтому специалисты рекомендуют использовать их для «разогрева» посетителей магазина.
Холодный спектр цветовой гаммы (оттенки синего, голубого и фиолетового), наоборот, снижает активность нервной системы . Под их влиянием клиенты магазина чувствуют себя более расслаблено и спокойно.
Самым сильным в теплой гамме является, конечно, красный цвет . Красный способен активизировать все функции организма: под его влиянием ускоряется дыхание, напрягаются мышцы, и учащается сердцебиение. Правильно расставленные акценты на красном цвете в интерьере магазина могут увеличить количество импульсных покупок.
Скидочные акции
Прилив энергии вызывает и оранжевый цвет , но его переизбыток в пространстве раздражает, поэтому, как и красный, он гармоничен лишь в виде цвета-акцента.
Пастельные оттенки оранжевой гаммы вызывают ассоциации с красотой и золотистым загаром. Их часто используют в оформлении торговых залов с товарами для женщин.
Желтый цвет сильнее других привлекает внимание , поэтому идеально подходит для оформления различных акций и специальных предложений .
Маркетологи отметили, что в сочетании с красным желтый ассоциируется у покупателей с доступными ценами . Поэтому такое цветовое решение очень часто используется в магазинах-дискаунтерах.
Холодные цвета
и их оттенки отлично справляются с созданием в магазине расслабляющей и спокойной
атмосферы.
Под влиянием синего, голубого, фиолетового покупатели больше времени тратят на изучение витрин
и выбор, меньше беспокоятся
о возможных расходах. Холодная гамма цветов наиболее уместна в дорогих магазинах
или тех, в которых часто возникают очереди.
Голубой цвет ассоциируется с постоянством и вызывает обычно ощущение благополучия . Он помогает хорошему усвоению информации и способствует доверительному общению, поэтому более всего подходит для оформления магазинов элитных товаров, покупка которых происходит после взвешивания всех за и против.
Мммммм... здесь я процитировала пост о том, как удалить ползучее радио со своего блога. Почитала внимательно - какая долгая процедура, между нами говоря!
Но сейчас не об этом. О рамочках, фоне и цвете шрифта и о ваших глазах и психике. Потому что написанное красным на черном - это, на мой взгляд, катастрофа для вашего зрения и настроения.)))))))))))))))))))))))))))))))))))))))))))
Итак.
Таблица для наглядности:
Белый — открытость и нейтральность
Это фон черного или синего шрифта в тетрадке, а так же цвет шрифта на черном фоне доски в классе, заложенный нам еще с детства. Белый шрифт по контрастности хорошо сочетается с красным, зеленым, синим и черным фоном, а белый фон с такими же цветами шрифтов. Влияние белого шрифта на пользователя при различных цветах фона:
красный фон — привлечение внимания к информации;
черный фон — усиление внимания к информации второстепенного плана и заключения;
зеленый фон — мягкое информирование о проблемах;
синий фон — убедительное формирование сути информации.
Голубой — нежность и мягкость
Это цвет гармонии, дружбы, привязанности и родственных душ. Голубой шрифт плохо контрастен на представленных фонах, но голубой фон хорошо сочетается с черным, красным, желтым и белым цветом шрифта. Голубой фон используется для усыпления осторожности действий посетителя, а также подталкивает его принимать инновационные решения.
Желтый — общительность, коммуникабельность и открытость
Это цвет уравновешенности и внутренней гармонии, он хорошо запоминается и воспринимается жизнерадостными активными людьми. Цвет активизирует развитие, и деятельность мысли, не зря одно из направлений подачи информации назвали «желтой прессой», так как она дает длительное обсуждение её информации. Желтый цвет шрифта по контрастности хорошо сочетается с черным, синим, зеленым и красным фоном, а фон с черным, синим, зеленым и красным цветами шрифта. Влияние желтого шрифта на пользователя при различных цветах фона:
черный фон — третьестепенная информация и заключение;
зеленый фон — мягкая информация о небольших возможных проблемах;
синий фон — убедительное формирование подробной сути деловой информации.
Зеленый — снятие нервного напряжения и остроты переживания
Это цвет успокоения, уменьшения болевых ощущений и усталости, формирования уравновешенности. Ассоциации вызываемые цветом это свежесть и естественность. Зеленый шрифт по контрастности хорошо сочетается с желтым и белым фоном, а фон с желтым и белым шрифтом. Влияние зеленого шрифта на пользователя при различных цветах фонах:
белый фон — привлечение внимания к приятной информации;
желтый фон — отображение неприятной информации;
синий фон — запоминание сути деловой информации.
Коричневый — стабильность, реалистичное настроение
Это цвет самодостаточных людей. Коричневый шрифт хорошо сочетается с голубым, желтым и белым цветом, а фон с желтым и белым цветом шрифта. Влияние коричневого шрифта на пользователя при различных цветах фона:
белый фон — усиливает атрибуты информации;
желтый фон — укрепляет гарантированный результат в сознании пользователя;
голубой фон — укрепляет сплоченность пользователей в коллективе.
Красный — напряженность, внимание, действие
Это цвет притягивающий внимание. Красный шрифт хорошо сочетается с черным, голубым, желтым и белым цветом фона, а красный фон с черным, белым и желтым цветом шрифта. Влияние красного шрифта на пользователя при различных цветах фона:
белый фон — выделение важной информации;
черный фон — скука;
желтый фон — объединение пользователей;
голубой фон — стремление новых пользователей к объединению.
Почему-то ничего не написано о черном цвете. Вот нашла кое-что:
Черный - в первую очередь, конечно, черный цвет ассоциируется с чем-то зловещим, тайным, страшным. (Черная магия, черная кошка - символы злого колдовства, дьявольских сил, черная рука - персонаж детских страхов, черный ящик - сложная, закрытая система).
Эмоции и ассоциации: власть, изысканность, нервозность.
Самый сильный из нейтральных цветов — чёрный — появляется практически на любом сайте. Он может вызывать разные ассоциации в зависимости от сопровождающих его цветов или доминировать над ними, если использовать его сверх меры.
Сила и нейтральность чёрного делают его отличным выбором для больших блоков текста, но как основной цвет он может создать ощущение нервозности или даже ассоциироваться со злом.
Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля.
Да, вот так вот.
Что касается рамочек и порхающих блестяшек - жуткая аояповатость и безвкусица. Когда я это виже в блоге, я просто перехожу на другой.Только в крайнем случае прочитаю, если мне позарез нужна инфа.
Удачи в подборе цветов для фона и шрифта!
Что мне не нравиться в Хроме, так это мелькание белого фона при прорисовке страницы. Насколько я понимаю, это происходить на уровне движка , и на пользовательском уровне изменить нельзя, даже если поменять цвета в ОС. Считаю, что на этом месте нужно кинуть камень в огород Хром разработчиков. Почему они цвет канваса определяют самостоятельно, а не берут из системных настроек ОС? То же самое касается Skype и ряда других “серьезных” приложений.
альтернатива Stylish
до и после
Чтобы изменить цвет интерфейса:
File > Options > General > User Interface options > Color Scheme: Black
. Чтобы изменить цвет бумаги (фон), нужно менять цвета в ОС.
Для старых версий офиса ничем не могу помочь.
Еще бонус “белового на чёрном” для мобильных устройств в том, что такое сочетание потребляет меньше энергии (т.к. излучает меньше света). На сколько меньше? Не знаю. Подозреваю, что при длительном чтении весьма ощутимо. Было б интересно увидеть статистику.
Контраст играет роль не только в изображении на дисплее, но и с окружающим миром. То есть, берите во внимание освещение в помещении и старайтесь избегать слишком сильного контраста между освещением и яркостью дисплея/цветов. Особенно это касается полуночников. Если уж работаете в темноте, переключитесь на тёмные цветовые схемы - глаза будут уставать гораздо меньше. Конраст между темной и свтелой темой в темном помещении может отличаться в 20 раз и больше!
Мне исключительно понравилось приложение Workrave . Настраивается на разные промежутки времени и разные по длине паузы (напр., 3 коротких через каждых 15мин., 1 длинная каждый час). Умеет блокировать систему на определенное время без возможности отмены, что очень мотивирует встать с рабочего места:) Имеет много маленьких удобностей в настройках. Например, за несколько секунд перед блокировкой выскакивает предупреждение и если уж сильно заняты и сейчас не до паузы, то просто продолжаете работать - приложение заметить активность (клавиатуры, мыши) и отменит блокировку. Также самостоятельно определяет когда вы сами делаете перерыв и сбрасывает свой таймер.
Человеческое зрение устроено так, что нормальное состояние глаз (когда глазные мышцы расслаблены) это аккомодация вдаль. Поскольку в нормальных условиях монитор расположен относительно близко к глазам, то цилиарная мышца постоянно напряжена, чтобы держать хрусталик выпуклым для фокусировки на близкое расстояние. Это приводит к усталости и спазмам цилиарной мышцы (псевдомиопия), а с течением времени и к перманентному ухудшению зрения. Поочередное смотрение вдаль и вблизь , компенсирует это напряжение, для чего обязательно нужно оторваться от монитора (чему хорошо способствует Workrave) и периодически упражняться у окна по несколько минут.
Второй тип это фейс-пальминг .
фейс-пальминг
Да-да, именно оно. Так что каждый раз, когда реагируете на эпикфейл, имеете возможность размять глаза. Этот метод также известен как пальминг . Вокруг этого слова по сей день много спекуляций и неоднозначных личностей. Поэтому сразу оговорюсь, что рекомендую это упражнение не
как метод улучшить зрение, а как метод расслабить глаза. Темнота дает возможность “отдохнуть” фоторецепторам , а тепло разогретых рук расширяет сосуды глаз и стимулирует кровообращение. Также это увлажнит глаза, поскольку при работе за монитором человек почему-то моргает в разы меньше. Ну и учитывая, что мозг большинство энергии тратит на обработку визуальной информации, то это также способ немножко расслабить извилины.
(дом) и без освещение (ночью). Дневной свет исключил поскольку результат сильно зависит от множества факторов (напр., погода) и имеет большой разброс в измерениях.
Расстояние
. За дальнее расстояние взял длину своей руки 75 см. Ближнее - уклон на ~20 см вперед ближе к монитору.
Яркость дисплея
. В условиях без осветления проводил измерения дважды - с максимальной яркостью дисплея и, соответственно, - минимальной.
Результаты измерений
. Все данные свёл в одну таблицу . Для сравнения использовал соотношение между освещённостями в разных условиях. Как видно с таблицы при „среднем“ освещении отклонившись назад, освещённость уменьшается в 1.5 раза. А в темноте, если использовать темную схему, то освещённость уменьшается в 25 раз.
Disclaimer!
Результаты эксперимент не претендуют на универсальность выводов, так как эксперимент делался “на коленке”. Но смею предположить, что похожие результаты будут наблюдаться у множества повседневных ситуациях.
зрение