Перевірка контрасту за WCAG у Figma і Canva

І Figma, і Canva вміють перевіряти контраст кольорів просто у файлі дизайну. У Figma відкрийте колір у палітрі вибору кольору й перейдіть у режим доступності: він показує коефіцієнт контрасту між шаром і його тлом і те, чи проходить він WCAG AA та AAA.

Оновлено 14 жовтня 2026 · 4 хв читання · Як ми пишемо й перевіряємо наші посібники

У Canva виберіть Файл → Доступність → Перевірити доступність дизайну (File → Accessibility → Check design accessibility). Ці перевірки рано виявляють низький контраст, але дивляться на одну пару кольорів за раз і пропускають стани, як-от наведення й фокус, тож перевіряйте також усю палітру. Факти взято з довідкових сторінок Figma і Canva, перевірено 14 жовтня 2026 року.

Порогові значення контрасту WCAG

Що	Рівень AA	Рівень AAA
Звичайний текст	4,5:1	7:1
Великий текст (приблизно 24 px звичайним або 18,5 px жирним)	3:1	4,5:1
Іконки, межі полів введення, індикатори фокуса та інші елементи інтерфейсу (WCAG 1.4.11)	3:1	—

Подробиці й приклади — на сторінках WCAG про мінімальний контраст і контраст нетекстових елементів.

Контраст у Figma

Де: виберіть шар, відкрийте його колір у палітрі вибору кольору й увімкніть режим доступності. Вибраний шар завжди вважається переднім планом.
Що показує: коефіцієнт від 1:1 до 21:1 і результати AA та AAA для звичайного тексту, великого тексту чи графіки; AAA стосується лише тексту.
Коли не проходить: поруч з AA чи AAA з’являється значок попередження. Якщо його вибрати, колір зміниться на найближче значення, яке проходить.
Обмеження: коефіцієнт порівнює яскравість двох кольорів, тож градієнти, зображення під текстом і прозорі шари треба перевірити окремо. Також Figma пропонує безкоштовну вебперевірку контрасту для двох шістнадцяткових кодів.

Контраст у Canva

Де: у дизайні, який ви можете редагувати, Файл → Доступність → Перевірити доступність дизайну (File → Accessibility → Check design accessibility). Якщо у вас є лише доступ для коментування, перевірка не з’являється.
Що охоплює: контраст кольорів та інші поширені проблеми; засоби доступності Canva також допомагають додати альтернативний текст до зображень, структурувати заголовки й упорядкувати порядок читання.
Обмеження: сама Canva зазначає, що перевірка не є гарантією доступності. Дизайни, експортовані в PDF, потребують окремої перевірки; див. як перевірити доступність PDF.

Чого не помічають засоби дизайну

Стани. Стани наведення, фокуса, вимкнений стан і стан помилки часто намальовано на окремих фреймах або не намальовано зовсім. Перевірте, чи індикатор фокуса має контраст 3:1 щодо оточення.
Текст поверх зображень і градієнтів. Коефіцієнт змінюється в межах зображення; перевірте найсвітліше й найтемніше місце під текстом.
Палітру загалом. Колір, який добре виглядає на білому, може не пройти на світло-сірому кольорі вашого бренду. Перевірте всі пари разом нашою перевіркою контрасту палітри.
Розмір шрифту. Чи вважається текст «великим», залежить від його реального розміру в браузері; див. розмір шрифту і WCAG.
Усе, що не стосується кольору. Підписи, заголовки, порядок переходу з клавіатури й альтернативний текст визначаються під час верстки дизайну.

Від макета до живого сайту

Перевіряйте окремі пари нашою перевіркою контрасту, яка також пропонує найближчий колір, що проходить.
Перевірте палітру бренду перевіркою контрасту палітри і запишіть пари, що проходять, у дизайн-систему.
Коли сторінку зверстано, запустіть перевірку WCAG на тестовій чи живій сторінці: вона вимірює контраст справжнього тексту на справжньому тлі.
Цікавить новіший метод розрахунку контрасту? Прочитайте APCA і WCAG; WCAG 2.2 досі використовує коефіцієнт, наведений вище.

Pandus перевіряє вебсторінки, а не файли дизайну. Це автоматична перевірка, а не повний аудит.

Часті запитання

Чи є у Figma перевірка контрасту?

Так. Палітра вибору кольору має режим доступності, який показує коефіцієнт контрасту між вибраним шаром і його тлом і позначає результати AA та AAA для звичайного тексту, великого тексту й графіки. Також Figma має безкоштовну вебперевірку контрасту.

Чи є в Canva перевірка доступності?

Так. У дизайні, який ви можете редагувати, відкрийте «Файл», потім «Доступність», потім «Перевірити доступність дизайну» (File → Accessibility → Check design accessibility). Canva позначає проблеми, як-от контраст кольорів, і допомагає з альтернативним текстом, заголовками й порядком читання; сама Canva зазначає, що це не є гарантією доступності.

Який коефіцієнт контрасту вимагає WCAG?

На рівні AA: 4,5:1 для звичайного тексту, 3:1 для великого тексту (приблизно 24 px або 18,5 px жирним) і 3:1 для іконок, меж полів введення та інших компонентів інтерфейсу й графіки, що передають зміст.

Чи може Pandus перевірити мій файл Figma чи Canva?

Ні. Pandus перевіряє вебсторінки, коли вони вже опубліковані або розміщені на тестовому сайті. Для файлів дизайну використовуйте вбудовані засоби, нашу перевірку контрасту для окремих пар і перевірку палітри для всіх кольорів бренду.

Джерела

Довідковий центр Figma, застосування кольорів за допомогою палітри вибору кольору (режим доступності): https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker
Figma, перевірка контрасту кольорів: https://www.figma.com/color-contrast-checker/
Довідковий центр Canva, використання засобів доступності дизайну: https://www.canva.com/help/using-design-accessibility/
W3C, Understanding WCAG 2.2 — 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
W3C, Understanding WCAG 2.2 — 1.4.11 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html