Читабельность и доступность: текст для всех

Дизайн для всех — это не опция, а стандарт

Представь: ты заходишь на сайт, а текст сливается с фоном. Или шрифт такой мелкий, что приходится приближать экран. Знакомо?
Для миллионов людей с особенностями зрения, моторики или просто в ярком солнце на улице — это ежедневная реальность.

Доступность (accessibility) — это не «дополнительная фича», а базовая ответственность дизайнера. Хорошая новость: сделать текст доступным — значит сделать его удобнее для всех. Контраст, размер, ритм — эти правила работают и для твоей бабушки, и для пользователя в метро, и для скринридера.

Давай разберём простые приёмы, которые сразу поднимут уровень твоих макетов.

Контраст: правило 4.5:1

Текст должен отличаться от фона. Не на глаз, а по цифрам. Стандарт WCAG AA требует контраст минимум 4.5:1 для обычного текста. Для крупного текста (от 18px или 14px Bold) — от 3:1.

Как проверить? Используй плагин Stark в Figma или онлайн-чекер WebAIM. Серый текст на светло-сером фоне — красиво на макете, но нечитаемо в жизни. Чёрный на белом — надёжно, но может резать глаза. Ищи баланс: тёмно-серый (#333) на белом или светлый текст на тёмном фоне с достаточной насыщенностью.

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

Размер имеет значение

Минимальный размер для основного текста в вебе — 16px. Меньше — пользователь будет зумить, особенно на мобильном. Для второстепенного текста (подписи, мета-информация) допустимо 14px, но не ниже. Заголовки — от 24px и выше, с чётким шагом иерархии.

Важный нюанс: проверяй, как текст масштабируется при увеличении страницы до 200% (требование доступности). Если при зуме блоки «наезжают» друг на друга или текст обрезается — это баг, а не фича.

Проверяй макет в Figma: переключай размеры фреймов и смотри, не ломается ли читабельность.

Длина строки и интерлиньяж: не дай тексту «задохнуться»

Даже идеальный шрифт провалится, если строка слишком длинная или строки слипаются.

• Длина строки: оптимум — 45–75 символов с пробелами. Короче — глаз дёргается, длиннее — теряется начало следующей строки.
• Интерлиньяж: 120–150% от размера шрифта. Для 16px это 19–24px между строками. В мобильном дизайне можно брать верхнюю границу — на маленьком экране «воздух» критичен.

Совет: в Figma настрой интерлиньяж в Auto Layout — так отступы будут адаптивными и не «поедут» при изменении контента.

Тёмная тема: не просто инверсия

Тёмная тема — это не просто «поменяй чёрный на белый». На тёмном фоне светлый текст может «плыть» из-за оптической иллюзии (эффект ореола).

• Правило: используй не чисто белый (#FFF), а слегка приглушённый (#E6E6E6 или #F5F5F5).
• И не чисто чёрный фон — бери тёмно-серый (#121212 или #1A1A1A).
• Контраст всё равно должен проходить проверку 4.5:1.

И помни: в тёмной теме иногда нужно чуть увеличить вес шрифта (Regular → Medium), чтобы компенсировать снижение чёткости. Проверяй оба варианта в макете — это часть современного UX.

Инструменты для быстрой проверки

Не нужно быть экспертом по доступности, чтобы делать качественные макеты. Вот три инструмента, которые сэкономят время:

• Stark (плагин Figma) — проверяет контраст, симулирует разные виды дальтонизма, показывает фокус для клавиатурной навигации.
• WebAIM Contrast Checker — онлайн-калькулятор: вводишь цвета, получаешь результат и советы.
• Lighthouse (в Chrome DevTools) — аудит доступности готовой страницы: найдёт проблемы с текстом, фокусом, ARIA-атрибутами.

Добавь проверку контраста в свой чек-лист перед передачей макета в вёрстку. Это займёт 2 минуты, но спасёт от правок на поздних этапах.