Вырви глаз: как информация в интернете стала нечитаемой

Я думал, что у меня садится зрение – оказалось, я просто страдаю из-за дизайна. Читать с телефона и ноутбука становится все сложнее. Я словил себя на том, что щурюсь и подношу экран все ближе к своему лицу. Меня беспокоит, что зрение начало падать. Эти трудности сделали из меня настоящего ворчуна, но что вовсе выбило из колеи – так это App ENGINE-консоль от Google, которую я как разработчик ежедневно использую. Она изменила свой текст с разборчивого на неразборчивый. Темный и четкий когда-то, текст внезапно окрасился бледным серым цветом. И хотя на моем зрении действительно сказывается возраст, выходит, что на самом деле я больше страдаю из-за популярного дизайн-тренда.

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

Оформление шрифтов не кажется ключевым элементом дизайна, но на самом деле оно им и является. Одна из причин, по которым мы начали использовать интернет в качестве главного канала доступа к информации – то, что он делает эту информацию легко доступной каждому. «Сила интернета в его универсальности, — написал Тим Бернерс-Ли, директор консорциума World Wide Web. – Доступ для каждого, независимо от возможностей, — неотъемлемая часть сети».

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

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

Слева старая, но четкая консоль — справа — современная, крошечная и бледная консоль

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

В 2008 году Web Accessibility Initiative, которая создает рекомендации для веб-разработчиков, ввела широко признанное соотношение для создания легко читаемых веб-страниц. Для передачи контраста традиционно используют цифровую модель. Если текст и фон веб-сайта имеют один и тот же цвет, соотношение составляет 1:1. Для получения черного текста на белом фоне (или наоборот), соотношение должно быть 21:1. Web Accessibility Initiative установила 4,5:1 в качестве минимально приемлемого значения контрастности, в то время как рекомендованная контрастность, комфортная для читателей со слабым зрением – не менее 7:1.

Контрастная модель 2008 года

Руководство 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-битные экраны стали обычным делом, дизайнеры перешли от броских цветов, рекомендованных в 90-х годах, к более тонким решениям. Стали доступны пастельные фоны и шрифты мягких оттенков.

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

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

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

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

Поддерживаемая дизайнерами теория заключается в том, что черный текст на белом фоне может напрягать глаза. А более мягкий оттенок черного текста, наоборот, делает страницу более удобной для чтения. Адам Шварц, автор книги «Магия CSS», подтверждает этот аргумент:

Резкий контраст черного цвета на белом может создавать визуальные артефакты или увеличить нагрузку на глаза. (Обратное также верно. Это довольно субъективно, но все же стоит отметить).

Позвольте мне подчеркнуть: сам Шварц допускает, что заключение носит субъективный характер.

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

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

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

Это приближает нас к основной проблеме. Как отмечает Адам Шварц,

Цвет является цветом и не цветом…

…и для компьютеров … и для человеческого глаза.

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

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

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

Автор: Кевин Маркс

Источник: Backchannel