Почему читать тексты в вебе становится всё труднее — мнение02.11.2016 18:37

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

Меня уже давно раздражает эта проблема, но последней каплей стало то, что платформа Google App Engine, с которой я работаю каждый день, вдруг из чёткой и ясной стала едва различимой. Текст, который только что был контрастным и тёмным, превратился в мертвенно-бледный. Да, с возрастом моё зрение падает, но в данном случае я явно страдаю от модного тренда.

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

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

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

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

Старый дизайн Google App Engine — старомодно, но всё прекрасно видно

Современный дизайн с мелким и бледным текстом

Нетрудно догадаться, что главным условием разборчивости текста является контраст — разница между цветом шрифта и фона. В 2008 году организация Web Accessibility Initiative разработала общепринятый стандарт для создания удобочитаемых страниц. Этот стандарт использует числовые значения.

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

Эти рекомендации до недавнего времени чётко обозначали границы удобочитаемости. Но сегодняшние дизайнеры нарушают эти границы.

Уровни контраста в 2008 году

Например, в корпоративном руководстве по типографике Apple заявлено, что дизайнеры должны придерживаться уровня контрастности 7:1. Сама рекомендация при этом напечатана с контрастностью 5,5:1.

Фрагмент из руководства для разработчиков Apple

Руководство Google предлагает придерживаться такого же соотношения — 7:1. И тут же рекомендует добавлять прозрачность 54%, что в итоге выливается в контрастность 4,6:1.

Неудивительно, что выбор Apple и Google, которые сами балансируют на границе разборчивости, задаёт стандарты веб-дизайна для всех остальных компаний.

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

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

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

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

Когда я спрашивал дизайнеров, почему серый шрифт стал таким популярным, многие ссылались на «Справочник типографа». Это руководство предостерегает от слишком сильного контраста, рекомендуя вместо чёрного шрифта (#000) использовать очень тёмный серый цвет (# 333).

Многие дизайнеры считают, что чёрный текст на белом фоне вызывает переутомление глаз и выбор более мягкого цвета делает страницу удобнее для чтения. Автор блога Magic of CSS Адам Шварц тоже приводит этот аргумент: «Резкий контраст между чёрным шрифтом и белым фоном может создать излишнее напряжение глаз (обратное тоже верно. Это весьма субъективно, но на это стоит обратить внимание)».

Позвольте мне побыть «капитаном очевидность»: Шварц сам признаёт субъективность своего вывода.

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

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

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

Это подводит нас к основной проблеме. Адам Шварц отмечал: «Цвет, который мы видим, не является таковым ни для компьютера, ни для человеческого глаза».

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

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

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