Размер шрифта по WCAG: что требует руководство и чего не требует
Обновлено 14 октября 2026 г. · 9 мин чтения
Люди ищут «минимальный размер шрифта по WCAG», потому что кажется, что он обязан существовать. Минимального размера шрифта в WCAG 2.0, 2.1 и 2.2 нет. Ни один критерий успеха не говорит «основной текст — не меньше 16 пикселей». Зато WCAG требует, чтобы люди могли увеличить текст, чтобы макет это выдерживал и чтобы у мелкого текста был достаточный контраст. На этой странице — четыре важных критерия и, отдельно от них, наши рекомендации сверх требований.
Это общая информация, а не юридическая консультация.
Короткий ответ
| Вопрос | Требование WCAG | Критерий |
|---|---|---|
| Есть ли минимальный размер шрифта? | Нет | — |
| Насколько текст должен увеличиваться? | До 200 % без потери содержимого или функций | 1.4.4 «Изменение размера текста» (AA) |
| Что на узком экране или при масштабе 400 %? | Содержимое перестраивается при 320 CSS-пикселях без прокрутки в двух направлениях | 1.4.10 «Перекомпоновка» (AA) |
| А межстрочный интервал и интервал между буквами? | Ничего не ломается, когда их увеличивают до заданных значений | 1.4.12 «Интервалы в тексте» (AA) |
| Что такое «крупный текст»? | 18 пт (24 px) обычного или 14 пт (около 18,66 px) полужирного | 1.4.3 «Контраст (минимальный)» (AA) |
1.4.4 «Изменение размера текста»: 200 % без потерь
Текст, кроме субтитров и изображений текста, можно увеличить до 200 % без ассистивных технологий и без потери содержимого или функций. На практике проверяйте масштабом браузера (Ctrl/Cmd и +) или настройкой размера текста в браузере:
- ни один текст не обрезается и не наезжает на другой;
- кнопки, меню и поля форм продолжают работать;
- ничего важного не исчезает за фиксированной шапкой.
Типичные ошибки: текст в блоках с фиксированной высотой, font-size, заданный только в единицах vw, и maximum-scale=1 или user-scalable=no в метатеге viewport, которые не дают увеличить страницу на телефоне.
1.4.10 «Перекомпоновка»: 320 CSS-пикселей
Содержимое должно читаться при ширине 320 CSS-пикселей — это то же самое, что масштаб 400 % для окна шириной 1280 пикселей, — без прокрутки в двух направлениях. Длинный текст должен переноситься; чтобы прочитать строку, не должна требоваться горизонтальная прокрутка. Исключения есть для содержимого, которому нужна двумерная раскладка: карт, таблиц данных и сложных схем.
1.4.12 «Интервалы в тексте»
Слабовидящие люди и люди с дислексией часто меняют интервалы с помощью расширения браузера или пользовательской таблицы стилей. WCAG требует, чтобы ничего не терялось, когда они задают:
- межстрочный интервал не меньше 1,5 размера шрифта;
- интервал после абзацев не меньше 2 размеров шрифта;
- интервал между буквами не меньше 0,12 размера шрифта;
- интервал между словами не меньше 0,16 размера шрифта.
Использовать эти значения в дизайне не обязательно. Дизайн просто должен продолжать работать, когда их кто-то применяет. Обычные ошибки — фиксированная высота кнопок и карточек и текст, обрезанный через overflow: hidden.
1.4.3 и определение крупного текста
Единственное место, где размер шрифта появляется в критерии уровня AA, — определение крупного текста в правиле контраста:
- Крупный текст: не меньше 18 пунктов (24 CSS-пикселя) обычного начертания или не меньше 14 пунктов полужирного (около 18,66 CSS-пикселя).
- Крупному тексту нужен контраст не меньше 3:1; любому другому тексту — 4,5:1.
- На уровне AAA (1.4.6) значения — 7:1 и 4,5:1.
Значит, размер меняет нужный контраст, а не то, разрешён ли текст. Тонкая серая цена кеглем 13px — классическая ошибка магазина: текст одновременно мелкий, светлый и малоконтрастный. Пары цветов проверяйте нашей проверкой контраста.
Связанные критерии
- 1.4.5 «Изображения текста» (AA): используйте настоящий текст, а не текст, вшитый в картинку, чтобы его можно было увеличить, перекрасить и прочитать вслух. Баннеры с текстом акции внутри изображения — частая ошибка.
- 1.4.8 «Визуальное представление» (AAA): среди прочего требует блоков текста не шире 80 символов и текста, который можно увеличить до 200 % без горизонтальной прокрутки. Это AAA, законы его не требуют, но для длинных текстов это полезный ориентир.
- 2.5.8 «Размер цели» (AA): это не о тексте, но мелкие текстовые ссылки в меню часто не проходят и требование к цели 24 на 24 пикселя.
Выравнивание по ширине и по центру, полужирный текст, шрифты и длина строки
Эти вопросы задают часто. Большинство ответов содержится в одном критерии уровня AAA — 1.4.8 «Визуальное представление». Уровень AAA не требуют ни законы, ни заявление о соответствии уровню AA, поэтому всё, что ниже относится к 1.4.8, считайте рекомендацией.
Выравнивание по ширине
1.4.8 требует, чтобы был способ сделать так, чтобы блоки текста не выравнивались по ширине (одновременно по левому и правому краю). W3C объясняет почему: выравнивание по ширине неравномерно растягивает пробелы между словами и может образовывать «реки» белого пространства, бегущие вниз по странице. Для некоторых людей с когнитивными нарушениями это делает чтение трудным, а иногда невозможным. На уровне AA выравнивание по ширине не считается нарушением. Наша рекомендация: выравнивайте основной текст по левому краю (или по правому в языках с письмом справа налево), особенно на узких экранах, где выравнивание по ширине даёт самые большие пробелы.
Длина строки
1.4.8 также требует, чтобы ширину блоков текста можно было ограничить не более чем 80 символами или знаками (40 для китайского, японского и корейского). Тот же критерий просит межстрочный интервал не меньше полуторного внутри абзацев, интервал между абзацами как минимум в 1,5 раза больше межстрочного, цвета текста и фона на выбор пользователя и текст, который можно увеличить до 200 % без горизонтальной прокрутки в окне на весь экран. Такой механизм может обеспечивать браузер; странице не обязательно строить собственные элементы управления.
Текст по центру
Ни один критерий WCAG не упоминает текст, выровненный по центру. Наша рекомендация: короткие заголовки и кнопки центрируйте, если хотите, но абзацы, списки и подписи полей форм оставляйте выровненными по левому краю. У длинного текста по центру неровный левый край, и читателю приходится искать начало каждой строки — при масштабе 200 % и людям с дислексией это ещё труднее.
Полужирный текст
Полужирный встречается в WCAG в двух местах:
- Крупный текст: 14 пунктов полужирного (около 18,66 CSS-пикселя) уже считаются крупным текстом, и на уровне AA им нужен контраст 3:1 вместо 4,5:1 (1.4.3).
- Смысл: если полужирный или другое оформление текста несёт смысл — «поля, выделенные жирным, обязательны», жирное слово как предупреждение, — этот смысл должен быть доступен и в разметке или в тексте. W3C называет передачу информации изменением оформления текста без соответствующей разметки или текста ошибкой F2 критерия 1.3.1 «Информация и взаимосвязи». Для выделения используйте
<strong>или<em>, а «обязательно» пишите словами.
WCAG не ограничивает, сколько полужирного вы используете. Длинные фрагменты жирным труднее просматривать; оставьте его для выделения.
«Обычный» размер текста
WCAG не определяет «обычный текст». Оно определяет крупный текст, а всё, что меньше, инструменты проверки называют обычным текстом: всё, что меньше 18 пунктов (24 CSS-пикселя) обычного начертания или меньше 14 пунктов полужирного. Обычному тексту на уровне AA нужен контраст не меньше 4,5:1, крупному — 3:1. Минимального размера для обычного текста при этом по-прежнему нет; см. таблицу в начале страницы.
Шрифты и проверка шрифтов
WCAG не называет и не запрещает никаких шрифтов и не предъявляет требований к гарнитуре. Важно, чтобы ваш шрифт работал с критериями выше: увеличивался до 200 %, не ломался при увеличенных интервалах (1.4.12) и имел достаточный контраст при своём начертании — тонкие шрифты могут выглядеть бледнее, чем можно ожидать по их цвету, о чём W3C пишет в Understanding 1.4.3. Наша рекомендация: выбирайте гарнитуру с хорошо различимыми символами (I, l и 1; O и 0), обычным начертанием без волосяной тонкости и полной поддержкой языков вашего сайта.
«Проверка шрифта на WCAG» не может одобрить шрифт, потому что списка разрешённых шрифтов нет. Автоматическая проверка может другое — и это делает наш WCAG тестер: проверить контраст каждого текста с учётом правила крупного текста и отметить viewport, который блокирует масштабирование. Длину строки, выравнивание по ширине и поведение текста при масштабе 200 % должен посмотреть человек.
Рекомендации, а не требования
Ниже — наши рекомендации для удобочитаемых сайтов магазинов и сервисов. Это не требования WCAG, и страница не нарушает WCAG, если использует другие значения.
- Основной текст около 16 px. Это размер текста по умолчанию в распространённых браузерах. Если основной текст сильно мельче, масштабу 200 % приходится делать больше работы.
- Используйте относительные единицы (
rem,em) для размеров шрифта и межстрочных интервалов, чтобы учитывался размер текста, выбранный человеком в браузере. - Межстрочный интервал 1,4–1,6 для основного текста и длина строки примерно 50–80 символов.
- Избегайте фиксированной высоты у элементов с текстом; пусть они растут.
- Не блокируйте масштабирование в метатеге viewport.
- Мелкий шрифт — осторожно. Юридические примечания, цены за единицу и подсказки в формах читают все, поэтому давайте им такой же контраст, как основному тексту.
Как проверить проблемы с размером шрифта и масштабом
- Автоматическая проверка. Наш бесплатный WCAG тестер находит низкий контраст, включая правило крупного текста, и viewport, который запрещает масштабирование. Оценить, работает ли увеличенный макет, он не может.
- Масштаб 200 %. Увеличьте страницу масштабом браузера и пройдите главную, карточку товара, корзину и оформление заказа.
- Узкое окно или масштаб 400 %. Проверьте, что текст переносится и ничего не требует горизонтальной прокрутки.
- Интервалы в тексте. Примените значения из 1.4.12 букмарклетом или инструментом интервалов в нашем расширении для браузера и ищите обрезанный текст.
Полный порядок проверки — в статье как проверить сайт на WCAG. Наши проверки — автоматическая проверка, а не полный аудит, и не юридическая консультация.
Частые вопросы
Какой минимальный размер шрифта по WCAG?
Его нет. Ни один критерий успеха WCAG 2.0, 2.1 или 2.2 не задаёт минимальный размер шрифта. Вместо этого WCAG требует, чтобы текст можно было увеличить до 200 % (1.4.4), чтобы он перестраивался на узком экране (1.4.10), выдерживал увеличенные интервалы (1.4.12) и имел достаточный контраст (1.4.3).
Какой размер шрифта считается крупным текстом в WCAG?
Не меньше 18 пунктов, то есть 24 CSS-пикселя, обычного начертания, или не меньше 14 пунктов полужирного, около 18,66 CSS-пикселя. Крупному тексту на уровне AA нужен контраст 3:1 вместо 4,5:1.
Требует ли WCAG шрифт 16px?
Нет. 16 пикселей — размер текста по умолчанию в распространённых браузерах и разумная рекомендация для основного текста, но WCAG этого не требует. Текст 16px, который нельзя увеличить, не проходит, а более мелкий текст, который хорошо масштабируется, может пройти.
Какой масштаб требует WCAG?
Текст должен увеличиваться до 200 % без потери содержимого или функций (1.4.4). Кроме того, содержимое должно перестраиваться при ширине 320 CSS-пикселей — это масштаб 400 % для окна шириной 1280 пикселей — без прокрутки в двух направлениях (1.4.10).
Что использовать для размера шрифта: px, em или rem?
WCAG не предписывает единицы. Относительные единицы rem и em помогают учитывать размер текста, который человек выставил в браузере, поэтому мы их рекомендуем, но px сам по себе не нарушение.
Разрешает ли WCAG текст с выравниванием по ширине?
На уровне AA — да. Только критерий уровня AAA 1.4.8 «Визуальное представление» требует, чтобы был способ отключить выравнивание блоков текста по ширине, потому что неравные пробелы между словами образуют «реки» пустого пространства. AAA — рекомендация, а не требование закона.