В типографике термин «цвет» имеет двойное значение. В узком, традиционном смысле «типографский цвет» — это воспринимаемая плотность, тёмность текстовой полосы как единого серого поля: насколько темна или светла страница при взгляде с расстояния. В широком смысле — это буквальная хроматическая информация, которую несут шрифт, фон и их сочетание.
Цветовой контраст и читаемость
Читаемость текста критически зависит от контраста между цветом символов и фоном. Это физиологически обусловленный факт: человеческий глаз воспринимает форму за счёт контраста яркости (luminance contrast), а не только хроматических различий. Текст синего цвета на зелёном фоне может иметь недостаточный контраст яркости даже при визуально «ярком» хроматическом различии.
Белый на тёмном
Контраст 12.6:1 ✓
Белый на синем
Контраст 4.6:1 ✓
Тёмный на жёлтом
Контраст 8.3:1 ✓
Стандарты WCAG: доступность текста
Web Content Accessibility Guidelines (WCAG 2.1) устанавливают минимальные требования к контрасту текста:
| Уровень WCAG | Основной текст | Крупный текст (≥18pt или ≥14pt Bold) |
|---|---|---|
| AA (минимум) | 4.5:1 | 3:1 |
| AAA (улучшенный) | 7:1 | 4.5:1 |
Контраст вычисляется по формуле: (L1 + 0.05) / (L2 + 0.05), где L1 и L2 — относительная яркость более светлого и более тёмного цветов соответственно. Онлайн-инструменты как WebAIM Contrast Checker и браузерные DevTools позволяют проверить соответствие стандарту непосредственно в процессе разработки.
Типографский цвет как плотность
Классическое понятие «цвет полосы набора» означает воспринимаемую яркостную плотность текстового блока. На неё влияет множество факторов:
- Насыщенность (вес) шрифта: Bold темнее Regular, Light светлее
- Ширина штрихов: Антиква с сильным контрастом штрихов светлее, чем равноштриховый гротеск
- Интерлиньяж: Увеличенный интерлиньяж осветляет полосу
- Апрош и трекинг: Разреженный текст оптически светлее
- X-height: Шрифты с большим x-height воспринимаются темнее
Хроматические шрифты
Технология цветных (хроматических) шрифтов позволяет встроить информацию о цвете непосредственно в шрифтовой файл. Существует несколько конкурирующих форматов:
- SBIX (Apple): PNG или JPEG растры на разных разрешениях внутри шрифтового файла
- CBDT/CBLC (Google): Растровые изображения, используются в Emoji шрифтах Android
- SVG (Adobe/Mozilla): Векторные SVG-изображения для каждого глифа с поддержкой градиентов
- COLRv0/COLRv1 (Microsoft/Google): Векторный формат на основе контуров с поддержкой многослойной заливки; COLRv1 поддерживает градиенты и прозрачность
COLRv1 поддерживается Chrome с версии 98, Firefox с версии 107, Safari с версии 16.4. Это делает его жизнеспособным форматом для веб-типографики — прежде всего для эмодзи и декоративных заголовочных шрифтов.
"Цвет в типографике — не украшение. Это информация. Каждый хроматический выбор несёт значение: приоритет, категорию, эмоциональный тон. Случайный цвет — это случайное значение."
— Эрик Спикерман, «Стоп воруйте шрифты», 2014Психология цвета в типографике
Исследования в области когнитивной психологии показывают, что цвет текста влияет не только на читаемость, но и на воспринимаемый тон и достоверность. Тёмно-синий цвет заголовков ассоциируется с надёжностью и профессионализмом. Красный акцент сигнализирует о важности или предупреждении, но снижает воспринимаемую читаемость при использовании для основного текста. Нейтральные тёмно-серые тона (#333–#444) для основного текста воспринимаются как менее агрессивные, чем чистый чёрный (#000), при незначительной потере контраста.