Проверка контраста по WCAG в Figma и Canva

И Figma, и Canva умеют проверять цветовой контраст прямо в файле дизайна. В Figma откройте цвет в палитре выбора цвета и переключитесь в режим доступности (accessibility view): он показывает соотношение между слоем и его фоном и проходит ли оно 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

Где: выделите слой, откройте его цвет в палитре выбора цвета и включите режим доступности (accessibility view). Выбранный слой всегда считается передним планом.
Что показывает: соотношение от 1:1 до 21:1 и результаты AA и AAA для обычного текста, крупного текста или графики; AAA относится только к тексту.
Если проверка не пройдена: рядом с AA или AAA появляется значок предупреждения. Если выбрать его, цвет сдвинется к ближайшему значению, которое проходит проверку.
Ограничения: соотношение сравнивает яркость двух цветов, поэтому градиенты, изображения за текстом и прозрачные слои нужно проверять отдельно. Figma также предлагает бесплатную веб-проверку контраста для двух hex-кодов.

Контраст в Canva

Где: в дизайне, который вы можете редактировать, Файл → Специальные возможности → Проверить доступность дизайна (File → Accessibility → Check design accessibility). Если у вас есть только право комментирования, проверка не появляется.
Что охватывает: цветовой контраст и другие частые проблемы; инструменты доступности Canva также помогают добавить альтернативный текст к изображениям, выстроить заголовки и задать порядок чтения.
Ограничения: сама Canva говорит, что проверка не гарантирует доступность. Дизайны, экспортированные в PDF, нужно проверять отдельно; см. как проверить доступность PDF.

Чего не замечают инструменты дизайна

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

От макета к живому сайту

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

Pandus проверяет веб-страницы, а не файлы дизайна. Это автоматическая проверка, а не полный аудит.

Частые вопросы

Есть ли в Figma проверка контраста?

Да. В палитре выбора цвета есть режим доступности (accessibility view), который показывает соотношение контраста между выбранным слоем и его фоном и отмечает результаты 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 проверяет веб-страницы, когда они уже опубликованы или находятся на тестовом сайте (staging). Для файлов дизайна используйте встроенные инструменты, нашу проверку контраста для отдельных пар и проверку палитры для всех фирменных цветов.

Источники

Справочный центр Figma, Apply paints with the color picker (режим доступности): https://help.figma.com/hc/en-us/articles/360041003774-Apply-paints-with-the-color-picker
Figma, Color Contrast Checker: https://www.figma.com/color-contrast-checker/
Справочный центр Canva, Using design accessibility: 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