Почему читать тексты в вебе становится все труднее - мнение
Разработчик и сооснователь проекта Microformats Кевин Маркс пожаловался на то, что сайты становятся все менее удобочитаемыми, рассказал, как менялись требования к контрастности шрифта и цвету текста в вебе, и призвал дизайнеров пересмотреть подход к типографике.
Редакция рубрики «Интерфейсы» публикует перевод материала.
Мне все труднее читать тексты на смартфоне или ноутбуке. Я постоянно ловлю себя на том, что прищуриваюсь и подношу экран близко к лицу. Я даже начал беспокоиться за свое зрение.
Меня уже давно раздражает эта проблема, но последней каплей стало то, что платформа 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 отнюдь не черного цвета, как и буквы на страницах сайтов».
Тейлор делает ставку на вариативность цветовых оттенков. Вместо чисто черного цвета он использует темно-серый, и его интерфейсы прекрасно выглядят и при ярком дневном естественном освещении, и в полумраке сумерек. Еще больше возможностей дает окрашивание в белый цвет, поскольку операционные системы, особенно на мобильных устройствах, постоянно меняют яркость и цвет в зависимости от времени дня и освещения.
Это подводит нас к основной проблеме. Адам Шварц отмечал: «Цвет, который мы видим, не является таковым ни для компьютера, ни для человеческого глаза».
То, что вы видите, глядя на устройство, зависит от множества факторов: от вашего браузера, устройства (смартфон это или компьютер), качества дисплея, освещения и больше всего - от особенностей вашего зрения.
Создавая дизайн сайта и не думая о последствиях (о том, что будет, когда значения яркости и контраста, введенные в код, изменятся в зависимости от настроек физического экрана), вы игнорируете результат, который сами же создаете. Сидя в идеально освещенном офисе за большим монитором с отличным расширением, вы можете уменьшать контрастность текста и не думать о потенциальных пользователях. Но разве это не отказ от ответственности перед людьми, для которых вы работаете'
Мой призыв обращен ко всем веб-дизайнерам: давайте откажемся от лишних изысков и вернемся к типографским принципам печати - пусть шрифт будет черным независимо от его стиля и размера. Так мы поддержим не только людей, у которых зрение ослабло из-за возраста, но и всех, кто читает тексты на маленьких и не очень ярких экранах. Возможно, это не слишком стильно или модно, но давайте позаботимся о тех, кому дизайнерская эстетика выходит боком.
