Есть простой опыт, который делают на первом занятии в любой художественной школе. Один и тот же серый квадрат кладут на белый лист и на чёрный. На белом он кажется тёмным, почти графитовым. На чёрном светлеет до пепельного. Краска одна, восприятие разное. Именно на этом свойстве нашего зрения держится принцип контраста, один из базовых законов дизайна, композиции и вообще любого визуального сообщения.
В этой статье разобрали, что такое контраст простыми словами, почему мозг реагирует на него быстрее, чем вы успеваете подумать, какие бывают виды контраста и как их применять в постере, интерфейсе, презентации и тексте. Собрали сравнительную таблицу семи видов, чек-лист проверки макета и ту самую цифру из международного стандарта, которая заканчивает споры «читается или нет».
Если вы только начинаете разбираться с цветом, полезно сначала заглянуть в наш разбор цветового круга Иттена: там основа, на которую опирается половина всего, что будет ниже.
Незнакомые слова по ходу текста мы расшифровываем сразу, но если нужен справочник под рукой, у нас есть словарь графического дизайнера с понятными объяснениями терминов.
Статья пригодится не только дизайнерам. Контраст одинаково нужен маркетологу, который собирает карточку товара, менеджеру со слайдами для инвесторов, автору блога и фотографу. Специальных знаний для чтения не нужно.
А если захочется освоить ремесло системно, загляните в нашу подборку курсов по дизайну: там больше тысячи программ, от коротких интенсивов до годовых профессий.
CheckroiПодборка курсов дизайна1002 курса • 62 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Что такое принцип контраста простыми словами
Контраст в дизайне — это заметная разница между двумя элементами по какому-то одному признаку: цвету, размеру, форме, толщине линии, количеству пустого места вокруг. Принцип контраста говорит, что человек оценивает эту разницу всегда в сравнении с соседями по макету. Тот самый серый квадрат из начала статьи физически не меняется, меняется его окружение.
Из этого следует практический вывод. Элемент становится контрастным за счёт соседства. Собственная яркость тут вторична. Красная кнопка на пёстром коллаже пропадёт, а та же кнопка на спокойном сером фоне будет тянуть взгляд с другого конца экрана. Поэтому вопрос «какой цвет сделать у кнопки» почти всегда неправильный. Правильный: «на чём эта кнопка будет лежать».
Второе следствие важнее первого. Контраст работает только тогда, когда контрастных элементов мало. Если в макете выделено всё, не выделено ничего: глазу не за что зацепиться, и он скользит по поверхности. Это самая частая беда любительских презентаций, где каждый заголовок жирный, красный и с тенью.
Короткое определение для памяти. Контраст — это управляемая разница. Управляемая означает, что вы решаете, какой элемент главный, и сознательно приглушаете остальные.
Почему мозг так реагирует на контраст
У этой реакции есть физиологическое объяснение. В сетчатке глаза работает механизм под названием латеральное торможение (соседние нервные клетки подавляют активность друг друга). Из-за него граница между светлым и тёмным участком усиливается ещё до того, как сигнал доходит до мозга. Зрение эволюционно заточено искать границы: край, силуэт, движение. Ровные заливки нам скучны, переходы притягивают.
На уровне психологии тот же эффект описал социальный психолог Роберт Чалдини в книге «Психология влияния». Его классическая иллюстрация: одну руку держат в холодной воде, другую в горячей, потом обе опускают в тёплую. Одна и та же вода одной руке кажется горячей, другой прохладной. Ощущение строится от точки отсчёта.
В продажах на этом стоит приём, который называют эффектом якоря: первое число, которое человек увидел, становится линейкой для всех следующих. Сначала показывают тариф за 120 000 ₽, потом за 40 000 ₽, и второй воспринимается как выгодный, хотя сам по себе он не дешёвый. Дизайнер делает ровно то же самое, только не с ценой, а с размером шрифта: заголовок в 48 пунктов задаёт масштаб, на фоне которого подзаголовок в 24 выглядит спокойным и второстепенным.
Практический смысл простой. Вы всегда сравниваете элемент с тем, что лежит рядом. Идеал в голове тут ни при чём. Поэтому смотреть на макет стоит целиком, а не приближать один фрагмент и доводить его до совершенства.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяЗачем контраст нужен в работе
Контраст решает три задачи, и все три работают на читателя.
Строит визуальную иерархию. Иерархия задаёт порядок, в котором человек считывает элементы: сначала главное, потом второстепенное, потом мелочи. Разница в кегле (размере шрифта), весе и цвете говорит глазу, что читать первым. Без иерархии страница превращается в однородное полотно, и читатель уходит.
Создаёт фокусную точку. Это место, куда взгляд попадает в первую долю секунды. В интерфейсе фокусной точкой обычно делают целевое действие: кнопку «Купить», поле поиска, форму заявки. В постере эту роль играет главный образ или ключевое слово.
Ускоряет чтение и снижает усталость. Достаточная разница между текстом и фоном экономит читателю силы: читабельность растёт, буквы распознаются быстрее, глаз меньше напрягается. Это особенно заметно на длинных текстах и на мобильном экране под уличным солнцем.
Отсюда рабочее правило: в любом макете должен быть один герой. Один заголовок, одна кнопка, одна картинка, которая тянет внимание. Всё остальное поддерживает героя и сознательно отступает на шаг назад.
CheckroiПодборка курсов по графическому дизайну227 курсов • 43 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Семь видов контраста и когда какой брать
Контраст создаётся не только цветом, хотя новички почти всегда начинают и заканчивают именно им. Ниже семь рабочих видов: сначала общая таблица, потом разбор каждого.
| Вид контраста | Чем создаётся | Где особенно работает | Типичная ошибка |
|---|---|---|---|
| Тональный | Разница в светлоте: светлое против тёмного | Текст на фоне, фото, логотип | Полутон на полутоне, «мутный» макет |
| Цветовой | Разные цвета: тёплый и холодный, дополнительные пары | Реклама, упаковка, иллюстрация | Пять ярких цветов в равных долях |
| Размерный | Разница в масштабе элементов | Заголовки, цифры, обложки | Разница в пару пунктов, которую не видно |
| Формы | Круглое против углового, простое против сложного | Иконки, композиция, логотип | Все элементы одной геометрии |
| Фактуры | Гладкое против шершавого, глянец против матового | Упаковка, полиграфия, 3D | Фактура поверх мелкого текста |
| Пространства | Плотный блок против пустоты вокруг | Лендинг, презентация, журнал | Равные отступы у всего подряд |
| Направления | Горизонталь против вертикали или диагонали | Плакат, обложка, инфографика | Диагональ ради диагонали |
Тональный контраст
Тон — это светлота элемента без учёта цвета, то, каким он станет на чёрно-белой фотографии. Тональный контраст самый сильный и самый надёжный: он работает даже у людей с нарушением цветовосприятия и на плохом экране. В пределе это силуэт: чёрная фигура на светлом небе читается мгновенно, хотя внутри нет ни одной детали.
Проверяется он за три секунды: сделайте макет чёрно-белым. Если структура развалилась и всё слилось в кашу, значит, вы держались на одном цвете, и этого мало.
Цветовой контраст
Здесь пригодится теория цвета. Иоханнес Иттен, преподаватель Баухауса, описал семь типов цветовых контрастов, и три из них новичку стоит освоить в первую очередь.
- Контраст холодного и тёплого. Синие и зелёные оттенки против оранжевых и красных. Самый простой способ оживить сдержанную палитру одним акцентом.
- Контраст дополнительных цветов. Это цвета напротив друг друга на цветовом круге (синий и оранжевый, красный и зелёный). Пара получается звонкой, но требует разных долей: один цвет основной, второй в небольшом количестве. Смежный приём: контраст по насыщенности, когда рядом ставят один и тот же цвет в чистом и приглушённом виде.
- Контраст по площади. Маленькое пятно яркого цвета на большом спокойном поле бьёт сильнее, чем половина макета того же цвета.
Есть ещё симультанный контраст, когда глаз сам достраивает соседнему цвету оттенок, которого в нём нет: серый рядом с красным начинает отдавать в зелень. Полный разбор всех семи типов мы делали в материале про круг Иттена.
Контраст размера
Самый понятный вид и самый недооценённый. Работает он только на больших разницах: 16 и 18 пунктов глаз считает одинаковыми, 16 и 32 читает как два уровня иерархии. Хорошее стартовое правило для заголовков: удваивать кегль относительно основного текста.
Контраст формы
Круглая иконка среди прямоугольных карточек, скруглённая кнопка в строгой сетке, рукописная надпись поверх геометрической плашки. Форма выделяет тише цвета, поэтому хорошо работает там, где палитра уже занята брендом и трогать её нельзя.
Контраст фактуры
Фактура передаёт ощущение поверхности: шершавая бумага, зерно плёнки, глянцевое лаковое пятно на матовой упаковке. В печати это чувствуется рукой, на экране передаётся текстурой и светом. Главное ограничение: под мелким текстом фактура превращается в помеху.
Контраст пространства
Негативное пространство (пустое место вокруг элемента, дизайнеры называют его воздухом) само по себе становится инструментом. Плотный блок текста и широкое поле пустоты рядом дают разницу не хуже цветовой. Именно так устроены дорогие журнальные развороты и первые экраны хороших лендингов: мало элементов, много воздуха, один герой.
Совет для первого макета. Если не понимаете, чего не хватает, попробуйте убирать вместо того, чтобы добавлять. Уберите половину элементов и увеличьте отступы вокруг главного: контраст пространства появится сам.
Контраст направления
Строгая вертикальная вёрстка и одна диагональная линия. Ряд горизонтальных строк и поставленное на бок слово. Приём заметный, поэтому в интерфейсах его используют редко, а в плакатах и обложках он живёт постоянно. Кстати, о том, как макет превращается в работающую страницу, у нас есть отдельный разбор: что такое вёрстка.
Контраст в тексте и шрифтах
В типографике (искусстве оформления текста) контраст решает ту же задачу: показать, где заголовок, где подпись, где сноска. Строится он на четырёх параметрах: размере, начертании (насколько шрифт жирный), регистре и цвете.
Главное правило сочетаний звучит так: пропускайте одно начертание. Тонкое рядом с полужирным даёт видимую разницу, обычное рядом с полужирным выглядит случайностью. И отдельный запрет: длинные абзацы капслоком читаются медленнее строчных, для основного текста заглавные не годятся.
Шрифтовой парой называют сочетание двух шрифтов в одном макете. Классика для новичка: антиква (шрифт с засечками, маленькими штрихами на концах букв) в заголовке и гротеск (шрифт без засечек) в тексте, или наоборот. Разница здесь сразу видна, а значит, пара сработает. Ошибка обратная: два похожих гротеска рядом читаются как один шрифт с опечаткой. Если тема шрифтов затянет, почитайте, кто такой типограф и почему под одним словом прячутся три профессии.
Тот же принцип работает и в самом тексте, без всякой графики. Приём противопоставления называется антитезой: «Война и мир», «друг поддержит, враг предаст». Длинная фраза, за ней короткая. Сложная мысль, за ней простой вывод. Контраст в тексте задаёт ритм ровно так же, как контраст размеров собирает композицию.
Контраст и доступность: цифра, которая заканчивает споры
Вкусовые споры «мне кажется, читается» решаются измерением. Международный стандарт WCAG (свод правил доступности сайтов от консорциума W3C) вводит коэффициент контрастности: отношение светлоты двух цветов от 1:1 (текст не виден вовсе) до 21:1 (чёрное на белом).
- 4,5:1 — минимум для обычного текста, уровень AA по WCAG. Это базовое требование, на которое ориентируются почти все продуктовые команды.
- 3:1 — минимум для крупного текста (примерно от 24 пунктов или от 19 пунктов полужирного), а также для иконок и границ полей.
- 7:1 — повышенный уровень AAA для длинных текстов и тех случаев, когда читателю важна максимальная лёгкость чтения.
Проверить пару цветов можно бесплатными онлайн-контраст-чекерами: вводите два кода цвета и получаете число с вердиктом AA или AAA. В Figma та же проверка живёт в плагинах, а как устроен сам редактор, мы разбирали в инструкции по Figma.
CheckroiПодборка курсов по Figma362 курса • 49 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Ещё одно правило доступности, о котором новички узнают поздно: цвет не должен быть единственным носителем смысла. Примерно 8 % мужчин плохо различают цвета (это и есть дальтонизм), и для них красная и зелёная подсветка поля в форме выглядит одинаково. Поэтому к цвету всегда добавляют второй сигнал: значок, подпись, рамку. Кому эта тема близка профессионально, стоит посмотреть, чем занимается юзабилити-специалист.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналКонтраст и нюанс: где проходит граница
У контраста есть противоположность: нюанс, то есть еле уловимая разница между элементами. Оттенки одного цвета, близкие размеры, мягкие переходы. Нюансная композиция выглядит спокойной, дорогой и сдержанной, но плохо ведёт взгляд.
Выбор между ними зависит от задачи. Нужно, чтобы человек за секунду нашёл кнопку и нажал: берите контраст. Нужна атмосфера, воздух и ощущение премиальности: нюанс, но с одной контрастной точкой, иначе макет станет невнятным.
Опасная зона посередине. Разница есть, но её недостаточно, чтобы прочитаться как приём, и слишком много, чтобы выглядеть цельно. Отсюда и берётся ощущение «что-то не так, а что именно, непонятно». Лечится это радикально: либо усилить разницу вдвое, либо убрать её совсем.
Как применять контраст в трёх типичных задачах
Теория складывается быстрее, когда её видно на конкретной работе. Разберём три ситуации, с которыми сталкивается почти каждый: карточка товара, слайд презентации и первый экран лендинга.
Карточка товара на маркетплейсе
Здесь всё решается за долю секунды в ленте среди сотни таких же карточек. Работают два вида контраста: тональный и по площади. Товар должен быть заметно светлее или темнее фона, а яркий цвет стоит оставить одному элементу: плашке со скидкой или ключевой выгоде. Текст на карточке даём крупно и коротко, потому что смотреть будут с телефона, где вся карточка помещается в пару сантиметров.
Слайд презентации
Слайд чаще всего портит желание уместить на него всё. Возьмите одну мысль на экран и постройте контраст размера: главная цифра или вывод крупно, пояснение вдвое мельче, источник мелко и серым. Если в зале проектор, тональный контраст придётся усилить: проекция съедает половину разницы, и светло-серый текст, красивый на мониторе, на стене исчезнет.
Первый экран лендинга
Тут в дело вступает контраст пространства. Заголовок, короткий подзаголовок, одна кнопка и много воздуха вокруг работают лучше плотного коллажа из преимуществ. Кнопка целевого действия получает единственный акцентный цвет на экране, и этот цвет больше нигде не повторяется. Полезно вспомнить и правило третей: сетка три на три, ключевой элемент ставим на пересечение линий, центр для этого подходит хуже.
Пять ошибок новичка
Ошибка 1: выделять всё сразу
Жирный шрифт, красный цвет, крупный кегль и рамка на каждом блоке. В итоге ни один элемент не выигрывает. Лечится вопросом «что здесь главное» и честным ответом в одну строку.
Ошибка 2: тень вместо контраста
Светлый текст плохо читается на светлом фото, и под него подкладывают тень. Читаемость от этого почти не растёт, а макет становится грязным. Рабочее решение: затемнить саму фотографию полупрозрачной плашкой или увести текст на спокойный участок кадра.
Ошибка 3: чистый чёрный на чистом белом
Коэффициент 21:1 звучит идеально, но на светящемся экране такая пара утомляет глаза при длинном чтении. Большинство изданий берёт очень тёмный серый на почти белом: контраст остаётся выше 4,5:1, а читать комфортнее.
Ошибка 4: контраст ради контраста
Диагональная надпись, неоновая палитра и четыре шрифта в визитке бухгалтерской фирмы. Приём должен решать задачу сообщения, иначе он работает против него и повышает когнитивную нагрузку (усилия, которые читатель тратит на понимание).
Ошибка 5: проверять макет только на своём мониторе
Хороший экран прощает слабый контраст, дешёвый и солнце на улице не прощают ничего. Смотрите работу на телефоне, при дневном свете и в чёрно-белом виде.
Чек-лист: как проверить свой макет за пять минут
- Прищур-тест. Прищурьтесь и посмотрите на работу. Первым должно проступить то, что вы считаете главным. Если проступает случайная картинка, иерархия сломана.
- Чёрно-белый тест. Обесцветьте макет. Структура обязана сохраниться, иначе вы держитесь на одном цвете.
- Замер контрастности. Прогоните основные пары «текст плюс фон» через контраст-чекер: не ниже 4,5:1 для обычного текста и 3:1 для крупного.
- Тест на дальтонизм. Убедитесь, что смысл читается без цвета: у каждого цветового сигнала есть значок или подпись.
- Тест пяти секунд. Покажите макет человеку со стороны на пять секунд и спросите, что он запомнил. Названное первым и есть ваша фокусная точка.
Что делать, если тест провален. Начните с тонального контраста и пространства: сделайте главный элемент заметно светлее или темнее окружения и дайте ему воздуха. Эти два шага чинят большинство слабых макетов без правки палитры.
Где научиться работать с контрастом
Быстрее всего контраст осваивается с обратной связью. Можно годами читать статьи и всё равно делать «мутные» макеты: чужим глазом ошибка видна сразу, своим почти никогда. На курсах композицию и работу с цветом разбирают на ваших собственных работах, и это экономит месяцы самостоятельных попыток.
Если идёте в тему с нуля, обучение дизайну с нуля обычно начинают с базовой программы по графическому дизайну: там композиция, цвет и типографика идут первым блоком. Дальше выбор зависит от задач: курсы веб-дизайна учат собирать сайты и лендинги, а курсы UX/UI-дизайна добавляют работу с интерфейсами, где к контрасту предъявляют самые строгие требования по доступности.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Нейросети для изображений и видео Перейти на сайт курса |  Эдюсон | 47 504 ₽ | 3958 ₽/мес. | 2 месяца | Обзор курса |
| Нейросети. Практический курс Перейти на сайт курса |  Skillbox | 74 900 ₽ | 6242 ₽/мес. | 3 месяца | Обзор курса |
| Профессия «Дизайнер интерьеров» Перейти на сайт курса | Skillbox | 207 518 ₽ | 6898 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «UX/UI-дизайнер» Перейти на сайт курса |  GeekBrains | 131 709 ₽ | 5700 ₽/мес. | 12 месяцев | Обзор курса |
| Дизайн среды Перейти на сайт курса |  Нетология | 199 300 ₽ | 8459 ₽/мес. | 17 месяцев | Обзор курса |
| Профессия «Motion-дизайнер» Перейти на сайт курса | Skillbox | 149 885 ₽ | 5500 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «Веб-дизайнер» Перейти на сайт курса | Skillbox | 181 582 ₽ | 7387 ₽/мес. | 12 месяцев | Обзор курса |
| Профессия «UX/UI-дизайнер с нуля до PRO» Перейти на сайт курса |  Contented | 179 604 ₽ | 4989 ₽/мес. | 15 месяцев | Обзор курса |
| Профессия «Графический дизайнер: расширенный курс» Перейти на сайт курса | Нетология | 160 400 ₽ | 7496 ₽/мес. | 17 месяцев | Обзор курса |
| Профессия Бренд-дизайнер Перейти на сайт курса | Skillbox | 143 280 ₽ | 4622 ₽/мес. | 24 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по дизайну
Если пока хочется разобраться самостоятельно, посмотрите нашу подборку книг для начинающих дизайнеров: половина классики по композиции построена как раз вокруг контраста. А если присматриваетесь к профессии всерьёз, загляните в обзор профессии: чем занимается графический дизайнер и сколько он зарабатывает.
