Цвет и типографика

Контраст как основа читаемости

WCAG 2.1 (Web Content Accessibility Guidelines) устанавливает минимальный коэффициент контраста: 4,5:1 для основного текста и 3:1 для крупного (18pt и выше). Это не абстрактные цифры — они основаны на исследованиях читаемости для людей с нарушениями зрения.

Серый текст на белом фоне — распространённая дизайнерская ловушка. Красивый на Retina-экране в 100% освещении, он становится нечитаемым на TN-матрице или при прямом солнечном свете.

Чёрный на белом (21:1) — идеальный контраст, но не единственный вариант. Тёмно-синий (#1C2B4A) на кремовом (#F8F5EF) даёт около 12:1 — отличный результат с более тёплым характером.

Холодные и нейтральные тёмные

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

Тёплые акцентные

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

Насыщенные функциональные

Зелёный, синий, фиолетовый в умеренной насыщенности — классика функциональных ссылок и интерактивных элементов. Пользователи обучены: синий подчёркнутый = ссылка. Нарушение этого паттерна — риск для UX.

Приглушённые и нейтральные

Серые и бежевые оттенки — для вспомогательного текста: подписи, метки, даты, сноски. Никогда — для основного текста. Опасность: при низком разрешении или плохом освещении теряют читаемость.

Типографический «серый»

Профессионалы используют термин «типографический серый» для обозначения визуальной плотности текстового блока в целом — вне зависимости от фактического цвета шрифта. Равномерный «серый» — показатель сбалансированного набора без «дыр» и «пятен».

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

Это понятие позволяет оценивать качество набора «из-за угла» — буквально смотреть на разворот прищурившись. Неровности тогда проявляются особенно отчётливо.

Основной текст — только с высоким контрастом (минимум 4,5:1). Красота не оправдывает нечитаемость.

Цветные заголовки привлекают внимание, но не более 2 акцентных цветов в одной публикации.

Подчёркивание + синий цвет = ссылка. Не используйте этот паттерн для декоративного текста.

Реверсивный набор (светлый на тёмном) требует уменьшения насыщенности и увеличения кегля.

Цвет как иерархия: один акцентный цвет выделяет первый уровень важности. Два — создают конфуз.

Избегайте чистого #000000 для текста — используйте «почти чёрный» (#1C1C1C, #2C2C2C) для мягкости.

Цветной текст на цветном фоне: сначала рассчитайте контраст, потом думайте об эстетике.

Тест на дальтонизм: 8% мужчин имеют нарушения цветовосприятия. Инструменты: Coblis, Sim Daltonism.

Принтовый цвет ≠ экранный. Пантонный справочник и профиль ICC незаменимы для полиграфии.

Ночной режим (dark mode): инвертируйте не только цвет, но и вес гарнитуры — в тёмном режиме нужен более лёгкий начертание.