На макетах серый текст на светлом фоне выглядит изящно. На экране ноутбука при ярком свете он превращается в едва различимые штрихи. На смартфоне на улице он исчезает совсем. Дизайнеры редко замечают проблему, потому что работают на хороших мониторах в комфортных условиях и, главное, знают, что должно быть написано. Посетитель этого не знает, и если текст не читается, он просто уходит.
Читаемость — это не вопрос вкуса, а вопрос физиологии и условий использования. По разным оценкам, значительная часть людей имеет те или иные особенности зрения: близорукость, снижение остроты с возрастом, нарушения цветовосприятия. К ним добавляются обычные ситуации: яркое солнце, дешёвый экран, усталость, привычка читать с телефона в транспорте. Дизайн, удобный для всех, помогает каждому из этих людей, а значит, повышает конверсию.
Разберём, что такое контраст, какие значения нужны, как подбирать размеры и интервалы, как обращаться с текстом на изображениях и как проверить сайт без специального оборудования.
Что такое контрастность и как её измеряют
Контрастность — это разница в яркости между текстом и фоном. Измеряется она коэффициентом, который вычисляется по формуле на основе относительной яркости двух цветов. Значение находится в диапазоне от единицы (цвета одинаковые, текст невидим) до двадцати одного (чёрный на белом).
Международные рекомендации по доступности веб-контента задают пороги, которые стали отраслевым стандартом:
| Элемент | Минимальный уровень | Повышенный уровень |
|---|---|---|
| Обычный текст | 4,5 к 1 | 7 к 1 |
| Крупный текст (от 24 пикселей или от 19 жирным) | 3 к 1 | 4,5 к 1 |
| Значки и графические элементы, несущие смысл | 3 к 1 | — |
| Границы полей форм и состояния фокуса | 3 к 1 | — |
Эти цифры не нужно считать вручную: существуют бесплатные инструменты проверки, которые встроены в дизайн-редакторы и браузеры. Достаточно знать, где искать значение, и закладывать запас: на реальных экранах контраст визуально ниже, чем в редакторе.
Почему нельзя полагаться на глаз
Восприятие зависит от множества факторов: яркости экрана, освещения помещения, возраста, усталости, размера шрифта. Цветовая пара, которая кажется приемлемой молодому дизайнеру, для человека старшего возраста может быть нечитаемой. Поэтому проверка по числу объективнее. Особенно коварны:
- Светло-серый текст на белом. Любимый приём «воздушных» макетов, при котором контраст падает ниже допустимого.
- Цветной текст на цветном фоне. Оранжевый на голубом или серый на зелёном могут иметь разные оттенки, но близкую яркость, и тогда текст «вибрирует».
- Белый текст на светлых акцентных кнопках. Жёлтый, салатовый, светло-голубой фоны не дают достаточной разницы с белым.
- Подсказки и placeholder в формах. Часто делаются почти невидимыми, хотя несут важную информацию.
Не только цвет: что ещё определяет читаемость
Размер шрифта
Для основного текста на сайте комфортен размер от шестнадцати пикселей. Меньше — труднее читать, особенно на смартфонах. Мелкий шрифт допустим только для вспомогательных элементов вроде подписей, и то не меньше двенадцати-четырнадцати. Увеличение шрифта в браузере тоже должно работать без поломок вёрстки. Для этого размеры лучше задавать в относительных единицах.
Начертание и толщина
Очень тонкие начертания теряются на малых размерах и при невысоком разрешении экрана. Для основного текста берут обычное или средней плотности начертание. Чрезмерно жирный шрифт для длинных абзацев тоже утомляет. О выборе гарнитур и формировании иерархии шрифтов мы подробно рассказывали в статье про типографику на сайте.
Межстрочный интервал и длина строки
Комфортный интервал для основного текста — от полутора размера шрифта. Длина строки — от пятидесяти до семидесяти пяти знаков. Слишком длинная строка заставляет глаз терять место при переходе, слишком короткая — прерывает ритм. Подробнее об интервалах — в материале про пустое пространство на странице.
Выравнивание
Для длинных текстов подходит выравнивание по левому краю. Выключка по ширине создаёт неравномерные пробелы и «реки» в тексте, особенно в узких колонках. Центрированные абзацы хороши только для коротких заголовков и подписей.
Регистр и разрядка
Текст, набранный заглавными буквами, труднее читать, потому что пропадает силуэт слов. Использовать верхний регистр можно в небольших метках и кнопках, но не в абзацах. Для таких надписей слегка увеличивают расстояние между буквами.
Текст поверх изображений
Это самая проблемная зона. Фотография неоднородна: в одном месте светлая, в другом тёмная, и текст, читающийся слева, пропадает справа. Решения:
- Затемняющая подложка. Полупрозрачный слой между фото и текстом. Простой и надёжный приём. Достаточно затемнить на сорок-шестьдесят процентов, подбирая по фотографии.
- Градиент. Плавное затемнение с одной стороны, где расположен текст. Выглядит аккуратнее, чем сплошная плашка. Подробнее о правилах работы с градиентами — в статье про градиенты в интерфейсах.
- Отдельная плашка под текстом. Блок с однородным фоном, расположенный на фото. Обеспечивает стабильный контраст.
- Выбор снимка под текст. Если изображение выбирают заранее, можно оставить в кадре спокойную область для надписи.
- Разделение. Изображение и текст размещаются рядом, а не друг на друге. Самый надёжный вариант, особенно для мобильных.
Помните, что на разных устройствах изображение кадрируется по-разному, и место, которое на десктопе было тёмным, на смартфоне может оказаться светлым. Проверяйте все варианты. Влияние визуальных решений первого экрана описано в статье про первый экран сайта.
Цвет как носитель смысла: не только красный и зелёный
Часть людей плохо различает отдельные оттенки: чаще всего красный и зелёный. Если сообщение об ошибке отличается от успешного только цветом, оно останется незамеченным. Правило простое: цвет не должен быть единственным способом передать информацию.
- К сообщению об ошибке добавляйте значок и текст.
- Ссылки в тексте выделяйте не только цветом, но и подчёркиванием или начертанием.
- Графики и диаграммы различайте не только оттенком, но и формой маркера или подписью.
- Состояния «активно» и «неактивно» отличайте по форме или яркости, а не только по оттенку.
Подбор цветов с учётом смысловой нагрузки разбирается в статьях про цветовую палитру сайта и психологию цвета.
Кнопки, ссылки и элементы форм
Кнопки
Текст на кнопке должен быть контрастен с её фоном, а сама кнопка — с фоном страницы. Если кнопка «ghost» с тонкой рамкой и светло-серым текстом, она может потеряться. Основное действие лучше делать заливкой, второстепенное — контуром, но тоже достаточной контрастности. Подробнее — в статье о кнопках и призывах к действию.
Ссылки
Ссылка в абзаце должна отличаться от обычного текста. Сочетание цвета и подчёркивания — самый надёжный вариант. Посещённые ссылки можно слегка отличать, но не теряя читаемости.
Поля форм
Граница поля должна быть заметной, подпись находится над полем, а не внутри как подсказка, которая исчезает при вводе. Состояние фокуса должно быть хорошо видно: часто его оформляют рамкой с толстой линией и контрастным цветом. Сообщения об ошибках размещаются рядом с полем. Как проектировать формы, подробно описано в статье про формы обратной связи.
Тёмная тема
Тёмная тема создаёт свои проблемы. Чистый белый текст на чисто чёрном фоне даёт избыточный контраст, из-за чего глаза быстро устают, а буквы будто «светятся». Обычно используют тёмно-серый фон и слегка приглушённый светлый текст. Цветные акценты на тёмном фоне выглядят ярче, поэтому их насыщенность нужно снижать. Кроме того, тени в тёмной теме работают иначе, а границы приобретают бóльшую роль. Подробнее мы рассматривали тему в статье про тёмную тему в веб-дизайне.
Контраст и бренд: как сочетать
Нередко фирменный цвет не проходит проверку контрастности. Бледно-розовый, светло-голубой, мятный выглядят приятно на упаковке, но не годятся для текста на белом фоне. Выход не в отказе от бренда, а в продуманном использовании:
- фирменный цвет остаётся в крупных элементах, заливках, иллюстрациях;
- для текста и ссылок используется более тёмный оттенок той же гаммы;
- на цветной заливке выбирают тёмный или белый текст в зависимости от яркости, и проверяют контраст;
- правила закрепляются в руководстве по бренду и дизайн-системе.
Читаемость и бизнес-результаты
Хорошая читаемость — не абстрактная забота. Она влияет на конкретные показатели:
- Время на странице и глубина просмотра. Удобный текст дочитывают до конца.
- Отказы. Нечитаемая страница заставляет уйти. Подробнее о мерах снижения — в статье как уменьшить количество отказов.
- Доля успешных отправок форм. Понятные подписи и подсказки сокращают ошибки.
- Поведенческие факторы. Они влияют на позиции в поиске. О связи дизайна и ранжирования — в статье про поведенческие факторы.
- Охват аудитории. Люди с особенностями зрения становятся полноценными клиентами. Больше о теме — в материале про доступность сайта.
Как проверить свой сайт: пошаговая инструкция
- Автоматическая проверка. Используйте расширения для браузера или встроенные средства разработчика: они покажут пары цветов с недостаточным контрастом.
- Проверка в оттенках серого. Переведите страницу в чёрно-белый режим. Если элементы продолжают различаться, цвет не единственный носитель смысла.
- Проверка увеличением. Увеличьте масштаб страницы вдвое. Вёрстка не должна ломаться, а текст должен остаться читаемым.
- Проверка на смартфоне вне офиса. На улице при ярком свете и на минимальной яркости.
- Проверка с клавиатуры. Пройдите по странице клавишей перехода. Фокус должен быть виден.
- Проверка на людях. Попросите коллегу старшего возраста или человека с очками прочитать фрагмент. Реакция будет полезнее любых цифр.
Полноценная оценка включена в наш UX-аудит: мы проверяем читаемость, контраст и удобство в реальных сценариях и приводим список конкретных исправлений.
Типичные ошибки
- Серый на белом. Модное оформление, которое не проходит проверку.
- Слишком мелкий шрифт. Особенно в подвале, таблицах и условиях.
- Текст на фото без подложки. Читается на одном кадре и пропадает на другом.
- Только цвет как признак. Ошибки в формах, выделение пунктов, различие в графиках.
- Тонкие начертания на малых размерах. Красиво в крупном заголовке, нечитаемо в абзаце.
- Длинные строки. Текст на всю ширину широкого монитора.
- Размещение важной информации в изображении. Текст в картинке нельзя увеличить, перевести программой и прочитать голосом.
- Невидимый фокус. Убранная по эстетическим соображениям обводка делает сайт непригодным для навигации с клавиатуры.
- Блеклые подсказки. Placeholder, слишком светлый, чтобы его прочитать.
Итог
Контраст и читаемость — основа любого дизайна, потому что без них не работают ни красота, ни тексты, ни кнопки. Простые меры обеспечивают заметный эффект: достаточная контрастность, комфортный размер, спокойные интервалы, подложки под текстом на фото, дополнение цвета формой. Эти решения не лишают сайт стиля, а делают его удобным для каждого посетителя.
Если вы хотите проверить свой сайт или заложить стандарты читаемости в новый проект, ознакомьтесь с услугой веб-дизайна, изучите этапы нашей работы и напишите нам через контакты.
