# Проверка контраста по WCAG в Figma и Canva
URL: https://pandus.online/ru/kontrast-figma-canva
Updated: 2026-10-14

Как проверить цветовой контраст по WCAG в Figma и Canva встроенными инструментами, что они пропускают и как проверить всю фирменную палитру до запуска.

И **Figma**, и **Canva** умеют проверять цветовой контраст прямо в файле дизайна. В Figma откройте цвет в палитре выбора цвета и переключитесь в **режим доступности** (accessibility view): он показывает соотношение между слоем и его фоном и проходит ли оно WCAG AA и AAA. В 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 о [контрасте (минимальном)](https://pandus.online/ru/wcag/1-4-3-contrast-minimum) и [контрасте нетекстовых элементов](https://pandus.online/ru/wcag/1-4-11-non-text-contrast).

## Контраст в Figma

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

## Контраст в Canva

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

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

- **Состояния.** Состояния наведения, фокуса, неактивное и состояние ошибки часто нарисованы в отдельных фреймах или не нарисованы вовсе. Проверьте, что у индикатора фокуса контраст 3:1 с окружением.
- **Текст поверх изображений и градиентов.** Соотношение меняется по всему изображению; проверьте самую светлую и самую тёмную точку за текстом.
- **Всю палитру.** Цвет, который работает на белом, может не пройти проверку на фирменном светло-сером. Проверьте все пары сразу нашей [проверкой контраста палитры](https://pandus.online/ru/proverka-kontrasta-palitry).
- **Размер шрифта.** Считается ли текст «крупным», зависит от его реального размера в браузере; см. [размер шрифта и WCAG](https://pandus.online/ru/razmer-shrifta-wcag).
- **Всё, что не связано с цветом.** Подписи, заголовки, порядок перехода с клавиатуры и альтернативный текст определяются, когда дизайн воплощают в коде.

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

1. Проверяйте отдельные пары нашей [проверкой контраста](https://pandus.online/ru/proverka-kontrasta-tsvetov): она также предлагает ближайший цвет, который проходит проверку.
2. Проверьте фирменную палитру [проверкой контраста палитры](https://pandus.online/ru/proverka-kontrasta-palitry) и запишите подходящие пары в дизайн-систему.
3. Когда страница свёрстана, запустите [проверку по WCAG](https://pandus.online/ru/wcag-tester) на тестовой или живой странице: она измеряет контраст настоящего текста на настоящем фоне.
4. Интересует новый метод расчёта контраста? Читайте [APCA и WCAG](https://pandus.online/ru/apca-ili-wcag-kontrast); 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

Q: Есть ли в Figma проверка контраста?
A: Да. В палитре выбора цвета есть режим доступности (accessibility view), который показывает соотношение контраста между выбранным слоем и его фоном и отмечает результаты AA и AAA для обычного текста, крупного текста и графики. У Figma есть также бесплатная веб-проверка контраста.

Q: Есть ли в Canva проверка доступности?
A: Да. В дизайне, который вы можете редактировать, откройте «Файл», затем «Специальные возможности», затем проверку доступности дизайна (File → Accessibility → Check design accessibility). Canva отмечает проблемы, например с цветовым контрастом, и помогает с альтернативным текстом, заголовками и порядком чтения; при этом Canva говорит, что это не гарантия доступности.

Q: Какое соотношение контраста требует WCAG?
A: На уровне AA: 4,5:1 для обычного текста, 3:1 для крупного текста (около 24 px или 18,5 px полужирным) и 3:1 для иконок, рамок полей ввода и других компонентов интерфейса и графики, которые несут смысл.

Q: Может ли Pandus проверить мой файл Figma или Canva?
A: Нет. Pandus проверяет веб-страницы, когда они уже опубликованы или находятся на тестовом сайте (staging). Для файлов дизайна используйте встроенные инструменты, нашу проверку контраста для отдельных пар и проверку палитры для всех фирменных цветов.