Почему цвет — это типографическая проблема
Когда дизайнеры думают о цвете в типографике, они часто останавливаются на акцентных заголовках и цветных блоках. Но фундаментальная задача цвета в тексте — контраст. Без достаточного контраста между символом и фоном текст перестаёт быть текстом: он становится текстурой.
Исследования читаемости показывают, что оптимальный контраст для длинного чтения — это не максимальный контраст (#000000 на #FFFFFF), а чуть приглушённый. Чисто белый фон с абсолютно чёрным текстом создаёт галационный эффект: у людей с астигматизмом (около 50% взрослого населения) текст начинает «плыть». Именно поэтому ведущие издания — от Medium до The Atlantic — используют тёплые off-white фоны с тёмно-серым текстом.
Стандарты WCAG: что это и почему важно
Web Content Accessibility Guidelines (WCAG) 2.1 определяют минимальные требования к контрасту текста. Для нормального текста (менее 18pt или 14pt жирного) требуется коэффициент контраста не менее 4.5:1. Для крупного текста — не менее 3:1. Уровень AAA предполагает 7:1 для обычного текста.
| Уровень | Основной текст | Крупный текст |
|---|---|---|
| AA (минимум) | 4.5:1 | 3:1 |
| AAA (расширенный) | 7:1 | 4.5:1 |
| Рекомендация Mirevia | 6:1 – 8:1 | 4:1 |
Для проверки контраста используйте инструменты: Contrast Checker от WebAIM, встроенный инспектор Figma или расширение Stark для браузера. Google ADS требует соответствия AA для всех текстовых элементов рекламных лендингов.
«Цвет в типографике — это не украшение и не настроение. Это функциональное решение, которое либо помогает читать, либо мешает.»
— Артём Кириленко, аналитик MireviaЦветовые роли в текстовой системе
Профессиональная типографическая цветовая система всегда строится на ролях, а не на конкретных цветах. Типичная структура: основной текст (--ink), вторичный текст для подписей и метаданных (--ink-soft), третичный для меток времени и вспомогательных ярлыков (--ink-muted), акцентный для ссылок, тегов и выделенных элементов (--accent).
Важно: ни один из этих цветов не должен меняться в зависимости от контекста без явной необходимости. Консистентность цветовых ролей обеспечивает предсказуемость интерфейса — читатель подсознательно понимает иерархию, не анализируя её.
Цветовой акцент: ошибки и решения
Самая частая ошибка — использование насыщенного цвета для крупных блоков основного текста. Насыщенные цвета (синий, красный, зелёный) создают высокий цветовой контраст, но снижают яркостный — а именно яркостный контраст определяет читаемость.
Правило: цветные тексты работают только при двух условиях. Первое — небольшой объём (заголовок, тег, кнопка). Второе — достаточный яркостный контраст с фоном (проверяйте luminance ratio, а не только hex-коды). Для длинного текста всегда выбирайте нейтральные тона с высоким яркостным контрастом.
Тёмная тема: особый случай
Тёмные темы требуют пересмотра цветовых ролей, а не их инверсии. Прямая инверсия #1a1a18 → #e8e8e2 на тёмном фоне создаёт слишком высокий контраст: текст начинает «светиться», что утомляет глаза при длительном чтении. Практика лучших изданий: основной текст в тёмной теме — rgba(255,255,255,0.87), вторичный — rgba(255,255,255,0.60), третичный — rgba(255,255,255,0.38).