Гайд по работе со встроенным инструментом контрастности в Figma 👀📑

2025-04-02T11:45:22.169Z

Отличные новости! Теперь в Figma есть встроенный инструмент проверки контраста. Больше никаких лишних плагинов, всё работает прямо "из коробки"! Давай разберёмся, как им пользоваться. 👇

📌 Зачем это нужно?

Контрастность — важная штука. Чем лучше виден текст и элементы интерфейса, тем удобнее всем пользователям, особенно людям с нарушениями зрения. Новый инструмент в Figma автоматически проверяет контраст в реальном времени и показывает его прямо в цветовом выборе.

🔧 Как пользоваться?

1️⃣ Проверка контраста

Выбираешь слой с текстом или элементом.
В верхнем левом углу цветового выбора появляется контрастное соотношение.

2️⃣ Какие есть уровни доступности? (по стандарту WCAG 2.2)

AA – базовый уровень (по умолчанию в Figma, подходит для большинства проектов).
AAA – суперстрогий стандарт для особо требовательных задач.
Крупный текст – от 24px или жирный от 19px.
Обычный текст – меньше 24px или жирный меньше 19px.
Графические элементы – иконки, кнопки и т. д. (AAA тут не применяется).

3️⃣ Что значат индикаторы?

В правом верхнем углу видно AA или AAA с иконкой ✅/❌ (проходит или не проходит).
На цветовом спектре есть линия, которая показывает границу прохождения теста.
Заштрихованная зона — это "зона провала" ❌. Если цвет попал туда, можно просто нажать на индикатор и Figma сама подберёт подходящий оттенок.

4️⃣ Дополнительные фичи

Кликни на контрастное соотношение, чтобы узнать больше о цветах.
Если фон сложный (например, градиент или прозрачность), Figma постарается рассчитать его, но в некоторых случаях это может быть неточно.