Когда следует использовать белый текст на темном фоне. Оригинальный текст - белым по черному

Многие сайты используют черный текст на светлом фоне, потому что его легко читать. Однако, белый текст на темном фоне также может иметь свои преимущества. Знание, когда использовать одно из решений поможет сделать ваши проекты лучше.

Чтение или сканирование?

Когда дело касается текста на сайте, то пользователи читают либо просматривают (сканируют) текст. Чтение - это упор на слова для тщательного осмысления предмета. Сканирование включает считывание слов для более широкого понимания предмета. То, когда вы должны использовать белый текст на темном фоне зависит от того, читают или сканируют пользователи текст.

Текст параграфа

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

Белый также отражает свет со всеми длинами волн. Потому слова и буквы в абзаце текста компактны и близки друг к другу. Когда лист бумаги отражает свет, свет рассеивается и распространяется на соседние слова и буквы. Черный фон делает форму слов и буквы трудными для восприятия. Сравните черный текст, где он поглощает свет вокруг каждого слова и буквы, что делает их как бы выделенными.

Именно поэтому лучшим выбором для отображения текста абзацев - черный текст на светлом фоне с оттенком серого. Не на белом фоне. Меньше света будет отражается за слова, что делает его легче для глаз. Черный текст работает лучше, т.к. черный - это также цвет, который . Таким образом, черный цвет не дает большой нагрузки на глаза, поскольку он поглощает свет, который попадает на каждое.

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

Рубрики, названия и заголовки

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

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

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

Самое лучшее объяснение — это наглядная визуализация того, что пытаешься донести до аудитории. В связи с этим предлагаю сразу посмотреть на изображение, оно как раз обрисует сочетание цветов фона и шрифта:

Белый - открытость и нейтральность

Это фон черного или синего шрифта в тетрадке, а так же цвет шрифта на черном фоне доски в классе, заложенный нам еще с детства. Белый шрифт по контрастности хорошо сочетается с красным, зеленым, синим и черным фоном, а белый фон с такими же цветами шрифтов. Влияние белого шрифта на пользователя при различных цветах фона:

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

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

Желтый - общительность, коммуникабельность и открытость

Это цвет уравновешенности и внутренней гармонии, он хорошо запоминается и воспринимается жизнерадостными активными людьми. Цвет активизирует развитие, и деятельность мысли, не зря одно из направлений подачи информации назвали «желтой прессой», так как она дает длительное обсуждение её информации. Желтый цвет шрифта по контрастности хорошо сочетается с черным, синим, зеленым и красным фоном, а фон с черным, синим, зеленым и красным цветами шрифта. Влияние желтого шрифта на пользователя при различных цветах фона:

• черный фон - третьестепенная информация и заключение;
• зеленый фон - мягкая информация о небольших возможных проблемах;
• синий фон - убедительное формирование подробной сути деловой информации.

Это цвет успокоения, уменьшения болевых ощущений и усталости, формирования уравновешенности. Ассоциации вызываемые цветом это свежесть и естественность. Зеленый шрифт по контрастности хорошо сочетается с желтым и белым фоном, а фон с желтым и белым шрифтом. Влияние зеленого шрифта на пользователя при различных цветах фонах:

• белый фон - привлечение внимания к приятной информации;
• желтый фон - отображение неприятной информации;
• синий фон - запоминание сути деловой информации.

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

• белый фон - выделение важной информации;
• черный фон - скука;
• желтый фон - объединение пользователей;
• голубой фон - стремление новых пользователей к объединению.

Самое большое развлечение (после затенения, разумеется) - печатать белые буквы на черном фоне. Это очень смелое решение; к тому же текст, напечатанный таким образом, привлекает внимание окружающих не меньше, чем синяк под глазом. Поэтому пользуйтесь этим приемом осмотрительно.

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

1. Выделите текстовый блок.

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

1. Выберите команду Формат>Границы и заливка .

Появится диалоговое окно Границы и заливка.

Убедитесь, что вкладка Заливка находится на переднем плане.

Если это не так, щелкните на ярлычке этой вкладки. Вкладка Заливка появится на переднем плане (см. рис. 19.5).

1. В области Заливка выберите черный цвет.

Это четвертый сверху квадрат в первой колонке; в поле справа от палитры цветов вы увидите сообщение Черный .

1. Щелкните на кнопке ОК , чтобы расстаться с диалоговым окном Границы и заливка .

Сейчас вам ничего не видно, потому что перед вами черный текст на черном фоне. (Вообще-то, если текст выделен, вы увидите потрясающее зрелище: большой белый блок, плавающий в черном море. Не пугайтесь!)

Не снимая выделения блока, измените цвет текста на белый. Для этого воспользуйтесь кнопкой Цвет шрифта на панели инструментов форматирования.

Появится раскрывающаяся палитра.

1. Выберите в палитре элемент Белый.

(Это последний квадрат палитры, расположенный внизу справа. Если подвести к нему указатель мыши, то "всплывет" подсказка со словом Белый.) Щелкните на этом квадрате, чтобы изменить цвет шрифта.

Теперь вы должны снять выделение. Текст станет видимым на экране: белые буквы на черном фоне.

• Word довольно эффектно отображает на экране инверсный текст, особенно когда тот выделен. Спорю на что угодно- вам никогда не удастся "потерять" такой текст даже в очень большом документе!
• Я не рекомендую инвертировать большие фрагменты текста. На многих моделях принтеров такой текст печатается "неважно". Этот прием лучше всего подходит для выделения заголовков и небольших фрагментов текста.
• Если при печати инверсного текста у вас возникли проблемы, измените установки принтера. В диалоговом окне Печать щелкните на кнопке Параметры . В области Принтер щелкните на кнопке Свойства . В результате на экране появится диалоговое окно Свойства принтера . Щелкните на ярлыке вкладки Графика . В области Графический режим установите флажок Точечная графика . Щелкните на кнопке ОК , чтобы закрыть диалоговое окно Свойства принтера .