Полезней читать на черном или белом фоне

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

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

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

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

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

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

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

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

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

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

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

Оригинал на английском: When to Use White Text on a Dark Background

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

Nielsen Norman Group

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

Я должен заранее сказать, что NN / g не проводил собственных исследований темной темы. Однако эти вопросы побудили меня сделать обзор научных публикаций о том, имеет ли темная тема какие-либо преимущества для пользователей с нормальным зрением или нет. В этой статье я поделюсь с вами полученными выводами.

Но сначала давайте убедимся, что мы оперируем одинаковой терминологией.

Определение: Контрастная полярность – это термин, используемый для описания контраста между текстом и фоном:

• Положительная контрастная полярность (светлая тема) означает темный текст на светлом фоне.
• Отрицательная контрастная полярность (темная тема) обозначает сочетание светлого (например, белого) текста на темном (например, черном) фоне.

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

Зрачок чувствителен к количеству света

Человеческий зрачок – это ворота к сетчатке: через него свет достигает глаза. По умолчанию зрачок человека меняет размер в зависимости от количества света в окружающей среде: когда света много, он сжимается и сужается, а в темноте расширяется, позволяя проникать большему количеству света. Меньший размер зрачка делает глаза менее восприимчивыми к сферическим аберрациям (при которых изображение выглядит не сфокусированным) и увеличивает глубину резкости, чтобы людям не приходилось напрягаться для фокусирования на тексте. В свою очередь, это означает, что их глаза меньше устанут. (Апертуры камеры работают точно так же: фотография, сделанная с фокусным расстоянием f / 2.8, будет иметь более узкую глубину резкости и, следовательно, более размытую, чем фотография, сделанная с f / 16.)

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

Пользователи с нормальным зрением

В ранних исследованиях, проведенных в 1980-х годах, указывалось, что полярность контрастности не влияла на зрительные характеристики людей с нормальным или откорректированным зрением (т. е. носящим очки или контактные линзы).

Тем не менее, несколько более поздних исследований противоречат этому первоначальному выводу. В частности, мы сосредоточимся на двух статьях, которые затрагивали два разных типа задач. Одна, опубликованная в 2013 году в журнале Ergonomics, посвящена остроте зрения и производительности чтения, а другая, опубликованная в 2017 году в Applied Ergonomics, посвящена исследованию эффективности беглого чтения – быстрое чтение 1-2 слов, которым люди часто занимаются, взаимодействуя с мобильным телефоном, смарт-часами или приборной панелью автомобиля, и которое присутствует в таких действиях, как проверка направления движения или уведомлений.

Влияние контрастной полярности на остроту зрения и корректуру

Козима Пипенброк и ее коллеги из Института экспериментальной психологии в Дюссельдорфе, Германия, изучили две группы взрослых людей с нормальным (или откорректированным до нормального) зрением: молодые люди (от 18 до 33 лет) и пожилые люди (от 60 до 85 лет). Никто из участников не страдал какими-либо заболеваниями глаз (например, катаракта).

Участникам были даны два разных типа заданий:

• Задача на проверку остроты зрения, которая включала обнаружение разрыва в кольцах оптометрической таблицы Головина (Landolt C) – другими словами, им показывали по-разному расположенный символ, аналогичный букве «C», и просили определить, где находится разрыв (например, сверху, внизу).
• Задача на корректуру (вычитку), включающая чтение короткого отрывка текста и выявление различных типов ошибок.

Задания были представлены в разной контрастной полярности – для некоторых участников они были в темной теме, а для других в светлой. Контрастная полярность была переменной между субъектами, это означало, что каждый участник видел задачи только в одной контрастной полярности (например, только в темной теме).

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

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

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

Другое исследование, опубликованное в журнале Human Factors той же исследовательской группой, рассматривало, как размер текста взаимодействует с контрастной полярностью в задачах на корректуру.

Было установлено, что преимущество положительной полярности линейно возрастает с уменьшением размера шрифта, а именно: чем меньше шрифт, тем лучше пользователь видит текст в светлой теме. Интересно, что даже при том, что их производительность была лучше в светлой теме, участники исследования не сообщали о каких-либо различиях в восприятии читабельности текста (например, их способность фокусироваться на тексте) в светлой и темной теме, что только усиливает первое правило юзабилити: не слушайте пользователей.

Влияние контрастной полярности на беглое чтение

Джонатан Добрес и его коллеги из лаборатории Agelab Массачусетского технологического института предприняли попытку количественно определить, влияют ли условия окружающего освещения на преимущество положительной полярности в контексте задачи лексического решения. Задача лексического решения – парадигма, обычно используемая в психологии. Участникам показывают последовательность букв и заставляет их решать, является ли это словом или нет. Задача лексического решения больше похожа на беглое чтение, которое мы выполняем в условиях высокой прерываемости, таких как управление автомобилем, использование в пути мобильного телефона или смарт-часов. Она включает в себя быстрый просмотр дисплея и извлечение соответствующей информации.

Участники исследования Agelab имели нормальное или откорректированное зрение. Им показывали строки символов с двумя возможными контрастными полярностями (темная и светлая тема), при различном окружающем освещении (дневное и ночное) и разном размере шрифта.

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

Люди читали быстрее в дневное время, чем в ночное, в светлой теме, чем в темной, и с большими размерами шрифта (4 мм), чем с меньшими размерами (3 мм). В ночное время светлая тема была значительно лучше темной, а мелкий шрифт намного легче читался в светлой теме. (Более короткие столбцы лучше, чем более высокие. Обратите внимание, что показатель времени, указанный в эксперименте, по сути, представляет собой время, необходимое участникам для правильной оценки представленной строки).

Отсутствие эффекта полярности в смоделированных дневных средах было несколько удивительным и не соответствовало другому более старому исследованию, проведенному Бухнером и Баумгартнером. В нем также рассматривались условия освещенности днем и ночью. Тем не менее, в этом исследовании яркий окружающий свет был намного слабее, чем тот, который использовался в исследовании Agelab (например, офисный свет или яркий уличный свет). Добрес и его коллеги утверждают, что количество окружающего света может повлиять на преимущество положительной полярности, при этом яркий свет приводит к нулевой разнице, но обычный офисный свет все еще способен создавать разницу.

Долгосрочные эффекты

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

Интересное исследование, опубликованное в научных отчетах Nature Research в 2018 году, предполагает, что длительное воздействие светлой темы может быть связано с близорукостью. Близорукость (или миопия) означает неспособность ясно видеть объекты вдалеке и тесно связана с чтением и уровнем образования. В своем исследовании Андреа Алеман и ее коллеги из Тюбингенского университета в Германии попросили 7 человек прочитать текст, представленный в темной и светлой темах, по часу для каждой. Чтобы увидеть, изменилась ли их предрасположенность к близорукости после чтения, они измерили толщину сосудистой оболочки мембраны позади сетчатки. Истончение сосудистой оболочки связано с близорукостью.

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

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

Пользователи с нарушениями зрения

Как это ни парадоксально, но материалов о пользователях с нарушениями зрения, намного больше, чем о людях с нормальным зрением. Хотя существует негласное мнение, что темная тема лучше, по крайней мере, для некоторых людей с нарушениями зрения. Гордон Легж и его коллеги из Университета Миннесоты определяют две категории слабовидящих: (1) из-за нарушений центрального зрения и (2) из-за нарушения прозрачности оптических сред глаза.

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

Еще в 1977 году исследование Слоуна показало, что некоторые люди со слабым зрением предпочитают темную тему. (В наших собственных исследованиях доступности, Кара Пернис заметила, что пользователи со слабым зрением иногда переключаются между темной и светлой темами в попытке добиться четкости изображения). В 1985 году Гордон Легг и его коллеги из Университета Миннесоты предположили, что этот эффект обусловлен «ненормальным рассеянием света из-за нарушения прозрачности оптических сред глаза». По-видимому, потому что, если больше света попадает в глаз через мутную линзу, существует большая вероятность искажения. Таким образом, темная тема может быть лучше для людей с нарушениями прозрачности оптических сред глаза, потому что дисплей излучает меньше света.

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

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

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

Выводы

Хотя темная тема может представить ряд преимуществ для некоторых пользователей со слабым зрением – в частности, страдающих катарактой, данные исследования указывают на преимущество положительной полярности для пользователей с нормальным зрением. Другими словами, у пользователей с нормальным зрением светлая тема в большинстве случаев приводит к лучшей производительности.

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

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

При этом мы настоятельно рекомендуем дизайнерам разрешить пользователям по желанию переходить на темную тему – по трем причинам: (1) могут быть долгосрочные эффекты, связанные со светлой темой; (2) некоторым людям с нарушениями зрения будет лучше работать в темной теме; и (3) некоторым пользователям просто нравится темная тема. (Мы знаем, что люди редко меняют настройки по умолчанию, но у них должна быть возможность это сделать). Маловероятно, что люди изменят режим отображения для случайного сайта, но, если они часто используют веб-сайт или приложение, им может понадобиться такая опция. В частности, приложения, предназначенные для чтения в длинных формах (такие как книги, журналы и даже новостные сайты), должны предлагать функцию темной темы. И этот вариант в идеале должен распространяться на все экраны этого сайта или приложения. Более того, если операционная система предоставляет API темной темы (как в iOS), убедитесь, что вы используете его. Это даст возможность пользователям использовать ваше приложение или сайт в выбранном ими режиме контрастной полярности.