Доступность
в ярких интерфейсах
Как сохранить визуальную эстетику градиентов и неоновых акцентов, не жертвуя WCAG 2.1 стандартами. Руководство по контрасту и семантике для финтех-продуктов.
Золотой стандарт контраста
В мире Web3 и финтеха яркие градиенты — это норма, а не исключение. Но как сделать так, чтобы текст оставался читаемым?
Мы в Vexura придерживаемся строгого правила: контраст не должен зависеть от фона. Для основного текста (до 18pt) мы требуем коэффициент контрастности не менее 4.5:1 (уровень AA). Для крупного текста (свыше 18pt или 14pt жирным) — 3:1.
Для декоративных элементов и интерфейсных компонентов (границы, иконки) минимальный порог составляет 3:1. Это позволяет использовать наши фирменные градиенты --grad-main для кнопок и активных состояний, гарантируя, что белая надпись на них всегда будет читаться без напряжения для глаз.
Избегайте размещения чистого белого текста на светлых участках градиентов. Используйте подложки (backdrop blur) или затемняющие слои, чтобы изолировать контент от фоновой палитры.
Инструменты тестирования
Используйте эти инструменты на этапе верстки и финального QA, чтобы убедиться в соответствии стандартам.
BrowserStack Accessibility
Автоматизированная проверка интерфейсов на реальных устройствах. Позволяет выявить нарушения контраста в темных и светлых темах одновременно.
Chrome DevTools Lighthouse
Встроенный аудит производительности и доступности. Проверяет атрибуты alt у изображений и правильную структуру заголовков (H1-H6).
axe DevTools
Плагин для глубокого анализа DOM-дерева. Идеален для проверки интерактивных компонентов Vexura на соответствие ARIA-стандартам.
Примеры кода
Семантические кнопки
Используйте нативные элементы там, где это возможно. Это обеспечивает доступность с клавиатуры (Tab/Enter) «из коробки».
Отправить транзакцию
</button>
ARIA-атрибуты
Для кастомных компонентов (например, модальных окон) используйте ARIA для описания состояния.
aria-modal="true"
aria-labelledby="modal-title">
...
</div>
Чек-лист для дизайнеров
Проверка цветовой слепоты
Никогда не передавайте информацию только цветом (например, "красная линия" для ошибок). Всегда дублируйте статус иконкой или текстом. Используйте симуляторы протанопии и дейтеранопии.
Зоны клика и фокус
Убедитесь, что интерактивные элементы имеют минимальный размер 44x44px для удобства на тач-устройствах. Визуализируйте состояние :focus-visible, не удаляя outline глобально.
Шрифтовая пара
Используйте шрифты с высокой разборчивостью (как Manrope). Избегайте слишком тонких начертаний (light/thin) для основного текста — они теряются на градиентных фонах.
Анимации
Уважайте системные настройки пользователя. Используйте медиа-запрос @media (prefers-reduced-motion: reduce), чтобы отключать сложные переходы для пользователей, склонных к вестибулярным расстройствам.