Содержание
Контраст и читаемость
Читаемость текста в первую очередь определяется контрастом между цветом знаков и цветом фона. Это не субъективное ощущение, а измеримая величина: соотношение контраста (contrast ratio) вычисляется по формуле, учитывающей относительную яркость (luminance) двух цветов.
Чёрный текст (#000000) на белом фоне (#FFFFFF) даёт максимальный контраст 21:1. Тёмно-серый (#333333) на белом — около 12,6:1 — вполне достаточно для комфортного чтения и при этом менее «жёсткий» для глаза. Большинство профессиональных изданий используют не чистый чёрный, а тёмно-серый (от #1A1A1A до #444444) — это снижает оптическое давление при длительном чтении.
Стандарты доступности WCAG
Web Content Accessibility Guidelines (WCAG) — международный стандарт доступности веб-контента, разработанный W3C. Раздел 1.4 устанавливает минимальные требования к контрастности текста:
| Стандарт | Обычный текст (<18pt) | Крупный текст (≥18pt) |
|---|---|---|
| WCAG 2.1 AA (минимум) | 4,5:1 | 3:1 |
| WCAG 2.1 AAA (улучшенный) | 7:1 | 4,5:1 |
Практическая рекомендация: стремитесь к AA-уровню как минимуму. Для критически важного контента (навигация, формы, уведомления об ошибках) достигайте AAA. Проверить контраст можно с помощью инструментов: WebAIM Contrast Checker, Figma Plugin Stark, встроенный аудит в Chrome DevTools.
Психология цвета в тексте
Цвет текста несёт дополнительный смысловой слой, поверх содержания слов. Тёмные, насыщенные цвета (чёрный, глубокий синий, графитовый) ассоциируются с авторитетом, надёжностью, профессионализмом. Светлые и насыщенные — с энергией, молодостью, креативностью.
Красный текст воспринимается как тревожный сигнал даже в нейтральном контексте — если вы используете красный не для ошибок и предупреждений, ожидайте от читателя соответствующей реакции. Синие ссылки — настолько укоренившийся паттерн, что отклонение от него требует специальной компенсации (подчёркивание, другое выделение).
Культурные ассоциации с цветом значительно варьируются. Белый цвет текста на тёмном фоне в западной традиции читается нейтрально; в ряде восточных культур несёт траурную коннотацию. При работе с международными аудиториями это необходимо учитывать.
Тёмная тема: особенности типографики
Тёмный режим (dark mode) — не просто инверсия цветов. Прямое инвертирование чёрного текста на белом в белый на чёрном даёт слишком высокий контраст: белый (#FFFFFF) на чистом чёрном (#000000) создаёт ореол (halation) — эффект, при котором яркие буквы на тёмном фоне кажутся «размытыми» из-за рассеивания света в глазу.
Рекомендации для тёмной темы:
- Используйте не чистый белый, а слегка приглушённый (#E8E8E8, #D0D0D0) для основного текста.
- Фон — не чистый чёрный, а тёмно-серый (#121212 — рекомендация Material Design, #1A1A2E, #0F0F0F).
- Уменьшайте насыщенность ярких цветов: акцентный цвет для тёмной темы должен быть светлее и менее насыщен, чем для светлой.
- Сокращайте размер шрифта на 0,5–1pt/px: в тёмной теме белый текст на тёмном фоне воспринимается визуально крупнее.
Цветной текст: правила применения
Цветной текст — мощный инструмент выделения, но только при умеренном использовании:
- Ссылки и интерактивные элементы — классически синие (#0066CC и подобные), с подчёркиванием или без, но обязательно визуально отличимые от обычного текста.
- Акцентные заголовки — один уровень заголовков может использовать акцентный цвет бренда. Все остальные — нейтральный тёмный.
- Инфографические метки — цвет хорошо работает для подписей к диаграммам и таблицам.
- Предупреждения и статусы — красный для ошибок, зелёный для успеха, жёлтый/оранжевый для предупреждений. Не используйте эти цвета в других контекстах — это сбивает читателя.
«Цвет в типографике — как специя в кулинарии. Он усиливает вкус, но заглушить его слишком легко.»
Практика: Прежде чем добавить цвет, убедитесь, что иерархия и структура работают в оттенках серого. Если чёрно-белая версия читается плохо — цвет проблему не решит, он лишь отвлечёт от неё.