Изменение цвета шрифта
- Выделите текст, цвет которого требуется изменить.
- На вкладке Главная в группе Шрифт щелкните стрелку рядом с элементом Цвет шрифта, а затем выберите цвет.
Для быстрого форматирования текста можно использовать мини-панель инструментов с параметрами форматирования. Мини-панель инструментов отображается автоматически при выделении текста.
- Если в списке нет подходящего цвета, щелкните Другие цвета, а затем выберите цвет на вкладке Обычные или создайте собственный цвет на вкладке Спектр.
- Для изменения цвета, прозрачности и оттенка текста выберите инструмент Градиент. Инструмент «Градиент» недоступен в Word 2007.
Тексты и надписи. Что не так с тёмной темой
Совсем недавно мне стали попадаться на Хабре интересные и без преувеличения фундаментальные исследования о роли тёмной темы при проектировании GUI. Особенно отмечу публикацию уважаемой Марии Колчановой @mkolchanova «Как работают глаза и что надо учитывать, создавая тёмную тему приложения». Для меня тёмная тема неприемлема (я могу рассмотреть в ней какую-нибудь таблицу и кое-как мирюсь с ней на сайтах, посвящённых тяжёлой музыке), но мне стало интересно систематизировать, как мода на тёмную тему сочетается с удобочитаемостью и восприятием текста, какие аспекты при выборе шрифта и фона здесь действуют, какова история опытов с тёмной темой. Кстати, ранее я уже публиковал в этом блоге статью о попытках искусственно расширить видимый спектр в инфракрасную и ультрафиолетовую область, вот здесь. Но под катом речь пойдёт о других вещах, в частности, об интересных отличиях между «воспринять», «уловить» и «заметить».
Чтение с экрана отличается от чтения с бумаги тем, что экран — источник света. Сложно сказать, является ли белый шрифт на чёрном фоне идеальной комбинацией для чтения с бумаги (бумага исходно была белой), но электронный носитель текста — продолжение бумажного, поэтому показатели текста и фона на экране исторически «подстраивали» под аналогичные свойства бумаги. Наряду со свойствами контрастности шрифта и фона важен вопрос об удобочитаемости самого шрифта. Исторически предполагалось, что шрифт с засечками хорошо подходит для восприятия длинных текстов (книжных или газетных), однако в исследовании, описанном на Хабре в блоге Tinkoff, делается вывод, что у человека с хорошим зрением восприятие текста с засечками и без засечек почти не отличается. В свою очередь, старики и маленькие дети (соответственно, слабовидящие и плохо умеющие читать) легче воспринимают шрифт без засечек. Далее сосредоточимся на типичных и экзотических соотношениях шрифта и фона. Выбор цвета шрифта и цвета фона во многом зависит от того, какого типа восприятия мы добиваемся: быстро уловить информационный фрагмент или внимательно прочитать длинный текст.
Предыстория
Поиск наилучшей комбинации шрифта и фона именно для экранного текста активно ведётся примерно с 2000 года, когда Интернет стал глобальным явлением. Тем не менее, первое исследование такого рода, которое мне удалось найти, относится к 1996 году и проводилось как проект NASA. Изучали именно «тёмную тему» — то есть восприятие различных оттенков шрифта на чёрном фоне, как на старых бортовых компьютерах. С точки зрения юзабилити сочетаемость шрифта и фона имеет первоочередную важность, поэтому комбинации подбирали преимущественно методом проб и ошибок, тестируя реальных пользователей. Комбинация «чёрный на белом» — одна из лучших, но и обратная комбинация, «белый на чёрном», пусть и обладает точно такой же контрастностью, читается значительно хуже и утомляет глаза. В статье Ильи Бирмана замечено, что белый экран всё же воспринимается как бумага, поэтому чёрный шрифт (даже без засечек) на белом фоне ощущается как книжный, а инвертированная комбинация кажется карикатурной. Более того, «жирность» белого текста на чёрном фоне почти не распознаётся, а белый курсив на чёрном даже тормозит чтение. Бирман указывает, что даже серый на чёрном смотрится естественнее белого и, более того, серый допускает широкий спектр оттенков. С другой стороны, тёмный фон обладает высокой контрастностью с разными цветами, поэтому тёмная тема может быть выигрышна именно для IDE, где цвет (исходного кода) окрашен в разные цвета, несущие семантическую нагрузку. Более того, тёмная тема была открыта даже до возникновения книгопечатания. Вот разворот бургундского «Часослова», изготовленного в XV веке:
Такое сочетание шрифта с фоном не могло получить развития, так как при дороговизне натуральных красок чернение фона или окраска фона в сепию (чернила каракатицы) выходило ещё дороже. Тем не менее, изготовители этой книги явно рассчитывали на то, что пользователь будет подолгу читать её в полутьме. Аналогичный эффект наблюдается при подборе тёмного фона для игральных карт. Существует знаменитая колода «Палех», выпускавшаяся в 1817-1967 годах, наиболее замечательная своей «тёмной темой». Вот как карты из этой колоды выглядят в хорошем состоянии:
А вот как в потрёпанном.
Обратите внимание, что фон для масти не белый, а светло-голубой, а также на сочетания красного и синего в костюмах героев. Для сравнения, в посте ЖЖ-пользователя mook-m приводится и светлый вариант этой колоды. Обратите внимание, насколько хуже тёмной темы воспринимается светлая:
Я считаю пример с картами показательным именно потому, что эта система знаков должна одинаково хорошо восприниматься грамотными и неграмотными, однозначно восприниматься на сильно изношенной колоде, а также подходить для азартных игр или гадания в темноте. Кроме того, взгляд схватывает игральную карту «одним кадром», а не «читает», как книгу. Наконец, нельзя изменить цвет мастей, зато можно немного скорректировать их форму и, в принципе, полностью открыт простор для подбора фона. Таким образом, по показателю «шрифт-фон» некоторые ограничения для карт даже жёстче, чем для рекламного текста. В свою очередь, в веб-дизайне нам приходится сталкиваться преимущественно с тремя типами текста:
1. Околокнижная или околожурнальная вёрстка (Библиотека Мошкова, Хабр)
2. Рекламная вёрстка, в прошлом – баннеры
3. GUI для веб-приложений
Кроме того, важнейшую роль при восприятии информации с экрана играет подбор и начертание логотипов, и в эту тему я не стану углубляться, но ограничусь очень характерным (на мой взгляд) примером. На стыке «физического» и «виртуального» контента находятся музыкальные альбомы, где начертание логотипа группы и название альбома должны получаться яркими и запоминающимися как на обложке диска, так и в Интернете, причём, важность «цифровой» составляющей таких логотипов постоянно растёт. Обратите внимание, как отличаются логотипы и названия околосимфоничнеской готик-группы «Theatre of Tragedy» и группы «Satyricon», играющей блэк-метал:
Здесь узнаваемость стиля и смысловой нагрузки полностью обеспечивается цветовой гаммой и начертанием шрифта — ещё до прослушивания. Возможно, из этого правила есть исключения, но мне известны в основном обратные примеры. Рассмотрим ещё две обложки. В музыке отчётливо «агрессивной» группы «Saturnus» есть серьёзный симфонический компонент, а творчество группы «Darkthrone» является предельно «чёрным» в спектре тяжёлого металла:
Вот классная статья с портала DTF о нарочито нечитаемых логотипах метал-групп. Ниже остановимся на том, какие рекомендации по сочетанию цвета и фона устоялись в веб-дизайне.
Палитра цветовосприятия
В гайдлайнах по веб-дизайну часто даются рекомендации по комбинациям цветов текста и фона, и обычно акцент делается на высокой контрастности между шрифтом и фоном. Комбинация «чёрный шрифт на белом фоне» относится к наиболее контрастным, но эмпирически уступает в контрастности чёрному на жёлтом и, по-видимому, тёмно-синему на светло-сером. Вот как в 2000 году характеризовал подбор текста и фона Якоб Нильсен, один из классиков user experience:
«Подбирайте цвета так, чтобы между текстом и фоном поддерживалась высокая контрастность. Текст читается лучше всего, если чёрный текст набран на белом фоне (так называемый «положительный текст». Почти так же хорошо белый текст на чёрном фоне (отрицательный текст). Хотя контрастность в обоих этих случаях одинакова, инвертированная цветовая схема несколько отталкивает пользователя и замедляет чтение. Гораздо сильнее удобочитаемость страдает в случаях, когда текст делается чуть светлее чисто-чёрного, а фон — чуть темнее чисто-белого» (Nielsen 2000, p 125).
Нильсен ничем не подкрепляет это утверждение, и теперь (более 20 лет спустя) можно считать, что границы между «удобными» и «неудобными» комбинациями шрифта и фона пролегают далеко не так чётко. Вот ещё одна эмпирическая таблица, датируемая 2021 годом (составитель Джереми Жирар):
Большинство из тех, кто хотя бы немного понимает теорию цвета, согласятся с этой таблицей. Несомненно, читать голубой текст на красном фоне очень сложно, равно как и красный на голубом, так как здоровый человеческий глаз с неизменённым хрусталиком не может одновременно фокусироваться на некоторых оттенках красного и голубого. Кажется, что текст дрожит, глаза от этого перенапрягаются. Тем не менее, вышеприведённая таблица — в пользу тёмной темы. Соотношение «Good : Poor» у чёрного фона — 6:2, у белого фона — 5:3, у жёлтого фона — также 6:2, у остальных — значительно хуже.
По-видимому, при расширении палитры «первая тройка» здесь всё равно не изменится: белый, жёлтый и чёрный фон. Однако жёлтый фон слишком кричащий, и он помогает быстро заметить текст, но для долгого чтения малопригоден. Согласно ещё одному эмпирическому наблюдению, именно выигрыш комбинации «чёрный на жёлтом» у комбинации «чёрный на белом» приводит к тому, что старые книги с пожелтевшей бумагой читаются легче, чем новые.
Недостатки тёмной темы
В настоящее время продолжаются эксперименты с подбором желтоватой «газетной» бумаги для книг с большими объёмами сплошного текста. Жёлто-серый фон также пробуют на многих сайтах, рассчитанных на чтение книг и лонгридов. В рунете одним из наиболее заметных сайтов такого рода является библиотека Serann:
Что касается тёмной темы — при отображении длинных текстов эстетическая составляющая в ней явно преобладает над коммуникативной. Разработка электронных читалок с тёмной темой ориентирована на пользователей, читающих в темноте и помогает не только беречь глаза, но и не нарушать биоритмы сна и бодрствования. Однако при внимательном размеренном чтении при хорошем (тем более — естественном) освещении тёмная тема представляется скорее нагрузкой, чем облегчением. У тёмной темы богатая история, восходящая к мониторам бортовых компьютеров, поэтому в веб-дизайне тёмная тема имеет ретро-оттенок, а значит, отсылает к тем временам, когда текст на мониторе не столько читали, сколько просматривали. Длинный текст (документация) распечатывается, а информационная выжимка, метаинформация, команды или надписи читаются с экрана. Тёмная тема в большей степени приспособлена для чтения строк, чем для чтения текстов. В данном случае особенно показателен пример с древней игрой «Space Invaders»:
Текст любого цвета на чёрном фоне сложно читать людям с астигматизмом, а чтобы не выжигать глаза светлым фоном — достаточно всего лишь корректировать контрастность и яркость монитора. Согласно данным группы по исследованию зрительного восприятия из университета Британской Колумбии, «людям с астигматизмом (50% населения) сложнее читать белый текст на чёрном фоне, чем чёрный текст на белом фоне. Отчасти это связано с уровнями освещённости: при чтении со светлого фона радужная оболочка смыкается чуть сильнее, тем самым компенсируя эффект деформированного хрусталика. При чтении с тёмного фона зрачок, напротив, расширяется, чтобы поймать больше света, и из-за этого картинка кажется значительно более размытой, а глаз устаёт быстрее».
Заключение
Тем не менее, учитывая вышесказанное и в особенности приведённую таблицу цветовых соответствий, именно в IDE тёмная тема наиболее уместна.
Работа с кодом — это обращение не столько с текстом, сколько со строками и надписями, причём, в одной строке семантика может меняться не только от слова к слову, но и от знака к знаку. Поскольку именно на чёрном фоне можно подобрать максимальное количество оттенков, дающих высокую контрастность как с фоном, так и друг с другом, в данном случае тёмная тема лучше всего обеспечивает смыслоразличительные функции. Также тёмная тема действительно не выжигает глаза при работе в темноте и, соответственно, приемлема для ночных переработок с высокой когнитивной нагрузкой. Я не нашёл сведений о разработке контактных линз для работы в темноте, интересно, знает ли кто-нибудь из читателей о подобных исследованиях. Наконец, хотелось бы увидеть, а не будет ли на Хабре добавлена возможность переключения листингов в тёмную тему с оставлением светлой темы для остального текста статьи.
Серый текст на белом и на чёрном
Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне.
Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно:
Вместо оттенков серого в типографике используется разная жирность шрифта. Хочется сделать текст легче — возьми более тонкое начертание, но цвет оставь чёрным. Типографично:
Чёрный фон — это темнота, а текст на нём — это свет. Поэтому серый цвет — это просто приглушённый свет. Серый на чёрном выглядит естественно, потому что яркость света может быть совершенно любой:
Он как бы не «серый», а просто темнее. А вот жирность на чёрном работает плохо — разницы между заголовком и текстом почти не видно:
Я ещё в самом тексте одно из слов выделил жирным, но сделал бледнее на четверть — оно полностью растворилось среди соседних.
У меня на сайте на всех страницах на белом фоне заголовки жирные (пример: документация по Жуэлю). Но есть несколько страниц на тёмном, и там жирности недостаёт для выделения заголовков. Чтобы они зажглись, приходится делать текст «тусклее» (пример: Вайрлесс-диджей).
Итого: серый на белом — искусственно; тусклый на чёрном — естественно. Это полезное знание на случай, если вы делаете разные светлый и тёмный скины для какой-то программы или сайта. Нужно, чтобы ваша система скинов умела менять и цвета, и жирность.
Персонажи, юзер-ричёрч и вайрфреймы
13 комментариев
Воображаемый эсперанто-уголовник 2018
оно полностью растворилось среди соседних.
«Займи идиота на полчаса», называется.
Илья Бирман 2018
Блин, я не ту картинки залил. Простите все. Перезагрузите страничку, пожалуйста 🙂
Даниил КИБЕРНУАР Пронин 2018
Евгений Арутюнов 2018
Раз это бумага и краска, то да, краска одна — в том числе серая, если хочется. Просто не надо делать чёрный и серый, надо делать только серый. И не надо делать его слишком светлым, а надо потемнее, чтобы глаза не ломались. Будет ок.
Женя Волков 2018
Не про типографику, но интересная тема к раздумью. Белый и чёрный — это один и тот же цвет, но с разной интенсивностью. https://www.youtube.com/watch?v=p-OCfiglZRQ
Алексей Петрик 2018
Да зачем это.
Просто серый на черном проходит тест на читабельность. А серый на белом нет.
Sergey Yakunin 2018
Согласен. Серый (вернее, почти черный) текст на белом выглядит слабо. Всё просто: дизайнеры боятся использовать белый и черный цвета. Причина — мнимая забота о пользователе. Дизайнеры мнительны, причем в большей степени чем обычные люди. Подозреваю, это связанно с остротой восприятия. Этим грешат дизайнеры в Микрософте, Эпле, и даже в Гугле, что уж говорить об остальных.
Конечно, сами они в этом не признаются и будут придумывать множество объяснений: «чтобы глаза не ломались», «привлекает слишком много внимания», «в природе не бывает идеально черного цвета», «пересиливает». Кроме того, в этом вопросе присутствует эффект «втюхивания», ощущение псевдополезности, мол, если работа проделана, то значит не зря, и прочая психология.
Есть простейший тест для выбора цвета букв:
- Внутри «почти-черного» параграфа делаешь одно слово совсем черным.
- Если при беглом прочтении пользователи не замечают разницы, значит почти-черный цвет нужен только дизайнеру.
Anatoly Kurganov 2018
А смысл вообще думать о бумаге, когда люди по десять лет бумагу не читают даже сейчас. Может еще вспомнить стены пещеры, песок, бересту и т. д.
«Серый на белом выглядит компромиссно и поддельно:» только для человека со слабым кругозором.
Иван Иванов 2018
Интересно узнать о не читающих бумагу людях, тогда как каждый день прочитываешь по 100-200 страниц бумажных книг.
Сергей Педан 2018
а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна!
Божечки, а ведь правда: серой краски-то в природе не бывает!
Denis Drozhzhov 2018
Изображение на мониторе не имеет никакого отношения к краске и бумаге. Поэтому на мониторе можно делать любые сочетания цветов. Главное, чтобы результат хорошо читался и гармонировал с дизайном окружающих элементов.
Andrey Klimkin 2019
черный с белым создает сильный контраст. Многие шрифты превращаются в чередование вертикальных штрихов — создается рябь. Глаз устает читать. Лично я смог серым текстом чуть больше насладиться — я просмотрел 5 слов (после чего понял что этот текст не важен) а в ч/б варианте максимум 3 слова и захотелось сбежать.
В одной из книг было сказано, что типографика это сплошние если и но. Поэтому нужно думать о читателе, я считаю что текст нужно делать не «правильным», а «приятным». Все знают, что никто не любит читать много текста, это не правда! тяжело читать плохую верстку или сухой текст, мы в детстве все умудрялись прочитать все части Гарри Поттера и властелина колец, текста же много, прочитали же. Нужно визуально его делать красивым.
Игорь 2020
Серый цвет текста реально бесит (иногда вообще не могу прочитать — приходится выделять текст мышем и в тяжёлых случаях копировать в текстовый редактор) Зато дизайн красивый и глазам приятно. Особенно — элементы интерфейса финансовых программ или инструкции текст серым цветом это что-то.
Виктор Шишко 2020
Мысль то интерестная, но вот я лично поддаю сомнению эту статью. Серая краска бывает, нужно всего-лишь к черной краске добавить немного белой, размешиваем и получается серая краска, соответственно серый цвет текста может быть и его активно используют все дизайнеры, для придания акцентов тайтлам например где цвет черный. А вот по поводу черное, то это искуственный цвет, так как в природе черного не существует, недавно ученые приблизились к тому чтобы создать истинно черный материал, но всё-равно это был не до конца черный. Да и вообще цвета на мониторе не стоит сравнивать с цветами в полиграфие, это разные цветовые схемы, там у них CMYK а у нас в основном RGB где цветов намного больше, так почему бы не использовать все эти миллионы цветов?
Черным по белому или белым по черному?
Добрый день. Подскажите, есть ли какие-то исследования насчет восприятия текста черный на белом фоне или белый текс на черном фоне? Интересует в первую очередь для программирования.
Просто во многих IDE заметил переход на черный фон белый текст — это новомодная фишка или имеющая под собой грунт оптимизация удобств?
Лично я вроде как привык читать черные буквы на белом фоне — но, возможно, стоит переучиться? А то вдруг это просто «винтажный стиль/ретро» (раньше в целях экономии был черный фон) и я зря суечусь?
P.S.: хотелось бы услышать мнение либо ссылку, которую можно счесть авторитетной, а не только личное ощущение. Давайте делиться знаниями 🙂
- Вопрос задан более трёх лет назад
- 33877 просмотров
1 комментарий
Оценить 1 комментарий
28lion2008 @28lion2008
Если сравнивать именно черный и белый, то зависит от окружения. Днём когда ярко белый фон, ночью когда темно черный фон. Так же есть два конфликтующих факта, первый в том что глаза меньше раздражаются при меньшей контрастности цветов (но чем меньше контрастность тем хуже видно отличие между ними), второй чем выше контрастность тем четче видно текст (но это вызывает раздражение глаз). Так что как и везде нужна золотая середина. Как вариант светло черный и светло серый, где днём фон светло серый а ночью светло чёрный.
Решения вопроса 1
UX-спасатель
На самом деле всё очень просто. На темном фоне воспринимается гораздо больше цветов и они контрастнее. Поэтому тёмный фон популярен для IDE.
В своё время делал перевод исследования на эту тему.
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Весьма странный вывод.
На белом фоне виден любой цвет, любое выделение, а вот на темном фоне, очень многие выделения еле заметны, перебрал десятки тем темных, остановился на одной и все равно, при поиске и других манипуляциях приходиться явно переходить чтобы понять где же нашло, ибо подсветку очень плохо видно.
Ответы на вопрос 8
Темные темы для меня привлекательны тем, что от них меньше устают глаза.
+ с ними отлично работать в темноте
Ответ написан более трёх лет назад
Нравится 9 3 комментария
alexbyk @alexbyk Автор вопроса
В темноте работать вредно — какое-то там веществе не вырабатывается и снижает трудоспособность + очки обеспечены 🙂 Человек — дневное существо)
я знаю, что вредно. но мне гораздо удобнее и продуктивность ночью у меня выше на порядок.
а слепой я и так уже, причем уже много лет и компьютер тут не при чем 🙂
Можно посмотрить, что вреднее: сидеть перед яркой белой матрицей в темноте, либо сидеть перед черной матрицой в темноте. Готов поспорить, глаза не хотят видеть сильный контраст (белое на темном фоне).
Терпеть не могу тёмные темы. Либо слишком мало контрастности, когда они серые, либо слишком «выжигающие» буквы, когда фон тёмный.
Тут на хабре было исследование опубликовано, и в ЖЖ где-то его видел, медики говорят, что лучшая тема это тёмно-синее на бежево-жёлтом и какие-то ещё там сочетания цветов.
Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
Open Source enthusiast
Тоже предпочитаю темную тему. Вот только про черное/белое не совсем корректно. Фон — серый, может темный, но точно не как уголь, и шрифт тоже серый, но близкий к белому. С такой цветовой схемой и днем и ночь работать удобно, всё же смотреть на белый фон с черными буквами по много часов каждый день — это издевательство над собой.
Вот как у меня выглядит IDE:
Ответ написан более трёх лет назад
Нравится 3 3 комментария
global $L впечатляет 🙂
Артур Кох @dudeonthehorse
Что за IDE?
AlexYurkin @AlexYurkin
Не понимаю, как можно рассчитывать на «какое-то авторитетное мнение», когда речь идёт о личном удобстве. Это индивидуально. Но всё же… Я далеко не кодер, но пачку каждодневных интерфейсов имею =)
Например, Total Commander
Его стандартная светлая схема заставляет мои зрачки сжиматься до размеров бозона Хиггса. От этого символы и строчки начинают сливаться и я начинаю путаться. Есть мнение, что растояние между символами и строчками крайне мало.
Как только перенастраиваю в тёмные тона, происходит магия. После нажатия кнопки «Ок», чувствуется, что глазам становится легче, контент сразу становится различимым, и легкое чувство паники превращается в монотонное спокойствие.
Ещё есть Photoshop
В версии CS6 наш любимый редактор стал тёмным и стильным.
Но когда я сейчас поменял тему на светлую, первая мысль была: «Это что за адова пердь?!» Я перестал быстро находить нужные инструменты, ибо значки на светлом фоне, лично для меня, стали едва различимы. Плюс возникло чувство, что мой мозг сканируется пришельцами.
Рассуждая об IDE
Чисто дизайнерское предположение. Тёмный фон даёт возможность выставлять разноцветную подсветку синтаксиса в светлых мягких тонах. На белом фоне цвета уже должны быть ярче и вырвиглазнее, чтоб их можно было отличать. Ну или придётся использовать тёмные тона, что не очень уж и красиво в итоге. Согласен, это уже эстетический момент, но за каким из этих рабочих мест работать приятнее?
Я за белое на тёмном. Был разговор, что человек — существо дневное. Но стоит вспомнить, как клёво глазам, когда заходишь в тень в солнечный летний день.