Здравствуйте! На прошлом занятии мы рассмотрели семантические цвета и пришли к важному выводу: чтобы интерфейс был по-настоящему доступным, нельзя полагаться только на цвет для передачи информации. Вы научились создавать системные цветовые палитры и заложили основу для работы с семантическими переменными в Figma.
Сегодня мы сделаем следующий шаг и превратим абстрактное понятие «доступность» в конкретный, измеримый критерий. Наша цель — научиться проверять и обеспечивать достаточный цветовой контраст по стандартам доступности (WCAG). Мы разберемся, что означают загадочные цифры вроде 4.5:1, освоим профессиональные инструменты для проверки контраста и научимся корректировать палитру так, чтобы ваши дизайны были не только эстетичными, но и читаемыми для всех без исключения пользователей. Это неотъемлемый навык для продуктового дизайнера, который отделяет любительский подход от профессионального.
Часть 1: Контраст в цифрах: разбираемся в WCAG
Ваш опыт в графическом дизайне и художественное образование дали вам отличное интуитивное чувство цвета. Теперь мы дополним эту интуицию строгой, основанной на данных системой. Стандартом в индустрии цифровых продуктов являются Web Content Accessibility Guidelines (WCAG) — Руководство по обеспечению доступности веб-контента.
В основе этих правил лежит понятие контрастности (contrast ratio). Это число, которое показывает разницу в воспринимаемой яркости (luminance) между двумя цветами — например, цветом текста и цветом фона. Оно варьируется от 1:1 (белый на белом) до 21:1 (черный на белом).
WCAG определяет несколько уровней соответствия. Общепринятым стандартом для большинства продуктов является уровень AA. Вот ключевые значения, которые вам нужно знать:
- Обычный текст: Контрастность должна быть не менее 4.5:1.
- Крупный текст: Требования мягче — не менее 3:1. Крупным считается текст размером от 18pt (или ~24px) или от 14pt (~18.7px), если он жирный (bold).
- Нетекстовые элементы: Для важных элементов интерфейса (иконок, границ полей ввода) и значимых частей графики контрастность с соседними цветами должна быть не менее 3:1.
Существуют исключения, например, для неактивных (disabled) элементов или логотипов, но эти три правила покрывают 95% вашей повседневной работы.
Давайте углубимся в детали этих требований с помощью одного из самых авторитетных ресурсов по доступности — WebAIM.
Understanding WCAG 2 Contrast and Color Requirements
Эта статья — фундаментальное руководство по требованиям контрастности. Она детально объясняет, откуда берутся эти цифры и как они применяются.
Внимательно изучите следующие разделы: "WCAG 2 'Contrast Ratio'": Прочитайте введение в понятие контрастности. Это поможет понять, что именно мы измеряем. "1.4.3 Contrast (Minimum)": Это самая важная часть. Здесь описан основной стандарт AA. Обратите особое внимание на определение крупного текста, так как это часто используемое исключение. Также изучите исключения для логотипов и неактивных элементов. "1.4.11 Non-text Contrast": Прочитайте требования к нетекстовым элементам. Это критически важно для дизайна иконок, кнопок и полей ввода.
Часть 2: Инструменты для проверки контрастности
Теперь, когда мы знаем правила, нам нужны инструменты для измерения. К счастью, вам не придется вычислять контрастность вручную. Существует множество удобных чекеров.
Онлайн-инструменты и десктопные приложения
Для быстрой проверки пары цветов отлично подходят веб-сервисы. Также есть скачиваемые приложения, которые позволяют проверить контраст в любой программе на вашем компьютере.
Видео ниже демонстрирует два таких популярных инструмента: Colour Contrast Analyser от TPGi и онлайн-чекер от WebAIM.
How to test for Color Contrast | TPGI & WebAIM | WCAG
В этом видео показан основной принцип работы с программами для проверки контраста: выбор цветов с помощью пипетки (eyedropper) и анализ результата.
Посмотрите, как автор использует инструменты: Демонстрация Colour Contrast Analyser: Обратите внимание, как используется пипетка для выбора цвета текста и фона, и как программа сразу показывает, проходит ли комбинация по стандартам AA и AAA. Коррекция цвета: Автор показывает очень полезную функцию — как, используя слайдер, можно найти близкий оттенок, который уже проходит проверку. Демонстрация WebAIM Checker: Это веб-альтернатива с похожим функционалом.
Интеграция в ваш рабочий процесс: Adobe Color и плагины для Figma
Поскольку у вас есть опыт работы с продуктами Adobe, вам будет особенно интересен инструмент для проверки доступности, встроенный в Adobe Color. Он не только проверяет контраст, но и предлагает варианты исправления.
How to Check Color Contrast for WCAG Compliance (Adobe Color)
Это видео от дизайнера с нарушениями зрения особенно ценно, так как показывает важность темы с личной стороны и подробно разбирает отличный инструмент.
Сфокусируйтесь на демонстрации инструмента Adobe Color. Автор наглядно показывает, как ввести HEX-коды цветов, как интерпретировать результаты для обычного текста, крупного текста и графики, и как использовать встроенные подсказки для корректировки палитры.
Для продуктового дизайнера самый эффективный способ — проверять контраст прямо в Figma. В комьюнити Figma есть десятки плагинов. Просто откройте раздел Plugins -> Browse plugins in Community и введите в поиске "Contrast" или "A11y".
Рекомендуемые плагины:
- Stark: Один из самых мощных инструментов для проверки доступности, включает не только контраст, но и симулятор разных видов дальтонизма.
- Contrast: Простой и удобный плагин, который делает ровно одну вещь, но делает ее хорошо.
- A11y - Color Contrast Checker: Автоматически сканирует выбранный фрейм и показывает все текстовые слои с их контрастностью.
Установите один из них прямо сейчас, он понадобится нам для практического задания.
Часть 3: Практика: делаем цвета доступными
Теория и инструменты — это хорошо, но главное — применение на практике. Давайте вернемся к семантическим цветам, которые вы создавали на прошлом уроке, и проверим их на доступность.
Сценарий: Представьте, вы создали уведомление об успехе: светло-зеленый фон и белый текст. Выглядит свежо, но читаемо ли?
- Проверка. Возьмите HEX-коды вашего фона и текста. Вставьте их в онлайн-чекер или используйте плагин в Figma.
- Анализ. Скорее всего, для обычного текста контраст будет ниже требуемого 4.5:1.
- Коррекция. Что делать?
- Самый простой способ: Сделать фон темнее или текст темнее. Используйте слайдеры в инструментах (как было показано в видео), чтобы найти ближайший проходной оттенок.
- Альтернатива: Если текст достаточно крупный (например, заголовок "Успех!"), возможно, он пройдет по менее строгим требованиям для крупного текста (3:1).
- Радикальный подход: Инвертировать цвета. Например, использовать очень светлый зеленый фон (#EBFBFA) с темно-зеленым текстом (#004D40).
Упражнение (15 минут)
Откройте ваш рабочий файл Figma с палитрой.
-
Создайте несколько простых макетов для демонстрации семантических цветов:
- Success: Уведомление (баннер) с текстом "Ваш профиль сохранен".
- Error: Поле ввода с красной рамкой и подписью "Неверный пароль".
- Warning: Желтый информационный блок с иконкой и текстом "Срок действия подписки истекает через 3 дня".
-
Используя установленный плагин для проверки контраста (или онлайн-чекер), проверьте все цветовые пары:
- Текст на цветном фоне баннера.
- Текст ошибки на белом/сером фоне страницы.
- Цвет рамки поля ввода относительно фона поля (должен быть >= 3:1).
- Цвет иконки на желтом фоне (>= 3:1).
-
Если какие-то комбинации не проходят проверку уровня AA, вернитесь к своей палитре в Figma (где у вас организованы стили или переменные) и скорректируйте оттенки. Ваша задача — добиться того, чтобы все основные комбинации в вашей системе были доступны по умолчанию.
Это упражнение — имитация реальной работы над дизайн-системой. Создавая доступную палитру один раз, вы избавляете себя и свою команду от проблем в будущем.
Заключение
Сегодня мы перешли от интуитивного к системному подходу в работе с цветом. Вы вооружились знаниями и инструментами, чтобы создавать не просто красивые, а по-настоящему инклюзивные и удобные продукты.
Ключевые выводы:
- Магические числа WCAG AA: Запомните три основных порога: 4.5:1 для обычного текста, 3:1 для крупного текста и 3:1 для значимых UI-элементов.
- Инструменты — ваши лучшие друзья: Встройте проверку контрастности в свой рабочий процесс с помощью онлайн-чекеров и, что важнее, плагинов Figma. Делайте это регулярно, а не в конце проекта.
- Проверка — это только начало: Главное — уметь исправлять проблемы. Самый надежный способ — корректировать яркость цветов, сохраняя при этом основной тон.
Обеспечение контрастности — это не ограничение для творчества, а профессиональный стандарт, который демонстрирует ваше уважение ко всем пользователям.
Что дальше?
Мы завершили большой блок, посвященный цвету, — от сбора референсов до создания системной и доступной палитры. Теперь, когда у нас есть надежный фундамент в виде стилей, мы готовы перейти к созданию самих «кирпичиков» интерфейса. В следующем модуле мы погрузимся в продвинутую работу в Figma, и первый урок будет посвящен принципу атомарного дизайна — философии, которая лежит в основе всех современных дизайн-систем. Мы узнаем, как мыслить категориями атомов, молекул и организмов, чтобы строить сложные интерфейсы из простых, переиспользуемых компонентов.