Контраст элементов: как заметность влияет на клики

Контраст — это то, насколько элемент выделяется на фоне окружения. Низкий контраст текста и кнопок — одна из самых частых причин «непонятно, куда кликать». В отличие от вкусовщины, контраст можно посчитать и проверить — этим и займёмся.

01Почему контраст важнее цвета

Цвет — субъективная характеристика. Контраст — измеримая. Когда дизайнер делает кнопку «фирменного синего на синем фоне», она становится частью фона, и посетитель её просто не видит. Цвет вроде красивый — заявок нет.

Глаз цепляется за разницу: между светлым и тёмным, между крупным и мелким, между насыщенным и приглушённым. Чем выше разница — тем заметнее элемент. Это и есть рабочая механика «привлечения внимания», без эзотерики про «энергию цвета».

02Как считается коэффициент контраста

Стандарт WCAG задаёт коэффициент контраста — число от 1 до 21, которое показывает разницу в светлоте между двумя цветами. Чёрный на белом — 21:1, серый на сером — около 1.5:1.

Базовые требования WCAG:

• 4.5:1 — минимум для основного текста.
• 3:1 — для крупного текста (от 18 px полужирного или 24 px обычного).
• 3:1 — для интерактивных элементов: кнопок, иконок, индикаторов фокуса.

Это не «доступность ради доступности» — это про то, что текст и кнопки реально читаются: на ярком солнце, на дешёвой матрице, у человека с астигматизмом, при усталости. Подробнее про нормы — в статье «Контрастность для слабовидящих».

03Как проверить контраст на своём сайте

Не нужно считать вручную. Есть встроенные инструменты:

• DevTools в Chrome/Edge: панель Elements → Styles → пипетка у цвета показывает контраст и проходит ли WCAG.
• Lighthouse и axe DevTools — пробегают весь сайт и показывают все элементы с низким контрастом.
• Онлайн-проверки вроде WebAIM Contrast Checker — для быстрых проверок пары цветов.
• Простой ручной тест: переведите макет в чёрно-белый. Если кнопка перестала отличаться от фона — контраста не хватает.

04Где недостаток контраста режет конверсию

Самые частые места, где контраст утекает в ноль:

• Серый текст на белом фоне. Светло-серый «для эстетики» — это +50% к стильности и −X% к понятности.
• Плейсхолдеры в формах. Часто их рисуют светло-серыми, а потом удивляются, что посетитель не понимает, что от него хотят.
• Иконки. Контурные иконки с тонкой линией почти не видны на светлом фоне.
• Кнопки-призраки. Прозрачная кнопка с тонкой обводкой — типичный пример «красиво, но не работает».
• Подписи к графикам и таблицам. Технически они есть, но прочитать невозможно.

05Иерархия через контраст

Контраст — это инструмент не только заметности, но и приоритета. Если на странице три кнопки одного веса, посетитель не понимает, какую нажимать. Сильнее всего работает такая схема:

• Главная кнопка — максимальный контраст, заливка акцентным цветом.
• Вторичная кнопка — обводка или приглушённая заливка.
• Третичная (например, «Подробнее») — текстовая ссылка с подчёркиванием.

Так глаз сразу видит, что приоритет №1. О том, как этот принцип применяется к главной кнопке, есть отдельная статья — «Цвет кнопки CTA: что говорят данные».

06Контраст в первом экране

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

• Заголовок над фоновым изображением — затемните фон или добавьте подложку.
• Главная кнопка — контраст не только с фоном страницы, но и с любым изображением под ней.
• Логотип и навигация — должны быть видны, даже когда поверх hero лежит фотография.

07Контраст на разных устройствах

То, что прекрасно читается на дорогом IPS-мониторе дизайнера, может тонуть на дешёвом ноутбуке или старом смартфоне. Поэтому:

• Проверяйте сайт на разных экранах — хотя бы на двух смартфонах и одном бюджетном ноутбуке.
• Смотрите на сайте под прямым солнцем — это самый жёсткий тест.
• Закладывайте запас по контрасту, а не «впритык к WCAG».

Это часть базовой работы по юзабилити — её мы делаем в составе услуг «Разработка сайтов» и «Дизайн и аналитика».

Официальная документация по теме — Справка Яндекс.Вебмастера.