С каждым месяцем всё тяжелее читать материалы на смартфонах и лэптопах. Мы вынуждены держать экран ближе к глазам; и кажется, что зрение ухудшается. Это как бег с препятствиями, только в чтении — поневоле занервничаешь. Отдельно раздражают изменения в интерфейсе той же консоли Google App Engine. Страница, которую разработчики используют ежедневно , внезапно изменяет текст с контрастного чёткого на размытый серый, неразборчивый и плохо читаемый. Сегодня распространён тренд, когда дизайнеры уменьшают контраст между текстом и фоном. Читать от этого становится сложнее. Такая ситуация характерна для онлайн-сервисов Apple, Google, Twitter и других.
Кажется, что контраст не важен, но это не так. Причина, по которой интернет стал главным источником информации — доступность для широкого круга пользователей. «Мощь веб-пространства — в его универсальности. И это — очень существенный аспект,» — написал в своё время Тим Бернерс-Ли (Tim Berners-Lee).
Но если Сеть скатывается к тому, что тексты тяжело читать, сокращается доступ к сайтам для масс. Это касается пожилых пользователей, людей со слабым зрением и тех, кто читает с экранов с низким разрешением. Мы полагаемся на компьютеры для повседневного использования онлайн-сервисов. Читабельность текста приобретает решающее значение. Создавать базовую структуру текста надо так, чтобы это «работало» для большинства пользователей независимо от остроты их зрения. И тут понадобится ряд критериев.
Стандарты от Apple и Google
Консоль Google App Engine ранее — старомодная, на контрастная и удобочитаемая
Современная консоль 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 первоначально с «блёклым» чёрно-серым текстом, ко времени его популяризации он уже использовал чёрный текст на белом фоне.
С появлением HTML 3.2 в 1996 году Mosaic расширил возможности для дизайна путём создания формального набора цветов для текста и фона. Хотя рекомендации советовали ограничить цвета группой 216 «web-safe» (таким набором цветов, которые легко читать на экранах с 8-битной глубиной цвета). Когда распространились экраны с 24-битной глубиной цвета, дизайнеры отбросили рекомендации 1990-х и перешли на цветовые оттенки.
Тогда компьютеры всё ещё были ограничены набором шрифтов, уже установленных на устройстве. Большинство этих шрифтов были сплошными по заливке и удобочитаемыми. Поскольку стандартный шрифт был чётким, дизайнеры начали выбирать более светлые тона для текста. Но к 2009 году дизайнеры стали загружать шрифты, чтобы использовать на веб-страницах. Так сократилась зависимость от шрифтов типа «web-safe».
LCD-технология прогрессировала, и экраны обрели более высокое разрешение. Так появилась мода на графические формы. Apple возглавила этот тренд, когда разработала шрифт Helvetica Neue Ultralight в 2013 году. В конечном итоге, Apple отошла от рубленых шрифтов, добавив опцию полужирного текста.
Поскольку экраны становились более продвинутыми, дизайнеры стали использовать преимущества лёгких типографских гарнитур, низкой контрастности и тонких очертаний шрифта. Чем больше пользователей переходили на ноутбуки, смартфоны и планшеты, тем заметнее становилась несостоятельность критериев дизайна, выработанных специально для настольных компьютеров.
Переход на прозрачность
Почему же дизайнеры обращаются ко всё более лёгкому и прозрачному тексту? Ответ частично содержится в Typography Handbook, справочном руководстве по веб-дизайну. Эта книга предостерегает от использования слишком контрастных комбинаций. Она рекомендует разработчикам использовать очень тёмный серый цвет (#333) вместо полностью чёрного (#000). Причина: очень чёрный текст на белом фоне может чрезмерно напрягать глаза. Более мягкие оттенки тёмного текста делают страницы приятнее для чтения. Адам Шварц, автор книги «The Magic of CSS» изложил этот аргумент по-другому:
«— Слишком высокая контрастность чёрного текста на белом фоне может создавать визуальные артефакты или увеличивать усталость глаз. Обратное соотношение, то есть белый текст на чёрном фоне, также может быть некомфортным. Хотя всё это субъективно.»
Другое распространённое оправдание снижения контрастности на сайтах заключается в том, что людей с дислексией высокий контраст текста и фона сбивает с толку. Исследования подтверждают эффективность уменьшения силы света фона вместо подсвечивания текста.
У некоторых дизайнеров — другое мнение. Так, Ян Шторм Тейлор (Ian Storm Taylor) аргументирует, что чистый чёрный шрифт более концептуален, чем цветной. «Мы видим чёрные фигуры и принимаем их как чёрные. Хотя в реальности тяжело найти цвет, который действительно будет чёрным. Ваше офисное кресло на самом деле не абсолютно чёрное — и текст на веб-странице также не чёрный».
Тейлор использует изменчивость цветов чтобы показать утончённость веб-дизайна, а не только текста. В то же время он указывает, что из-за особенностей фонового освещения, а также специфики технологий подсветки матрицы дисплея, даже чёрный цвет (#000) в реальности не такой. Вместо этого он обладает серыми оттенками. Белый цвет даже более изменчив, поскольку операционные системы (особенно на мобильных гаджетах) непрерывно изменяют яркость подсветки в зависимости от внешнего освещения.
И это подводит нас к основополагающей проблеме, на которую указывает Адам Шварц:
«— Цвет — это цвет, который не является цветом… Ни для компьютеров… Ни для человеческого глаза».
Что мы видим в реальности, когда включаем своё устройство, так это зависимость от множества факторов: какой браузер вы используете на смартфоне или на ноутбуке, каково качество дисплея и условия освещения… Конечно же, немало зависит от вашего зрения.
ЧИТАЙТЕ ТАКЖЕ:
О восприятии надо помнить при разработке сайта. Если будете игнорировать, как заданные значения определят яркость и контрастность продукта — вы просто избегаете реакции на восприятие сайта пользователями. Если разрабатываете в идеальных условиях, используя качественный профессиональный монитор, то на самом деле вы «ослепляете» себя перед пользователем. Ведь у него будет совсем другой экран и совсем другое восприятие изображения. Если вы полагаетесь только на то, что «это отлично выглядит на моём дисплее при моём идеальном освещении», значит вы просто отказываетесь от ответственности за читабельность вашей разработки в будущем.
Ппожелания дизайнерам и программистам — игнорируйте веяния моды и вернитесь к типографским принципам дизайна. Оставьте шрифты чёрными и экспериментируйте с жирностью и типом шрифта, вместо игры с градациями серого. Этим вы облегчите жизнь пользователей, которые читают на небольших и тусклых экранах, и поможете сохранить зрение остальным. Возможно, такие пожелания не соответствуют модным трендам, но они актуальны.
Доменный регистратор №1 в Украине imena.ua
Источник: Backchannel