Цветовая компенсация
Это корректировка оттенка, насыщенности или контрастности цвета в зависимости от фона и окружения, чтобы сохранить его читаемость и визуальную роль.
Типографическая компенсация
Это изменение размера, начертания или других параметров текста для сохранения нужного визуального веса и иерархии.
Что в видео-уроке:
В уроке разбираем компенсацию в цвете и тексте. Учимся адаптировать акцентный цвет под разные фоны, сохранять читаемость, правильно распределять жирность между заголовками и наборным текстом и компенсировать визуальный вес капслока.
Один и тот же цвет работает по-разному на разных фонах
Один оттенок может отлично смотреться на тёмном фоне и практически исчезать на светлом. Например, светлый жёлтый хорошо контрастирует с чёрным и работает как акцент, но на белом или светло-сером фоне становится слишком слабым и теряет читаемость.
В такой ситуации не нужно обязательно использовать один и тот же оттенок на всём сайте. На тёмном фоне можно оставить более светлый жёлтый, а для светлых блоков подобрать более тёмный и контрастный вариант того же цвета.
Контраст можно усиливать не только оттенком
Если цветной текст на светлом фоне всё ещё выглядит недостаточно заметно, можно дополнительно увеличить его визуальный вес за счёт начертания. Более жирный текст занимает большую площадь заливки и становится заметнее.
Но такой вариант подходит не всегда. Если весь дизайн построен на тонкой типографике, слишком жирный акцент может выбиваться из общей стилистики. Тогда лучше искать другой способ — например, использовать цветную подложку или отдельный графический приём.
Акцентный приём нужно поддерживать в системе
Если для выделения текста используется цветная подложка или подчёркивание, такой приём лучше повторить и в других местах сайта. Один случайный элемент может выглядеть как ошибка.
То же относится к кнопкам. Если светлый контур плохо читается на белом фоне, можно затемнить цвет, сделать Stroke толще или поменять логику: на тёмном фоне использовать контурную кнопку, а на светлом — залитую.
Цвет нужно подбирать относительно среды
Цвет нельзя оценивать отдельно от фона. Светло-жёлтый оттенок на чёрном и тот же оттенок на белом воспринимаются совершенно по-разному.
Поэтому допустимо использовать несколько вариантов одного фирменного цвета для разных условий. Главное — сохранять общую цветовую логику и достаточный контраст.
Начертание влияет на иерархию не меньше размера
Даже если заголовок значительно крупнее наборного текста, слишком жирный текст может начать перетягивать внимание. Например, если заголовок выполнен в начертании Regular, а основной текст — в Bold, визуальная иерархия начинает разрушаться.
Чтобы вернуть баланс, можно усилить заголовок и одновременно ослабить наборный текст. Тогда пользователь снова сначала считывает заголовок, а затем переходит к описанию.
Размер может компенсировать повышенную жирность
Если по задумке наборный текст должен оставаться достаточно жирным, заголовок можно компенсировать увеличением размера. Крупная типографика начинает занимать большую площадь и возвращает себе визуальное преимущество.
Это не всегда идеальный вариант, но сам принцип важен: если один элемент становится тяжелее, соседний можно уравновесить размером, начертанием или другим параметром.
Капслок делает текст визуально тяжелее
Текст кнопки часто используется в том же размере и начертании, что и обычный наборный текст. Но если перевести его в капслок, визуальный вес увеличивается: все буквы становятся прописными, текст выглядит плотнее и начинает сильнее привлекать внимание.
Из-за этого кнопка может начать конкурировать даже с заголовком, хотя её кегль формально остаётся прежним.
Капслок можно компенсировать уменьшением кегля
В рамках урока используется простой ориентир: если текст кнопки переводится в капслок, его размер можно уменьшить примерно на 2 px.
Например, если обычный текст имеет размер 17 px, для капслока можно попробовать 15 px. Так кнопка возвращается к более спокойному визуальному весу и не нарушает общую иерархию.
Компенсация помогает сохранить чистоту макета
Цвет, размер, жирность и регистр текста всегда нужно оценивать в контексте всей композиции. Один и тот же параметр может работать по-разному в зависимости от фона и соседних элементов.
Если что-то начинает слишком сильно привлекать внимание или, наоборот, теряться, это сигнал проверить визуальный вес и компенсировать его через цвет, начертание, размер или способ оформления.
