Розмір шрифту за WCAG: що настанови вимагають, а що ні

Оновлено 14 жовтня 2026 · 10 хв читання

Люди шукають «мінімальний розмір шрифту 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 pt (24 px) звичайним або 14 pt (приблизно 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-пікселів — це те саме, що збільшити вікно шириною 1280 пікселів до 400 %, — без прокрутки у двох напрямках. Довгий текст має переноситися; щоб прочитати рядок, не повинна бути потрібна горизонтальна прокрутка. Винятки є для вмісту, якому потрібне двовимірне розміщення, як-от мапи, таблиці даних і складні діаграми.

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 font checker» не може схвалити шрифт, бо переліку дозволених шрифтів немає. Автоматична перевірка може інше — і це робить наш WCAG тестер: перевіряє контраст кожного тексту за правилом великого тексту та позначає viewport, який блокує збільшення. Довжину рядка, вирівнювання за шириною і поведінку тексту за 200 % має оглянути людина.

Як перевірити проблеми з розміром шрифту і збільшенням

Автоматична перевірка. Наш безкоштовний 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 — це рекомендація, а не юридична вимога.

Джерела

W3C, WCAG 2.2 (1.4.3, 1.4.4, 1.4.10, 1.4.12 і визначення великого тексту): https://www.w3.org/TR/WCAG22/
W3C, Understanding 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
W3C, Understanding 1.4.8 Visual Presentation: https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html
W3C, Understanding 1.3.1 Info and Relationships: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html