Перед началом
Возьмите настоящую длинную статью с таблицей, списком и изображением. Короткий заголовок-заглушка не выявит проблемы реального содержания.
Текстовое объяснение схемы
Смысловая структура → Удобная строка → Контраст и масштаб. Колонка 65ch не означает ровно 65 букв в каждой строке: единица зависит от метрики символа 0 выбранного шрифта. Это ориентир для проверки, а не универсальная норма.
Как сделать
- Ограничьте текстовую колонку, например 65ch как отправную точку. Подберите размер и межстрочное расстояние, затем проверьте реальные русские, украинские и английские строки.
- Разбейте содержание по задачам. Заголовки описывают ответ, списки — последовательность или выбор. Ссылки должны оставаться различимыми без наведения мыши.
- Проверьте 360 px, широкий экран и увеличение до 200%. В таблице сохраняйте заголовки и предусмотрите доступное чтение на узком экране, не уменьшая весь текст до микроскопического размера.
.prose { max-width: 65ch; font-size: 1.125rem; line-height: 1.7; }
.prose a { text-decoration: underline; text-underline-offset: .2em; }Разберём пример
Колонка 65ch не означает ровно 65 букв в каждой строке: единица зависит от метрики символа 0 выбранного шрифта. Это ориентир для проверки, а не универсальная норма.
Проверьте результат
Нет обрезанных слов, наложения букв и скрытого фокуса. Контраст проверен для обычного текста, ссылок и второстепенных подписей.
Где легко ошибиться
Светло-серая подпись может быть формально видимой и фактически нечитаемой. Проверяйте вычисленные цвета и соотношение контраста.
Источники и продолжение
- W3C — Contrast Minimum
- Как улучшить читабельность текстов на своем сайте? — 2016-02-25 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.