Цвет и типографика: контраст, эмоция, доступность
Цвет текста — не декоративное решение. Это фундаментальный параметр читабельности и эмоционального восприятия, имеющий измеримые психологические эффекты.
Контраст как основа читабельности
Контраст между текстом и фоном — главный параметр, определяющий читабельность. Стандарт WCAG 2.1 определяет минимальный коэффициент контраста для обычного текста как 4.5:1 (уровень AA) и 7:1 (уровень AAA). Эти цифры — не абстрактные нормативы, а результаты исследований читабельности для людей с пониженным зрением.
Заголовки
Основной
Вторичный
Описания
Фон
Светло-серый текст (#AAAAAA) на белом фоне (#FFFFFF) имеет контраст всего 2.3:1 — это нарушение WCAG AA. Несмотря на популярность такого стиля в «минималистичном» дизайне, он недоступен для 8% мужчин и 0.5% женщин с дефицитом цветового зрения.
Психология цвета текста
Цвет текста работает на двух уровнях: функциональном (контраст, различимость) и семантическом (ассоциации, коннотации).
| Цвет текста | Ассоциации | Контекст применения |
|---|---|---|
| Тёмно-серый/чёрный | Нейтральность, серьёзность, авторитет | Основной текст, новости, академические публикации |
| Тёмно-синий | Доверие, надёжность, профессионализм | Финансы, медицина, право |
| Тёмно-зелёный | Природа, безопасность, равновесие | Экология, здоровье, образование |
| Тёмно-красный | Срочность, важность, предупреждение | Предупреждения, акции, призывы |
| Золотистый/бронзовый | Премиум, классика, вечность | Luxury-брендинг, культура, искусство |
Цветной текст: когда да, когда нет
Цветной основной текст (не чёрный/серый) оправдан в трёх случаях: брендированные заголовки, где цвет несёт смысловую нагрузку; интерактивные элементы (ссылки, кнопки), где цвет сигнализирует о возможности действия; акцентные цитаты или выделения, используемые редко.
Цветной основной текст в длинных текстах — ошибка. Насыщенные цвета быстро утомляют зрение при длительном чтении. Это причина, по которой почти все книги и газеты набираются тёмно-серым или чёрным на белом.
Тёмная тема (dark mode)
В тёмной теме распространена ошибка: использовать чисто белый (#FFFFFF) текст на чисто чёрном (#000000) фоне. Контраст 21:1 — максимальный теоретический, но не оптимальный. Такой контраст создаёт эффект «ореола» вокруг букв (halation), особенно заметный при астигматизме.
Для тёмной темы рекомендуется: фон #121212 или #1A1A1A, основной текст #E0E0E0 или #F0F0F0 (контраст ~10–14:1 — достаточно для AAA без излишнего напряжения).
Проверить контраст своих цветов