Контрастность цветов на сайте: как проверить, что дизайн хорошо выглядит не только на вашем экране

В большинстве коммерческих проектов цвета не придумывают прямо в Tilda. Обычно у компании уже есть брендбук, гайдлайн или хотя бы базовая палитра: основной цвет, дополнительные оттенки, цвета текста и фона. Если брендбук сделан хорошо и в нем предусмотрено использование цветов именно в цифровых интерфейсах, вам повезло: значительная часть решений уже принята за вас.

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

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

Что такое контрастность

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

Контраст выражается числом, например:

4.5:1

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

Для обычного текста стандарт WCAG 2.2 уровня AA устанавливает минимум 4.5:1. Для крупного текста допустимо 3:1. Под крупным при этом понимается не любой заголовок, а текст размером от 18 pt либо от 14 pt при жирном начертании, что в CSS примерно соответствует 24 px и 18,7 px.

Tilda в собственной документации по доступности также рекомендует проверять контраст между цветом текста и фоном и ориентируется на требования WCAG. Важно воспринимать эти значения именно как минимальные пороги, а не как идеальные параметры дизайна. Если небольшой тонкий текст едва проходит проверку с результатом 4.5:1, я бы не стремилась сохранить именно это сочетание любой ценой. У шрифтов разная толщина штрихов, а сглаживание на экранах тоже отличается, поэтому формально допустимый текст иногда визуально остается слабым.

Где проверить контрастность цветов

Для проверки не нужно устанавливать специальные программы. Достаточно взять HEX-коды двух цветов и вставить их в любой нормальный contrast checker.

Удобные варианты:

Color Contrast Checker — именно на этот сервис сейчас ссылается документация Tilda.
WebAIM Contrast Checker — простой инструмент, который сразу показывает коэффициент контраста и соответствие основным уровням WCAG.
Coolors Contrast Checker — удобен, если вы одновременно работаете с палитрой и хотите быстро перебирать оттенки.

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

Самая простая схема выглядит так: берете цвет текста, например #555555, берете цвет фона, например #FFFFFF, вставляете их в checker и смотрите коэффициент. Для обычного текста нужен результат не ниже 4.5:1. Если сочетание не проходит проверку, обычно не нужно полностью менять дизайн. Часто достаточно немного затемнить текст или слегка изменить фон.

Брендбук — не индульгенция

Это важный момент, потому что в работе с готовым фирменным стилем часто появляется ложное правило: «этот цвет утвержден брендом, значит менять его нельзя». Сам цвет действительно менять без причины не стоит. Но брендовый цвет и способ его использования — разные вещи.

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

То же самое относится к фирменным светло-голубым, салатовым, оранжевым и пастельным цветам. Цвет может быть частью айдентики и одновременно быть плохим цветом для текста. Если брендбук действительно проработан хорошо, в нем обычно предусмотрены не только фирменные цвета как таковые, но и правила их сочетания, фоновые версии, допустимые цвета текста и варианты применения. Если таких правил нет, сайт все равно нужно проверять как самостоятельный интерфейс.

Если брендбука нет

Когда палитра создается с нуля, я бы вообще не начинала с десяти красивых оттенков. Для базового сайта сначала достаточно определить несколько функциональных цветов: основной фон, дополнительный фон, основной текст, второстепенный текст, основной акцент, цвет кнопок, цвет ссылок, цвет ошибок, цвет успешных действий.

И уже после этого проверить основные пары. Например:

основной текст + основной фон;
второстепенный текст + основной фон;
текст кнопки + фон кнопки;
ссылка + фон;
текст + цветная карточка;
текст + дополнительный фон.

Так намного проще построить устойчивую систему, чем сначала подобрать двадцать оттенков, а потом пытаться понять, где какой использовать.

Почему нельзя доверять только своему монитору

CSS позволяет совершенно точно задать значение цвета. Например:

#E53935

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

Кроме того, сами дисплеи способны воспроизводить разные диапазоны цветов. Большинство обычных экранов поддерживают как минимум диапазон, близкий к sRGB, а часть современных устройств работает и с более широким Display P3. P3 охватывает больше цветов, чем sRGB.

Для обычной работы в Tilda вам не нужно превращаться в специалиста по цветовому менеджменту. Практический вывод гораздо проще: если сочетание работает только потому, что на вашем MacBook два близких оттенка прекрасно различимы, это плохое сочетание.

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

Почему полезно иногда специально ухудшать условия

После проверки коэффициентов я советую сделать еще несколько очень простых вещей. Откройте сайт на телефоне. Уменьшите яркость экрана. Потом увеличьте ее. Если рядом есть другой ноутбук или телефон, откройте страницу и там.

Не нужно добиваться идентичного цвета на всех устройствах — это невозможно и не требуется. Цель другая: убедиться, что важная информация остается хорошо различимой.

Особенно быстро такие тесты обнаруживают проблемы со светло-серым текстом. На хорошем мониторе он может выглядеть аккуратно и дорого, а на другом дисплее внезапно стать почти невидимым. Это одна из причин, почему я бы очень осторожно использовала сочетание трех приемов одновременно: маленький размер текста + тонкое начертание + очень светлый цвет. Каждый из них немного уменьшает визуальный вес текста, а вместе они легко делают его неудобным для чтения.

Основной источник проблем — серый текст

Сам по себе серый цвет абсолютно нормален. Проблема начинается, когда им пытаются решить всю визуальную иерархию сайта. Например: заголовок черный, основной текст темно-серый, подпись чуть светлее, дата еще светлее, дополнительная подпись почти светло-серая.

В дизайнерском макете такая система может выглядеть очень деликатно. Но в какой-то момент «второстепенный» превращается в «плохо читаемый». Если информация нужна пользователю, она должна оставаться читаемой независимо от ее приоритета.

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

Текст на фотографии нужно проверять особенно внимательно

С однотонным фоном все относительно просто. У вас есть конкретный цвет текста и конкретный фон. Фотография так не работает. Допустим, белый заголовок расположен поверх фотографии. Под первой половиной строки находится темный лес, а под второй — светлое небо. Формально у одного текста одновременно несколько разных фонов.

Поэтому бессмысленно определить какой-нибудь «средний цвет фотографии» и проверить контраст против него. Нужно смотреть на наиболее светлый или наиболее проблемный участок непосредственно за буквами.

Если фотография используется как фон hero-блока, надежнее создать для текста более контролируемые условия: добавить затемнение, градиент, цветной overlay или отдельную подложку. Tilda в собственной инструкции по доступности отдельно предупреждает, что текст не должен располагаться на изображении или фоне, с которым он плохо контрастирует.

При этом универсального правила «ставьте черный overlay 50%» не существует. Для одной фотографии хватит 20%, для другой понадобится значительно больше. Проверять нужно итоговый результат.

И обязательно смотрите мобильную версию

На Tilda это особенно важно для обложек и Zero Block. На десктопе текст может находиться слева, где фотография темная. На мобильном композиция меняется, изображение кадрируется иначе, и за тем же текстом внезапно оказывается лицо, окно или яркое небо.

С точки зрения контрастности это уже совершенно другая композиция. Поэтому фраза «на десктопе все проверили» для блоков с фотографиями ничего не гарантирует. Откройте каждый основной адаптив и посмотрите именно на реальное положение текста относительно изображения.

Прозрачность тоже влияет на контраст

Еще одна частая ловушка — взять правильный цвет, а потом сделать его полупрозрачным. Например, дизайнер устанавливает белый текст #FFFFFF, но уменьшает opacity до 50%.

Это уже не тот же белый с точки зрения того, что увидит пользователь. Цвет смешивается с фоном. CSS-цвета могут содержать alpha-канал, и итоговый визуальный цвет определяется их композицией с тем, что находится ниже.

Поэтому отдельно проверяйте текст с opacity, полупрозрачные кнопки, glassmorphism, текст поверх overlay, полупрозрачные карточки и градиенты. Чем больше слоев используется в макете, тем меньше смысла имеет проверка одного исходного HEX-кода вне контекста.

Контраст нужен не только тексту

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

Для значимых нетекстовых элементов WCAG использует порог 3:1 относительно соседних цветов, если этот элемент необходим для понимания содержимого или работы интерфейса. Но из этого не нужно делать противоположное упрощение: не каждая декоративная рамка на сайте обязана иметь 3:1.

Смысл требования в том, чтобы пользователь мог увидеть то, что необходимо ему для взаимодействия. Простой тест: если убрать эту линию или иконку из поля зрения, останется ли понятным, где нажимать и что происходит?

Цвет не должен быть единственным способом передать смысл

Можно идеально пройти все проверки контрастности и все равно получить неудобный интерфейс. Например: зеленый кружок означает «оплачено», красный кружок означает «ошибка». Если больше никаких отличий нет, состояние передается только цветом.

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

Лучше:

✓ Оплачено
× Ошибка

А зеленый и красный уже использовать дополнительно. То же относится к формам. Если поле заполнено неправильно, лучше показать не только красную рамку, но и сообщение вроде «Введите корректный email».

Фирменные красный и зеленый тоже требуют проверки

Очень распространенное заблуждение: яркий цвет автоматически хорошо заметен. Не автоматически. Некоторые очень насыщенные желтые, зеленые, салатовые или оранжевые оттенки дают плохой контраст со светлым фоном, хотя субъективно выглядят «яркими».

Поэтому цвет лучше оценивать не по насыщенности, а в конкретной паре. Один и тот же фирменный цвет может отлично работать как фон кнопки с черным текстом и совершенно не работать как текст ссылки на белом фоне.

Не существует «доступного цвета» самого по себе. Есть доступная или недоступная комбинация цветов.

Проверяйте кнопки не только в обычном состоянии

Предположим, у вас черная кнопка с белым текстом. Все отлично. При наведении вы сделали фон светло-серым, а текст оставили белым. Теперь именно на hover кнопка стала практически нечитаемой.

Поэтому у интерактивных элементов нужно проверить все состояния, которые реально используются: обычное, hover, focus, active, disabled. Особенно не забывайте о focus. Откройте опубликованную страницу и несколько раз нажмите Tab. Должно быть понятно, какой интерактивный элемент сейчас выбран.

Отдельно проверяйте формы

У формы на самом деле гораздо больше цветовых сочетаний, чем кажется. Нужно посмотреть название поля, вводимый текст, placeholder, границу поля, ошибку, чекбокс, текст рядом с чекбоксом, кнопку и focus-состояние.

Placeholder тоже относится к тексту и должен оставаться читаемым. Требования к минимальному контрасту распространяются и на него.

Одна из самых частых ошибок минималистичных форм — белый фон, почти белая рамка и очень светлый placeholder. Пока форма пустая, она выглядит аккуратно. Когда человек начинает ей пользоваться, оказывается, что половину интерфейса приходится искать глазами.

Черный текст не обязан быть абсолютно черным

После всего сказанного не нужно делать противоположный вывод и превращать сайт в сочетание #000000 и #FFFFFF. Темно-серые оттенки прекрасно работают как основной текст.

Например, цвета в районе #111111, #222222 или #333333 на светлом фоне обычно дают очень высокий контраст, оставаясь визуально мягче абсолютного черного. То же касается фона. Сайт не обязан быть идеально белым. Можно использовать теплый молочный, холодный сероватый или другой светлый оттенок. Просто проверяйте конкретные комбинации.

Быстрый алгоритм работы с цветами на сайте

Если у вас хороший брендбук, сначала возьмите предусмотренные им цвета и правила сочетаний. Затем проверьте реальные комбинации, используемые на сайте. Если брендбук есть, но он описывает преимущественно полиграфию, логотип и фирменную айдентику, не предполагайте автоматически, что все комбинации подходят для интерфейса. Если брендбука нет, сначала соберите небольшую функциональную палитру, а не десятки случайных оттенков.

После этого:

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

И только после этого имеет смысл заниматься совсем мелкими оттеночными корректировками.

Чек-лист перед публикацией

Основной текст должен иметь контраст не ниже 4.5:1.
Для действительно крупного текста допустимо 3:1.
Мелкий серый текст должен оставаться читаемым, а не просто красиво выглядеть на вашем мониторе.
Текст поверх фотографий нужно проверять на всех основных разрешениях.
Цвет кнопок проверяется вместе с цветом текста, а не отдельно.
Hover и focus не должны ухудшать читаемость.
Поля формы должны визуально определяться.
Placeholder и поясняющие подписи должны оставаться читаемыми.
Ошибка не должна обозначаться только красным цветом.
Успешное действие не должно обозначаться только зеленым.
Информация не должна теряться, если пользователь различает цвета иначе.
Основные сочетания нужно прогнать через contrast checker.
Страницу стоит открыть на другом устройстве — не чтобы сравнивать, одинаковый ли получился оттенок красного, а чтобы убедиться, что дизайн остается понятным и читаемым.

Цвет в веб-дизайне — это не только вопрос вкуса. Хороший брендбук значительно упрощает работу, но даже он не отменяет проверки конкретного интерфейса. А если цветовую систему приходится создавать самостоятельно, проверки помогают не гадать, выглядит ли сочетание «достаточно контрастно», а опираться на объективный критерий.

Самая полезная привычка здесь очень простая: если вы хотя бы на секунду подумали «наверное, видно нормально», не гадайте. Скопируйте два HEX-кода и проверьте их. Это занимает меньше минуты и часто спасает от цвета, который прекрасно выглядит в макете и плохо работает на настоящем сайте.