Как подобрать цвета для сайта, чтобы текст хорошо читался

Контрастность — это разница между цветом текста и цветом фона. Чем она выше, тем легче различать символы. Контраст особенно важен для небольшого текста, длинных абзацев, подписей к формам и элементов, которыми нужно пользоваться на ходу.
В рекомендациях WCAG используются коэффициенты контрастности. Для обычного текста ориентир уровня AA — не менее 4,5:1. Для крупного текста требования мягче — обычно достаточно 3:1. Уровень AAA строже: для обычного текста нужен коэффициент около 7:1.
Это не означает, что любой сайт обязан сделать весь текст чёрным на белом фоне. Контрастность помогает принимать решение осознанно: где допустим спокойный вторичный оттенок, а где нужен более выразительный цвет.

В графическом редакторе цвет часто выглядит лучше, чем на опубликованном сайте. На восприятие влияют:

• яркость и качество монитора;
• настройки экрана телефона;
• солнечный свет и блики;
• размер текста;
• соседние цвета;
• плотность шрифта;
• изображение или градиент под текстом.

Отдельная проблема — контрастный экран самого дизайнера. На ярком мониторе светло-серый текст может казаться вполне читаемым, а у другого человека он будет почти сливаться с фоном.
Поэтому цвета нужно проверять не только в макете. Посмотрите на опубликованную страницу на телефоне, уменьшите яркость экрана и попробуйте прочитать текст без увеличения.

Основной текст
Для длинных абзацев используйте самый надёжный цвет из палитры — обычно тёмный графит или глубокий оттенок фирменного цвета. Не делайте основной текст светло-серым только ради визуальной лёгкости.
Хороший вариант:
Фон: #F2F4F3
Текст: #171721

Вторичный текст можно сделать светлее, но он всё равно должен оставаться читаемым. Для дат, подписей и пояснений допустима более спокойная иерархия, однако важную информацию нельзя скрывать недостаточным контрастом.

Заголовки
Заголовок может быть контрастнее и крупнее основного текста. Не обязательно использовать чистый чёрный: тёмный синий, графитовый или глубокий зелёный часто лучше поддерживают стиль бренда.
Главное — не жертвовать читаемостью ради необычного оттенка.

Мелкие подписи
Мелкий текст требует особенно внимательной проверки. На нём сильнее заметны проблемы с контрастом, межстрочным интервалом и начертанием.
Если подпись важна для действия — например, объясняет условия оплаты или сообщает об ошибке — её нельзя оформлять как почти незаметную декоративную деталь.

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

• основной фон — спокойный и нейтральный;
• основной текст — самый читаемый тёмный цвет;
• акцент — кнопки, ссылки и важные детали;
• дополнительный фон — мягкие подложки и карточки;
• статусы — ошибка, успех, предупреждение и информация.

Например, яркий зелёный #00FF88 хорошо работает как заливка кнопки с тёмным текстом. Но использовать его как основной цвет небольшого текста на белом фоне не стоит — он будет недостаточно читаемым.
Для текста на светлой поверхности лучше выбрать более тёмный вариант фирменного зелёного, например #006D3A.

Контраст кнопок и ссылок
Кнопка должна быть заметной ещё до того, как человек начал читать весь экран. Проверьте три сочетания:

1. цвет кнопки и цвет текста внутри неё;
2. кнопка и окружающий фон;
3. обычное состояние и состояние при наведении или фокусе.

Не полагайтесь только на цвет. Если ссылка отличается от обычного текста лишь оттенком, её могут не заметить. Добавьте подчёркивание, стрелку, изменение начертания или другой визуальный признак.
Для важных действий можно использовать фирменную зелёную кнопку:
Фон кнопки: #00FF88
Текст: #08080D
Для второстепенного действия подойдёт контурная кнопка с тёмным текстом и заметной границей.

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

• затемняющую или осветляющую подложку;
• градиент поверх изображения;
• отдельную карточку для текста;
• тень или обводку как дополнительную защиту;
• изменение положения текста на спокойную область фотографии.

Тень не должна быть единственным способом улучшить читаемость. Если фон слишком пёстрый, лучше добавить подложку, чем пытаться усилить текст несколькими эффектами.

На телефоне контрастность воспринимается сложнее. Небольшой текст занимает меньше места, а яркий свет экрана снижает заметность тонких оттенков.
Проверьте:

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

Если элемент можно понять только при увеличении страницы, его нужно доработать.

Для быстрой проверки не обязательно открывать сложную дизайн-систему. Достаточно взять цвет текста и цвет фона, вставить их в инструмент проверки контрастности и посмотреть результат.
В конвертере цветов StyleDa можно переводить цвета между HEX, RGB, HSL, HSV и CMYK, а также проверять читаемость сочетаний по WCAG 2.1.
Проверяйте не только основной вариант. Отдельно протестируйте:

• основной текст на фоне;
• вторичный текст на фоне;
• текст кнопки;
• ссылку в абзаце;
• текст на карточке;
• сообщение об ошибке;
• сообщение об успешной отправке.

Использовать один цвет для всех задач
Цвет бренда не обязан одновременно быть фоном, текстом, кнопкой и цветом ошибки. Разделите палитру на роли.

Делать весь вторичный текст светло-серым
Визуальная иерархия не должна превращаться в плохую читаемость. Вторичный текст может быть спокойнее, но не исчезать.

Проверять только HEX-коды
Один и тот же цвет ведёт себя по-разному на разных фонах. Проверяйте именно сочетание текста и поверхности.

Забывать о фокусе и наведении
Интерактивный элемент должен оставаться понятным не только в обычном состоянии. Состояние наведения, фокуса и ошибки тоже входит в интерфейс.

Класть текст на любую фотографию
Сложный фон требует подложки, градиента или отдельной композиции. Не пытайтесь решить проблему одной тенью.

Цветовая система сайта должна помогать пользователю читать, ориентироваться и совершать действия. Поэтому сначала определите роль каждого оттенка, затем проверьте конкретные сочетания и только после этого добавляйте декоративные эффекты.
Не обязательно отказываться от ярких фирменных цветов. Чаще всего достаточно использовать их для акцентов, а для текста подобрать более тёмные версии тех же оттенков.
Проверить цвета и контрастность можно в конвертере цветов StyleDa. А если нужно собрать полноценную цветовую систему для сайта, обсудите задачу с командой StyleDa.