Почему цвет — это система, а не выбор

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

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

Контраст: стандарты и реальность

Стандарт WCAG 2.1 требует коэффициент контраста не менее 4.5:1 для основного текста и 3:1 для крупных заголовков (от 18pt bold или 24pt normal). Эти цифры выглядят сухо, но за ними стоит огромный массив исследований, включая данные по слабовидящим пользователям, людям с дислексией и пожилой аудитории.

Реальная практика показывает, что «красивые» серые тексты на белом фоне — один из самых распространённых нарушителей стандарта. Популярный оттенок #999999 на белом фоне имеет контраст всего 2.85:1, что не соответствует требованиям WCAG даже для крупного текста.

Проверить контраст любой пары цветов можно через бесплатный инструмент WebAIM Contrast Checker или плагин Stark для Figma. Обе утилиты показывают соответствие уровням AA и AAA стандарта WCAG.

Тёплые vs. холодные фоны для длинного текста

Чисто белый фон (#FFFFFF) с чёрным текстом (#000000) даёт максимальный контраст — 21:1. Однако это соотношение слишком велико для длительного чтения. Исследования по утомляемости зрения показывают, что тёплые или слегка притушенные пары — например, #F5F1EB на #1C1814 — обеспечивают контраст порядка 14–16:1 при значительно меньшей нагрузке на зрение.

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

"Идеальный контраст — это не максимальный контраст. Это тот уровень напряжения между тоном и фоном, при котором глаз работает без усилий."

— Джеймс Флетчер, UX-исследователь

Цвет и иерархия: трёхуровневая модель

Практический подход к цвету в типографике строится на трёх уровнях. Основной текст должен иметь максимальный контраст и нейтральный тон — здесь цвет не несёт смысловой нагрузки, только обеспечивает читабельность. Вспомогательный текст (даты, метки, подписи) использует более светлый оттенок того же тона для снижения визуального веса. Акцентный текст (ссылки, кнопки, активные элементы) получает единственный насыщенный цвет системы.

Эта модель гарантирует иерархию без необходимости менять размер или вес шрифта. Пользователь мгновенно считывает уровни важности — даже не осознавая, что делает это через цвет.

Доступность как проектный принцип

Около 8% мужчин и 0.5% женщин имеют ту или иную форму цветовой слепоты. Наиболее распространена дейтеранопия (неразличение красного и зелёного). Это означает: никогда не используйте цвет как единственный носитель информации. Если ссылка отличается от обычного текста только цветом — это проблема доступности.

Хорошее правило: проверяйте ваш интерфейс в режиме Grayscale. Если иерархия сохраняется — цветовая схема построена правильно.