Какой способ проверки цвета кнопок в мобильном приложении удобен

Что проверяют

Есть ли у вас метод, а не «посмотрю, похоже или нет». Цвет на экране зависит от матрицы, яркости и темы, поэтому интервьюер ждёт, что вы сверяете значение цвета, а не своё впечатление. Следом часто спрашивают про состояния кнопки и тёмную тему.

Как отвечать

Удобнее всего сравнивать не картинки, а значения:

• эталон в Figma: в Dev Mode или инспекторе видно hex и, если дизайн-система настроена, имя токена или переменной. Имя токена полезнее hex: его можно сверить с кодом;
• инспектор разметки: Layout Inspector в Android Studio и Debug View Hierarchy в Xcode показывают фактические свойства элемента, включая цвет фона. Это точнее пипетки;
• скриншот и пипетка: быстрый вариант, если инспектора нет. Снимать через adb exec-out screencap -p или xcrun simctl io booted screenshot, без сжатия в JPEG, и помнить, что у картинки может быть свой цветовой профиль;
• контраст: по WCAG текст на кнопке требует 4.5:1, крупный текст и границы элементов управления 3:1. На Android помогает Accessibility Scanner, в Xcode аудит в Accessibility Inspector;
• скриншотные тесты: для регресса Paparazzi или Roborazzi на Android и swift-snapshot-testing на iOS сравнивают рендер с эталоном и ловят случайную смену цвета.

Проверяйте все состояния: обычное, нажатое, неактивное, в фокусе, плюс тёмную тему. На Android 12 и новее уточните у команды про динамические цвета Material You: если они включены, цвет кнопки зависит от обоев, и сверять его с hex из макета бессмысленно.

Где спотыкаются

Проверяют на глаз на одном устройстве. Разные экраны показывают один и тот же hex по-разному, так что расхождение «на вид» ещё не баг.

Смотрят только обычное состояние. Чаще всего ломаются как раз неактивная кнопка и тёмная тема, где цвет забыли вынести в токен.

Пишут в Appium проверку цвета конкретного пикселя. Сглаживание, скругления и градиенты делают такой тест нестабильным, для этой задачи есть скриншотные тесты с допуском.