Как веб стал нечитаемым

Разработчик Кевин Маркс написал на WIRED статью о том, как современные веб-сайты становятся все менее доступным для людей с ограничениями по зрению или для низкокачественных экранов. Кто виноват в том, что сайты становится всё сложнее читать?

Мне становится все труднее читать что-то с телефона или ноутбука. Я всё чаще ловлю себя на том, что я щурюсь и подношу экран ближе к лицу. Я испугался, что мое зрение начало ухудшаться. Это начало злить меня, но последней каплей стало то, что консоль Google App Engine — страница, которую я использую каждый день, как разработчик — сменила свой текст с четкого на нечеткий. Хотя возраст и повлиял на мое зрение,оказалось, что я просто страдаю от нового тренда в дизайне.

В области дизайна существует распространенное движение по снижению контрастности между текстом и фоном, из-за чего текст становится сложно читать. Apple виновна. И Google. И Twitter.

Типографика может казаться не самым важным элементом дизайна, но она им является. Одна из причин, по которой веб стал способом получения информации по умолчанию — это то, что эта информация широко доступна всем. “Сила Веба в его универсальности”, — написал Тим Бернерс-Ли, глава Консорциума Всемирной паутины. “Доступ для каждого вне зависимости от ограничений — это ключевой аспект”.

Как правильно выбрать шрифт для игры

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

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

Консоль Google’s App Engine до — старомодная, но читаемая

Консоль Google’s App Engine после — современная и бледная

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

Для передачи контраста они использовали числовую модель. Если текст и фон на сайте одного цвета — соотношение равно 1:1. Для черного цвета на белом фоне (или наоборот) — соотношение равно 21:1. Инициатива установила 4.5:1 как минимальный показатель, но рекомендовала контрастность как минимум 7:1, чтобы помочь читателям со слабым зрением. Рекомендация была создана как предлагаемый минимальный контраст, чтобы обозначить границы читабельности. Дизайнеры по-прежнему используют эти рекомендации как стартовую точку.

Например: правила типографики Apple предлагают разработчикам стремиться к соотношению 7:1. Но какое соотношение использовано для самих правил? 5.5:1.

Правила Google предлагают такое же соотношение 7:1. Но затем они рекомендуют 54-процентную непрозрачность для экрана и описания, и это правило аналогично соотношению 4.6:1.

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

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

Когда в 1996 появился HTML 3.2, он расширил опции для веб-дизайна, создав формальный набор цветов для текста и фона страницы. Рекомендации браузера ограничивались 216 “безопасными для веба” цветами, которые многие 8-битные экраны могли понятно передавать. Когда 24-битные экраны стали более популярными, дизайнеры отошли от рекомендуемых цветов к более изящным дизайнерским решениям. Появились пастельный фон и утонченный текст.

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

LCD-технология развивалась и экраны достигли больших разрешений, поэтому началась мода на более тонкие шрифты. Apple возглавила тренд, сделав Helvetica Neue Ultralight своим системным шрифтом (сейчас Apple добавила вариант жирного начертания текста).

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

Почему многие дизайнеры переходят на более светлый текст? Когда я спросил дизайнеров, почему серый шрифт стал таким популярным, многие указали мне на Typography Handbook, гид по веб-дизайну. Этот справочник предостерегает от использования сильной контрастности. Он рекомендует разработчикам использовать темно-серый цвет (#333) вместо черного (#000).

Дизайнеры поддерживают теорию о том, что черный текст на белом фоне может привести к перенапряжению глаз. Более мягкий оттенок черного текста делает страницу более удобной для чтения. Адам Шварц, автор “The Magic of CSS” повторяет аргумент:

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

Заметьте: сам Шварц считает, что это субъективно.

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

Некоторые дизайнеры указали мне на статью Иена Сторма Тейлора “Design Tip: Never Use Black”. В ней Тейлор говорит, что черный больше является концепцией, а не цветом.

Мы видим темные вещи и предполагаем, что они черные. В то же время в реальности сложно найти что-то абсолютно черное. Дорогие — не черные. Ваш офисный стул — не черный. Боковая панель в Sparrow — не черная. Слова на веб-странице — не черные.

Тейлор использует вариабельность цвета для разговора об утонченности веб-дизайна, а не о осветлении текста. Его точка зрения имеет смысл — рассеяние света и подсветка экрана делают черный цвет (#000) не полностью черным, он имеет серый оттенок. Белый цвет ещё сильнее меняется от системы к системе, особенно это видно на телефоне, который постоянно меняет цвет и яркость в зависимости от времени суток и освещения.

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

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

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