Серый шрифт на чёрном фоне: читабельно?

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

Павел ШУДНЕВ

Цитата: «Благотворительный фонд пытался просить об оказании финансовой помощи для голодающих детей с помощью этой рекламы, напечатанной «наизнанку» – белым шрифтом по черному фону. После того как я в разговоре с ними предложил попробовать стандартный вариант – черным по белому, они вскоре сумели собрать вдвое больше денег, чем в первый раз». (Дэвид ОГИЛВИ, «О рекламе», стр. 104-105.)

Чем мог быть вызван такой результат – в два раза большая отдача от рекламы, в которой «просто» поменяли дизайн текстового оформления? Так как размещали рекламу в тех же носителях, что и раньше, с прежней частотностью, очевидно, что изменился КПД рекламы.

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

Контрастность и читабельность

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

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

Формально у белого на черном и черного на белом контрастность одинаковая. Однако для человека разница в этих вариантах есть, и весьма значительная: люди с астигматизмом белый текст на черном фоне видят размытым.

Из результатов исследований

«Людям с астигматизмом (примерно 50% населения) сложнее читать белый текст на черном фоне, чем черный текст на белом фоне. Отчасти это вызвано световым контрастом: при ярком экране монитора (белый фон), радужная оболочка глаза чуть-чуть закрывается, за счет чего уменьшается эффект «искаженных» линз; при темном же дисплее (черный фон) радужная оболочка глаза открывается так, чтобы в нее проникало больше света, и поэтому деформация глазных линз приводит к эффекту размытого фокуса». (Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia.)

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

Пять оттенков серого

В отличие от печатной продукции, в которой можно использовать более ста оттенков серого цвета, в оформлении текстов веб-страниц на выбор дизайнера еще недавно предоставлялось всего пять вариантов градаций черного: непосредственно черный цвет, и четыре его светлых оттенка – 80%, 60%, 40% и 20% черного (см. фото ниже).

color-picker

Так как тема статьи – серый шрифт на черном фоне (что само по себе не самая удачная мысль), имеет смысл оценить, насколько плохо сочетание того или иного серого цвета с черным фоном. Поможет нам в этом online-инструмент Colour Contrast Check (проверка цветовой контрастности).

Результаты теста

Критерии оценки приведены ниже.

333333-000000-web

Вариант 1: очень темно-серый (80% черного) на черном фоне. Самый нечитабельный и неразборчивый вариант. Перепада цветов практически нет, перепада яркости тоже нет, контрастность почти нулевая, цвета несовместимы между собой – такой текст невозможно будет прочитать ни одному человеку, ни при каком размере шрифта!

666666-000000-web

Вариант 2: темно-серый (60% черного) на черном. Ненамного лучше первого варианта. Текст можно будет с трудом прочитать, если размер шрифта будет 18 пунктов и выше.

999999-000000-web

Вариант 3: серый (40% черного) на черном. Цвета не вполне совместимы, однако оформленный таким образом текст уже может быть читабельным (однако для людей с астигматизмом его чтение будет весьма затруднительным).

cccccc-000000-web

Вариант 4: светло-серый (20% черного) на черном. Совместимые цвета, достаточные перепады цвета и яркости, для 50% людей такой текст может быть читабельным (для других 50% людей – едва ли).

Критерии оценки

В левой ячейке результатов теста (foreground colour) сверху указан цвет шрифта (четыре оттенка серого), в центральной ячейке (background colour) – цвет фона (во всех случаях черный), в правой ячейке (Results) рассчитаны важные для читабельности параметры:

  • Перепад яркости (Brightness Difference)
  • Перепад цвета (Colour Difference)
  • Совместимы ли цвета? (Are colours compliant?)
  • Контрастность (Contrast Ratio)
  • Соответствует рекомендациям WCAG 2* AA (WCAG 2 AA Compliant)
  • Соответствует рекомендациям WCAG 2 AA (18pt+)
  • Соответствует рекомендациям WCAG 2 AAA
  • Соответствует рекомендациям WCAG 2 AAA (18pt+)

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

* Web Content Accessibility Guidelines (WCAG) 2.0 – методические рекомендации по читабельности содержимого веб-страниц, где: АА – допустимо; AA (18pt+) – допустимо, если размер шрифта 18 пунктов и выше; ААА – хорошо; ААА (18pt+) – хорошо, если размер шрифта 18 пунктов и выше

Post Scriptum

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

Другие статьи
С засечками или без засечек: какой шрифт читабельнее?
Есть мнение, что шрифты с засечками читабельнее, так как засечки создают горизонтальную линию, по которой скользит взгляд читателя. И есть точка зрения, что с экрана легче читать шрифты без засечек, так как они разборчивее... Чему верить? Попробуем разобраться. Читать далее
Какой шрифт лучше?
Я считаю, что лучше тот шрифт, который легче читать. Однако на бумаге и экране монитора текст читается по-разному. Поэтому шрифт, который лучше всего подходит для сайта, в печати использовать стоит не всегда. Читать далее
Что есть шрифт, а что нет?
Сегодня мы поговорим о терминологии и проясним, что такое шрифт, начертание, гарнитура и семейство шрифтов. Читать далее
Почему я решил завести блог?
Потому, что пришло понимание: пора! Чтобы научиться им, блогом, пользоваться. Научиться его продвигать. Развивать. Чтобы с нуля создать интеллектуальный продукт и вывести его на рынок. Кто знает, быть может это станет началом большого пути? Читать далее