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

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

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

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

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

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

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

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

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

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

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

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