Цвета лендинга проверяют коэффициентом контраста между текстом и фоном: для обычного текста нужно не меньше 4,5:1, для крупного текста, кнопок и рамок полей - 3:1. Введите оба цвета в WebAIM Contrast Checker или откройте инструменты разработчика в браузере: оба способа бесплатные и показывают коэффициент за секунды. Проверка всей страницы из десятка пар текст-фон занимает около пяти минут.
Почему аккуратный макет может не читаться
Когда выбирают цвета для сайта, спорят обычно о вкусе: какой цвет поставить главным, синий или зелёный, тёплый или холодный. Заявки при этом теряются не на вкусе, а на контрасте цветов. Светло-серый текст на белом фоне, белая надпись поверх светлой фотографии, бледная подпись у кнопки: на мониторе дизайнера всё это выглядит стильно, а на телефоне под солнцем текста просто нет.
Читаемость проверяется не на глаз, а цифрой. Есть формула контраста, есть минимальные значения, ниже которых опускаться нельзя, и есть бесплатные инструменты, которые посчитают всё сами. Проверка целого лендинга занимает около пяти минут.
Разберём по порядку: как считается контраст, какие значения проходные и чем проверить страницу, не покупая никаких программ.
Что такое коэффициент контраста
Контраст пары цветов измеряют коэффициентом от 1:1 до 21:1. Чёрный текст на белом фоне даёт максимум, 21:1. Белый на белом даёт 1:1: текст полностью сливается с фоном. Все остальные сочетания лежат между этими точками. Порог читаемости 4,5:1 на глаз выглядит как уверенный тёмно-серый на белом.
Формула сравнивает яркость цветов, поэтому оттенок сам по себе роли не играет. Тёмно-синий на белом читается, голубой на белом нет, хотя оба синие. По той же причине пара красного и зелёного может пройти проверку по яркости и остаться неразличимой для людей с нарушением цветовосприятия, а это примерно каждый двенадцатый мужчина.
Пороговые значения описаны в стандарте доступности WCAG. На него опираются браузеры и все инструменты проверки. Запоминать аббревиатуру незачем, хватит двух цифр из следующего раздела.
Сколько нужно контраста для текста и кнопок?
Базовых порогов два. Обычный текст должен давать к своему фону не меньше 4,5:1. Крупный текст, от 24 пикселей или жирный от 19, может опускаться до 3:1. Такой же порог 3:1 действует для кнопок, иконок и рамок полей формы.
| Элемент | Минимальный контраст | Комментарий |
|---|---|---|
| Основной текст | 4,5:1 | абзацы, списки, подписи к полям |
| Крупный текст от 24 px | 3:1 | заголовки экранов и секций |
| Жирный текст от 19 px | 3:1 | подзаголовки и акценты |
| Текст на кнопке | 4,5:1 | считается к заливке кнопки |
| Заливка кнопки, иконки, рамки полей | 3:1 | считается к фону страницы |
| Плейсхолдер в поле формы | 4,5:1 | про него забывают чаще всего |
Есть и строгий уровень 7:1. Для лендинга он не обязателен, но полезен как ориентир для основного текста, если ваша аудитория заметно старше среднего.
Цифры легко примерить на живых примерах. Популярный светло-серый #999999 на белом даёт примерно 2,8:1, это заметно ниже нормы. Серый #767676 даёт 4,5:1 и проходит впритык. Тёмно-серый #595959 даёт около 7:1 и выглядит на странице так же спокойно, только его видно.
Чем бесплатно проверить контраст цветов?
Считать формулу руками не нужно. Ниже два способа, которых хватает и на этапе макета, и на живой странице.
WebAIM Contrast Checker
Страница webaim.org/resources/contrastchecker. Вводите два цвета в шестнадцатеричном виде, например 767676 и FFFFFF, и сразу видите коэффициент с вердиктом: проходит обычный текст или только крупный. Коды цветов берите из макета или пипеткой из любого графического редактора.
Там же есть ползунки яркости: двигаете цвет, пока пара не пройдёт порог, и забираете исправленный код. Удобно, когда нужно не констатировать проблему, а быстро подобрать замену. Если дизайнер прислал макет на согласование, прогоните основные пары цветов до того, как сказать "нравится".
Инструменты разработчика в браузере
В Chrome и Яндекс Браузере проверка встроена. Правый клик по тексту, пункт "Посмотреть код", затем щелчок по цветному квадратику рядом со значением цвета в панели стилей. Откроется палитра, а в ней строка Contrast ratio: коэффициент и отметки, проходит ли пара пороги.
Звучит сложнее, чем есть, со второго раза операция занимает секунд десять. Плюс способа: вы проверяете живую страницу со всеми реальными фонами, наложениями и полупрозрачными слоями, а не идеальный макет.
Экран телефона строже монитора
Макет согласовывают на большом мониторе с хорошей цветопередачей и полной яркостью. Посетитель открывает лендинг на телефоне средней руки, на улице, с автояркостью и ночным фильтром. Каждый из этих факторов съедает часть контраста.
Поэтому пары, прошедшие проверку впритык, на реальных устройствах живут на грани. Держите запас: формально 4,6:1 достаточно, но там, где можно дотянуть до 6:1 или 7:1, лучше дотянуть. Эта перестраховка бесплатна.
Где контраст ломается чаще всего
Проблемные места повторяются из проекта в проект. В моей практике чаще всего проваливаются:
- серый мелкий текст: сноски, подписи под ценой, текст согласия у формы;
- белый текст на яркой кнопке: на оранжевой заливке белая надпись даёт около 2:1;
- плейсхолдеры в полях, которые видно только под прямым взглядом в помещении;
- текст на градиенте: левый край читается, правый уже нет;
- надписи поверх фотографий.
Общее у всех пунктов одно: в макете они выглядят намеренной лёгкостью, а в статистике превращаются в блок, который никто не прочитал. Последний пункт списка встречается так часто, что разберём его отдельно.
Если приходится всматриваться, читается текст или нет, он не читается. Само сомнение и есть ответ.
Текст поверх фотографии
Фотография на первом экране почти всегда неоднородная: слева тёмная стена, справа засвеченное окно. Заголовок, который читается на одной половине кадра, пропадает на другой. Контраст здесь проверяют по самой светлой точке фона под текстом, а не по средней.
Рабочие решения:
- полупрозрачный тёмный слой поверх всего фото, обычно 40-60 процентов черноты;
- плашка под текстом: прямоугольник сплошного цвета, на котором контраст считается честно;
- кадр со спокойной зоной под заголовок, об этом лучше думать при выборе фотографии, а не после вёрстки.
Отдельная ловушка: тёмное фото со светлым участком ровно под вторым словом заголовка. На превью незаметно, в жизни глаз спотыкается. Лечится сдвигом текста или локальным затемнением участка.
Кнопке контраст нужен в обе стороны
У кнопки две пары цветов, и проверять нужно обе. Первая: текст к заливке кнопки, здесь норма 4,5:1. Вторая: заливка к фону страницы, здесь достаточно 3:1, иначе кнопка сливается с секцией и её не находят глазами. Бледно-жёлтая кнопка на белом проваливает вторую проверку, даже если надпись на ней читается.
Белый текст на фирменных ярких цветах вообще отдельная история. На оранжевом и салатовом белая надпись почти всегда ниже нормы, а тёмная на тех же заливках проходит. Как выбирать цвет, размер и текст кнопки, разобрано в статье CTA-кнопка на лендинге. Короткая версия: кнопка не обязана быть красной, она обязана быть самым заметным пятном экрана.
Как оставить серый стиль и не потерять текст
Светло-серый текст любят за лёгкость: страница выглядит спокойнее. Отказываться от приёма не нужно, достаточно держаться проходных значений.
Самый простой ход: взять тот же серый на два тона темнее. #595959 вместо #999999 сохраняет ощущение серого текста и даёт около 7:1. Второй ход: увеличить кегль, для текста от 24 пикселей порог мягче. Третий: заменить чистый серый затемнённым оттенком фирменного цвета, глубокий синий или графит смотрятся дороже нейтрального серого.
Контраст работает в паре с размером и межстрочным интервалом: мелкий текст с отличным контрастом читается хуже крупного с посредственным. Про размеры, шрифты и интервалы есть отдельный разбор: Типография для лендинга.
Проверка за пять минут: порядок действий
Соберите всё в один короткий проход. Порядок такой:
- Выпишите пары текст плюс фон: основной текст, заголовки, кнопка, подписи у формы, текст в футере.
- Прогоните пары через WebAIM. Всё, что ниже 4,5:1 для обычного текста и 3:1 для крупного, идёт в список правок.
- Откройте страницу в браузере и точечно проверьте спорные места через инструменты разработчика: текст на фото, кнопки, плейсхолдеры.
- Посмотрите лендинг на телефоне при половинной яркости, лучше у окна или на улице.
- Прищурьтесь и взгляните на первый экран: что пропало первым, то и правьте.
Контраст цветов при этом часть большой темы читаемости. Рядом с ним живут размеры шрифта, зоны нажатия и структура заголовков, всё это собрано в статье Доступность лендинга. Если ваша аудитория старше 50 лет, держите запас по контрасту больше обычного: с возрастом хрусталик желтеет, и бледные пары цветов пропадают у таких читателей первыми.
Частые вопросы
Какой контраст должен быть у плейсхолдера в поле формы?
Такой же, как у обычного текста - не меньше 4,5:1 к фону поля. Атрибут placeholder у элемента input браузер по умолчанию красит бледно-серым, и это одно из мест, где контраст проваливается чаще всего: пока поле пустое, посетитель не понимает, что в него вводить.
Нужно ли отдельно проверять контраст в тёмной теме?
Да, пороги 4,5:1 и 3:1 действуют одинаково для любой темы, но на тёмном фоне чаще ошибаются с полутонами: серый текст, который читался на белом, на тёмно-сером фоне легко проваливается ниже нормы. Проверяйте обе темы отдельными парами цветов.
Можно ли использовать только цвет, чтобы показать ошибку в поле формы?
Нет, для людей с нарушением цветовосприятия одного цвета недостаточно: добавьте текст ошибки или иконку рядом с полем. Красная рамка без подписи не объясняет, что именно не так.
Проверяет ли контраст автоматический аудит сайта вроде PageSpeed?
Частично. Общий аудит доступности на pagespeed.web.dev находит грубые провалы контраста автоматически, но не заменяет ручную проверку каждой пары цветов: скрипт не видит текст на фотографии или на градиенте, а WebAIM Contrast Checker проверяет именно ту пару, которую вы ему дали.
Коротко
Контраст цветов считается цифрой, а не ощущением. Норма для обычного текста 4,5:1, для крупного текста и кнопок 3:1. Проверить пару цветов можно за минуту в WebAIM Contrast Checker или прямо в браузере через инструменты разработчика, оба способа бесплатные.
Чаще всего проваливаются серые подписи, белый текст на ярких кнопках и надписи поверх фотографий. Лечится это оттенком на два тона темнее, подложкой под текст и проверкой на телефоне. Пять минут на такой проход возвращаются тем, что посетитель без усилия читает оффер, цену и кнопку, а не догадывается о них.
