Многие дизайнеры выбирают элегантный светло-серый шрифт на белом фоне или изящные пастельные кнопки. Это выглядит стильно в Figma, пока проект не попадает в реальный мир. Там пользователя ждут блики на солнце, плохие мониторы или особенности зрения (например, дальтонизм или возрастная дальнозоркость).
Здесь в игру вступают стандарты WCAG (Web Content Accessibility Guidelines). Разберемся, как сделать интерфейс доступным, не убив при этом красоту.
1. Что такое WCAG и уровни контрастности?
WCAG — это международный стандарт доступности веб-контента. В части цвета нас интересуют два уровня прохождения теста:
- Уровень AA (Минимальный стандарт): Коэффициент контрастности должен быть не менее 4.5:1 для обычного текста и 3:1 для крупного текста (от 18pt или 14pt жирного).
- Уровень AAA (Золотой стандарт): Коэффициент не менее 7:1 для обычного текста и 4.5:1 для крупного. Этот уровень обязателен для специализированных сервисов (медицина, госуслуги).
2. Почему просто красиво — это плохой UX?
Когда контрастность падает ниже нормы, вы создаете когнитивную нагрузку.
- Проблема читаемости: Пользователь тратит энергию на то, чтобы «разглядеть» буквы, а не на то, чтобы понять смысл.
- Ситуативная доступность: Человек с отличным зрением, пытаясь заказать ваш продукт на ходу под ярким солнцем, просто не увидит серую кнопку на светлом фоне.
- Особенности зрения: Около 8% мужчин в мире страдают той или иной формой цветослепоты (дальтонизма). Если вы выделяете ошибку в поле ввода только красным цветом без иконки или текста, такой пользователь ее не заметит.
3. Как проверять контрастность в процессе работы?
Не нужно считать коэффициенты в уме. Используйте инструменты, которые встроены в ваш рабочий процесс:
- Плагины для Figma: Stark, Contrast или A11y - Focus Orderer. Они в один клик показывают, проходит ли выбранная пара «фон-текст» проверку AA или AAA.
- Браузерные инспекторы: В Chrome DevTools при наведении на цветовой код в коде страницы браузер автоматически показывает текущий коэффициент контрастности.
- Онлайн-сервисы: Adobe Color (вкладка Accessibility) или WebAIM Contrast Checker.
4. Практические советы для дизайнера
- Не полагайтесь только на цвет. Если вы проектируете графики или важные уведомления, добавляйте паттерны, подписи или иконки. Цвет — вспомогательный элемент, а не единственный носитель смысла.
- Проверяйте серый на белом. Самая частая ошибка — использование #999999 для второстепенного текста. Он часто не проходит даже уровень AA. Попробуйте сделать серый чуть темнее или добавить в него оттенок основного цвета бренда для «чистоты» палитры.
- Темная тема — это отдельная история. В темном режиме высокий контраст (чисто белый на чисто черном) может «резать» глаза (эффект ореола). Старайтесь использовать темно-серый фон и слегка приглушенный белый текст.
5. Как аргументировать это заказчику?
Если клиент просит сделать шрифт «понежнее», используйте бизнес-аргументы:
«Повышая контрастность до стандарта AA, мы расширяем нашу аудиторию минимум на 10–15% (люди с особенностями зрения, пожилые, пользователи с дешевыми экранами). Это напрямую влияет на конверсию и снижает количество брошенных корзин».
Резюме
Доступность — это не ограничение творчества, а вызов вашему мастерству. Хороший дизайнер умеет сочетать трендовую палитру с функциональностью. Помните: дизайн, который нельзя прочитать — это не дизайн, а картинка.
