Чтобы подобрать контрастные цвета для текста и фона, выберите пару в макете и проверьте её специальным инструментом по требованиям WCAG. Оценивайте не только основной текст, но и ссылки, подписи, кнопки и состояния элементов. Если проверка не пройдена, измените оттенок текста или фона и повторите тест на реальном размере шрифта.
Контрастная пара: ориентиры перед подбором
- Сначала задайте цвет фона, затем подбирайте к нему цвет текста и проверяйте их вместе.
- Оценивайте контраст по фактическим цветам макета, а не по названиям оттенков или впечатлению на экране.
- Учитывайте размер и начертание шрифта: требования к обычному и крупному тексту различаются.
- Не полагайтесь только на цвет для передачи смысла: добавьте подпись, значок или другое различимое обозначение.
С чего начать подбор цвета текста и фона
Этот подход подходит для оформления сайта, приложения, презентации или макета, где текст должен оставаться читаемым на выбранном фоне. Он особенно полезен при настройке типографики, кнопок и ссылок до публикации.
Не подбирайте сочетание только по скриншоту, если цвета меняются в зависимости от изображения, прозрачности, темы или состояния элемента. В таких случаях проверяйте каждый вариант отдельно. Не считайте палитру, автоматически предложенную генератором, готовой к использованию без проверки.
Как соотнести контраст с размером и начертанием шрифта
Перед проверкой подготовьте значения цветов в формате HEX или RGB, макет либо страницу и сведения о шрифте. Для оценки подойдут инструменты, которые рассчитывают контрастность цветов онлайн и показывают результат относительно критериев WCAG.
Порог для обычного текста строже, чем для крупного. При оценке учитывайте реальный размер и начертание: тонкий шрифт может восприниматься хуже, чем более плотный при тех же цветах. Не ориентируйтесь только на увеличение текста в графическом редакторе - проверьте его в том размере, в котором он появится на странице.
Таблица сочетаний: какие пары проходят проверку
Таблица помогает сравнить подходы, но не заменяет расчёт конкретных оттенков. Даже близкие цвета могут давать разный результат, поэтому проверяйте точные значения, выбранные в макете.
| Сочетание или подход | Когда рассматривать | Что проверить |
|---|---|---|
| Тёмный текст на светлом фоне | Для основного текста и длинных блоков | Точный оттенок фона, размер шрифта и результат проверки |
| Светлый текст на тёмном фоне | Для тёмной темы, акцентов или отдельных секций | Не теряются ли тонкие начертания и мелкие подписи |
| Цветной текст на нейтральном фоне | Для ссылок, выделений и элементов фирменного стиля | Контраст конкретного цвета текста с фоном, включая состояния |
| Цветной фон с текстом | Для кнопок, карточек и плашек | Сочетание в каждом состоянии компонента и наличие других признаков действия |
- Зафиксируйте пару. Возьмите точные коды цвета текста и фона из макета, а не приблизительные значения с изображения.
- Проверьте сочетание. Введите оба цвета в инструмент для проверки контрастности. Сравните результат с подходящим критерием WCAG для типа и размера текста.
- Сверьте роль элемента. Отдельно рассмотрите основной текст, крупные заголовки, ссылки, подписи и текст на кнопках. У разных элементов могут отличаться размер и начертание.
- Проверьте в контексте. Посмотрите пару в макете или браузере при обычном масштабе, а также в предусмотренных темах и состояниях.
- Запишите итоговые цвета. Сохраните проверенные значения в палитре проекта, чтобы при дальнейших правках случайно не заменить их похожими, но непроверенными оттенками.
Быстрый режим
- Возьмите точные цвета текста и фона.
- Проверьте пару в инструменте с оценкой по WCAG.
- Если проверка не пройдена, измените один из цветов и повторите её.
- Убедитесь, что ссылки, кнопки и подписи тоже различимы.
Подбор цветовых сочетаний онлайн и генератор цветовой палитры для сайта ускоряют поиск вариантов, но не подтверждают доступность сами по себе. Используйте их для чернового выбора, а итог принимайте после проверки конкретной пары.
Как измерить контраст и свериться с требованиями WCAG
Проверка контрастности цветов онлайн удобна для первичной оценки: укажите цвет текста и цвет фона, затем сверьте результат с критерием WCAG, который соответствует типу текста. Перед публикацией пройдите список:
- Проверены точные значения цветов, используемые в интерфейсе.
- Для проверки выбрана категория, соответствующая размеру и начертанию текста.
- Основной текст и заголовки проверены отдельно, если они оформлены по-разному.
- Проверены ссылки, подписи, текст кнопок и другие важные надписи.
- Учтены состояния элементов: например, наведение, фокус и недоступность, если они предусмотрены.
- Для прозрачных элементов учтён итоговый цвет после наложения на фон.
- Результат проверен в реальном макете или браузере, а не только в окне инструмента.
- Смысл не передаётся только цветом: для важных различий есть текстовое обозначение или иной визуальный признак.
Что проверить в макете помимо основного текста
Распространённая ошибка - проверить только абзацы и пропустить остальные части интерфейса. Перед сдачей макета проверьте:
- Мелкие подписи, подсказки, метки и текст в полях.
- Ссылки в обычном состоянии и при взаимодействии с ними; ссылка должна отличаться не только цветом, если это важно для её обнаружения.
- Текст и значимые графические элементы на кнопках, карточках и цветных плашках.
- Цвета в светлой и тёмной темах, если обе предусмотрены.
- Сочетания поверх фотографий, градиентов и полупрозрачных слоёв: фоновая область может меняться.
- Состояния фокуса и выделения, чтобы важные элементы оставались заметными.
- Соседние цвета, которые обозначают разные категории или статус: одного различия оттенков может быть недостаточно.
Как исправить сочетание, если контраста недостаточно
- Изменить цвет текста. Сделайте его светлее или темнее в зависимости от фона, затем повторно проверьте пару. Это удобно, когда фон закреплён фирменным стилем.
- Изменить фон. Подберите более подходящий оттенок, если важно сохранить цвет текста или его начертание.
- Усилить начертание или увеличить текст. Такой вариант уместен, если дизайн допускает изменение типографики; после правки снова проверьте соответствующий критерий.
- Добавить отдельную подложку. Разместите текст на однотонной области, если фон сложный или меняется. Проверьте контраст уже с этой подложкой.
После любой правки перепроверьте итоговую пару и остальные состояния элемента. Не считайте сочетание подходящим только потому, что оно выглядит контрастным на одном экране.
Нюансы проверки цветовых сочетаний
Можно ли оценить контраст на глаз?
Визуальная оценка полезна для первичного отбора, но не заменяет расчёт. Проверьте точные значения цветов в инструменте с поддержкой критериев WCAG.
Подходит ли автоматически созданная палитра для сайта?
Палитра помогает найти варианты, но каждый цвет текста нужно проверить с тем фоном, на котором он будет использован. Отдельно проверьте кнопки, ссылки и состояния элементов.
Нужно ли проверять крупные заголовки отдельно?
Да, учитывайте размер и начертание каждого текста. Для категорий обычного и крупного текста критерии контрастности различаются.
Достаточно ли подчеркнуть ссылку цветом?
Не всегда. Если цвет может быть трудно различим, добавьте дополнительное обозначение, например подчёркивание, чтобы ссылка не определялась только по оттенку.
Как проверять текст поверх фотографии?
Проверяйте контраст на всех участках изображения, за которыми может оказаться текст. Если фон меняется, используйте однотонную подложку или другой способ стабилизировать читаемость.
Нужно ли повторять проверку после смены темы?
Да. В светлой и тёмной темах меняются фон и иногда цвет текста, поэтому каждую пару следует оценить отдельно.
Почему два похожих оттенка дают разный результат?
На контраст влияет конкретное значение цвета, а не его название или визуальное сходство с другим оттенком. Проверяйте коды цветов, фактически указанные в макете.
Автор: Дмитрий Кузнецов