Контраст и размер текста: почему клиенты старше 45 не могут прочитать ваш сайт
Жалуются, что «ничего не видно» или «нельзя прочитать»? Дело не в зрении клиентов — дело в читаемости сайта. Разбираем, как это исправить.
Вам пишут «не могу найти номер телефона» или «на моём телефоне ничего не разобрать»? У ваших клиентов нет проблемы со зрением — у сайта есть проблема с читаемостью. И жалуются чаще всего люди старше 45 лет, то есть именно та аудитория, которая заполняет запись в стоматологии или в нотариальной конторе.
Хорошая новость: дело не во вкусе, а в нескольких конкретных правилах, которые вы можете проверить и исправить сами. Светло-серый текст на белом, буквы, уменьшенные чтобы «всё влезло», кнопка, в которую палец не попадает — каждая из этих мелочей отпугивает именно того человека, который уже собирался вам позвонить. Разберём, почему так происходит и что делать, шаг за шагом.
Что меняется в глазу после 40 (и почему это не вина клиента)
Примерно к 40–45 годам хрусталик глаза становится жёстче и пропускает меньше света. У этого эффекта есть медицинское название — пресбиопия, и он есть почти у всех, даже у тех, кто никогда не носил очки. Происходит две вещи: глаз хуже фокусируется вблизи и, что важнее для сайта, падает чувствительность к контрасту — то есть разница между текстом и фоном должна быть больше, чтобы читать было комфортно.
На практике текст, который вы в 30 лет читаете без усилий, для вашего 55-летнего клиента — серый туман. Ему не нужны очки получше. Ему нужен сайт, сделанный под то, как реально работает зрелый глаз, — а это зависит от вас, а не от него.
Контраст: правило, которое проверяется за 30 секунд
Есть понятный технический стандарт, применяемый во всём мире, — WCAG. Он требует коэффициент контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного. Цифры запоминать не обязательно — важно знать, что их можно измерить бесплатно любым «contrast checker» в браузере.
Главный виновник — светло-серый текст на белом, тот самый #999 или #aaa, который «смотрится элегантно» в портфолио дизайнера. На вашем экране в тени он выглядит утончённо. Для глаза 55-летнего человека в машине на солнце он почти невидим. Так же опасны:
- очень тонкие шрифты (thin / light)
- белый текст поверх светлой фотографии
- бледно-серый для важных данных вроде часов работы и телефона
Простое правило: информация, от которой зависит запись — телефон, адрес, кнопка — должна быть самым тёмным, а не самым незаметным элементом страницы.
Размер и интервалы важны не меньше самой буквы
Хороший контраст с крошечными буквами всё равно не читается. Для основного текста (абзацы, контакты) разумная база сегодня — около 16px, а заголовки крупнее. Меньше — и зрелому клиенту приходится подносить телефон к глазам или увеличивать масштаб, а многие просто сдаются.
Но дело не только в размере. Важны также:
- расстояние между строками (межстрочный интервал около 1,5 делает текст гораздо легче для чтения)
- строки, которые на десктопе не растягиваются на всю ширину экрана
- кнопки, достаточно крупные, чтобы попасть пальцем — классический ориентир около 44px в высоту
Текст, сжатый ради «премиальности», утомляет глаз. Воздух между элементами — не потерянное место, а именно то, что делает страницу читаемой.
Двухминутный тест, который можно сделать прямо сейчас
Чтобы выявить большинство проблем, специалист не нужен. Сделайте это на собственном телефоне:
- Откройте сайт на улице, при дневном свете, а не в офисе с яркостью на максимуме.
- Держите телефон на обычном расстоянии для чтения, не подносите к глазам и не увеличивайте масштаб.
- Убавьте яркость экрана примерно наполовину — именно так видят многие клиенты.
- Попросите родителя или клиента старше 55 найти ваш номер телефона за десять секунд.
Если он колеблется, щурится или подносит телефон ближе — ответ у вас есть. Никакой теории: его глаз прямо говорит, что не так. Запишите, где именно он застрял; там вы теряете записи.
Дизайнерские ловушки, которые красивы, но убивают чтение
Многие сайты выглядят современно и именно поэтому не читаются. Частые ловушки, особенно у клиник и контор, которые хотят «элегантный» вид:
- Текст поверх фото или видео без специального тёмного слоя под ним — читается лишь на половине изображения.
- Светлые фирменные цвета (золото, беж, жемчужно-серый) прямо на тексте, а не только в акцентах.
- Скрытые меню и иконки без слов — зрелый клиент ищет слово «Контакты», а не символ.
- Анимации, которые двигают текст, пока человек пытается его прочитать.
Это не значит отказаться от красивого сайта. Это значит, что красота и читаемость не противоречат друг другу — хороший дизайн решает и то, и другое. Фирменный цвет может жить в кнопках, линиях и фонах, пока текст остаётся тёмным и чётким.
Как мы работаем с читаемостью в MPO
В MPO Web Studio мы отталкиваемся от реального клиента вашего бизнеса, а не от красивого шаблона в витрине. Для клиники или конторы со зрелой аудиторией это значит: проверенный контраст, достаточно крупный текст по умолчанию и контакты, видимые сразу, а не спрятанные под меню.
Мы работаем удалённо по всей стране и сначала делаем вам бесплатное демо — сайт, который вы видите и тестируете на своём телефоне ещё до оплаты. Вы можете прямо на нём провести тест выше, посадив рядом клиента 60 лет. Цены прозрачные, без сюрпризов.
Если вам уже жалуются, что «ничего не видно», напишите нам в WhatsApp адрес текущего сайта — честно скажем, что можно быстро поправить, а что стоит переделать.
Частые вопросы
Какой размер текста «правильный» для сайта?+
Единого волшебного числа нет, но для основного текста на телефоне разумная отправная точка — около 16px, заголовки крупнее. Важнее цифры сам тест: если клиент старше 55 читает, не поднося телефон ближе, всё в порядке. Если щурится — мелко, что бы ни говорила теория.
Достаточно ли просто увеличить шрифт?+
Обычно нет. Крупный шрифт, но всё тот же светло-серый на белом, читаться не будет. Читаемость складывается из трёх вещей вместе: размер, контраст и межстрочный интервал. Исправив только одно, вы решаете лишь треть проблемы. Стоит проверить все три на важных страницах.
Мои фирменные цвета светлые. Надо ли их менять?+
Не обязательно. Фирменный цвет может остаться, но перенесённым на кнопки, линии, иконки и фоны — не на текст, который нужно читать. Важный текст остаётся тёмным и чётким, а бренд живёт вокруг него. Так вы сохраняете узнаваемость, не жертвуя читаемостью.
Сколько времени займёт исправить это на существующем сайте?+
Зависит от того, как сделан сайт. Правки контраста, размера и интервалов обычно относятся к самым быстрым и часто выполняются без полной переделки. Пришлите адрес в WhatsApp — посмотрим и честно скажем, это несколько часов правок или что-то более крупное.
Решает ли проблему кнопка «увеличить текст» на сайте?+
Она помогает тому, кто догадается её искать, но большинство клиентов её не заметят и не нажмут. Гораздо лучше, чтобы сайт был читаемым по умолчанию, сразу, чем требовать от зрелого клиента лишний шаг. Кнопка — это бонус, а не оправдание для слишком мелкого текста изначально.
7 ошибок, которые отпугивают клиентов с вашего сайта
Оставьте email и получите гид прямо здесь, сразу. Без спама.
Хотите увидеть, как мог бы выглядеть сайт вашего бизнеса?
Напишите нам в WhatsApp — и мы БЕСПЛАТНО подготовим демо-сайт с названием вашего бизнеса. Сначала смотрите, потом решаете.