Статья
Извлечение доступной цветовой палитры из изображения
Фотография или брендовый актив часто содержат зачаток полной цветовой системы. Извлечение этого зачатка, формирование из него пригодной палитры и последующая проверка по стандартам доступности требуют трёх отдельных шагов. Эта статья охватывает каждый из них по порядку: как работает извлечение палитры «под капотом», как выбрать и скорректировать цвета для практического использования, как проверить контраст по порогам WCAG и как выявить пары, которые сливаются для людей с нарушениями цветового зрения.
Как извлекается палитра: выборка пикселей и квантование цвета
Каждое цифровое изображение, это сетка пикселей, каждый из которых несёт цветовое значение в пространстве вроде RGB. Экстрактор палитры не проверяет каждый пиксель по отдельности: фотография на 2 мегапикселя содержит 2 миллиона точек данных, обработка которых была бы медленной и возвращала тысячи слегка отличающихся оттенков вместо полезного набора. Вместо этого инструмент выбирает пиксели из сетки с регулярным интервалом, собирая репрезентативное подмножество. Затем это подмножество подаётся в алгоритм квантования цвета. Наиболее распространённый подход группирует похожие цвета с помощью метода кластеризации, иногда называемого разбиением по медианному срезу или методом k-means. Алгоритм помещает каждый выбранный пиксель в одну из фиксированного числа корзин на основе сходства цветов, затем вычисляет средний цвет каждой корзины. Результатом является небольшой список, обычно от 4 до 16 цветов, которые вместе отражают доминирующие визуальные тона изображения. Цвета, встречающиеся только в небольших изолированных областях, могут быть пропущены, это ожидаемое поведение, а не недостаток.
От необработанных доминирующих цветов к пригодной палитре
Необработанный результат экстрактора палитры, это список цветов, отсортированных по частоте, но частота сама по себе не создаёт палитру. Фотография леса вернёт несколько оттенков зелёного, которые слишком похожи для использования в интерфейсе в качестве отдельных акцентов. Практическая работа, это выбор и корректировка. Начните с определения одного цвета как основного: наиболее выразительного и наименее нейтрального. Из оставшихся цветов выберите не более двух, контрастирующих с основным и друг с другом. Это станут вашими акцентами. Всё остальное, включая ненасыщенные тона, которые экстрактор часто возвращает из теней и средних тонов, может служить нейтральными цветами для фонов и границ. Определив эту приблизительную структуру, вам почти наверняка потребуется откорректировать отдельные значения. Инструмент color-converter позволяет исследовать каждый цвет в hex, RGB и HSL. HSL особенно полезен здесь: вы можете удерживать тон постоянным и смещать светлоту или насыщенность, чтобы создать более плотную или широкую группу, не выходя за пределы той же цветовой семьи.
Проверка контраста: пороги WCAG для читаемого текста
Как только у вас есть кандидаты на цвета текста и фона, необходимо проверить, читаема ли их комбинация. Руководство по обеспечению доступности веб-контента (WCAG) определяет коэффициент контраста для этой цели. Коэффициент сравнивает относительную яркость двух цветов: значение 1:1 означает отсутствие контраста (одинаковый цвет на одинаковом цвете), а 21:1, максимум (чёрный на белом). WCAG 2.1 уровень AA требует коэффициент не менее 4.5:1 для основного текста нормального размера и 3:1 для крупного текста (18pt или 14pt жирный). Уровень AAA устанавливает более высокие пороги 7:1 и 4.5:1 соответственно. Вычислять яркость вручную не нужно. Ключевое понимание: пара цветов, которая выглядит хорошо для вас при хорошем освещении, может не достигать 4.5:1 на экране, и именно для этого случая существует руководство. После извлечения и корректировки цветов проверьте каждую пару текст-на-фоне, которую планируете использовать. Средне-серый, хорошо читающийся на белом, может полностью провалиться на светло-бежевом фоне из вашей извлечённой палитры.
Цветовая слепота: моделирование восприятия пар людьми с нарушениями цветового зрения
Примерно каждый 12-й мужчина и каждая 200-я женщина имеют ту или иную форму нарушения цветового зрения. Наиболее распространённый тип, дейтераноп��я (сниженная чувствительность к зелёному), затем протанопия (сниженная чувствительность к красному). Тританопия (сниженная чувствительность к сине-жёлтому) встречается реже. При каждом типе зрительная система отображает определённые длины волн в один и тот же воспринимаемый цвет, который люди с нормальным зрением видят как отдельные. Практическая проблема для палитры: два цвета, которые чётко различаются при нормальном зрении, могут сливаться в один тон для человека с нарушением цветового зрения, делая их бесполезными для передачи различия, например при использовании только красного и зелёного для обозначения успеха и ошибки. Запуск симуляции цветовой слепоты показывает, как выглядит палитра при сжатии соответствующих каналов. Пары, которые сливаются в почти идентичный серый или коричневый,, это те, что стоит пересмотреть: либо увеличьте разницу в светлоте между ними, чтобы контраст сохранялся даже без различия оттенков, либо добавьте дополнительный сигнал (форму, метку, паттерн), чтобы цвет не был единственным индикатором.
Работа локально: color-palette, color-blindness и color-converter
Все три шага, описанные в этой статье, можно выполнить, не отправляя изображение или фирменные цвета на какой-либо сервер. Инструмент color-palette работает полностью в браузере: вы перетаскиваете изображение, он выбирает пиксели локально и возвращает доминирующие цвета в виде hex-значений. Файл не передаётся. Инструмент color-converter принимает hex-код и показывает тот же цвет в RGB и HSL, чтобы вы могли вносить целенаправленные корректировки в светлоту или насыщенность, оставаясь в той же тоновой семье. Hex-значения и преобразованные значения существуют только на странице. Инструмент color-blindness работает наоборот: вы загружаете изображение, и он строит симуляции дейтеранопии, протанопии и тританопии этого изображения, вычисленные в браузере. Чтобы проверить палитру, а не фото, сначала экспортируйте или сделайте скриншот образцов цвета в виде изображения, а затем загрузите его в симулятор. Используя три инструмента последовательно: извлечь из изображения, скорректировать в color-converter, затем экспортировать изображение с образцами и проверить его в color-blindness, вы охватываете полный рабочий процесс, описанный выше. Ваше изображение остаётся на вашем устройстве на протяжении всего процесса, что важно, если исходная фотография содержит неопубликованный брендинг или нераскрытый облик клиента.
Инструменты из этой статьи
- Извлечение цветовой палитрыИзвлекайте доминирующие цвета из изображения в виде образцов HEX. Копируйте любой цвет. Без загрузки.
- Симулятор дальтонизмаСимулируйте протанопию, дейтеранопию, тританопию и ахроматопсию на изображении. Без загрузки.
- Конвертер цветовКонвертируйте цвета между HEX, RGB, HSL, HSV и CMYK. Включён проверщик контраста WCAG. Без загрузки.
- Генератор цветовых схемСоздавайте комплементарные, аналоговые, триадные, тетрадные и монохромные палитры из базового цвета. Без загрузки.
Частые вопросы
Сколько цветов обычно возвращает экстрактор палитры?
Большинство инструментов по умолчанию возвращают от 5 до 16 цветов, хотя многие позволяют задать количество. Меньшее количество цветов означает, что алгоритм должен группировать больше пикселей вместе, что может объединить чёткие, но похожие тона. Большее количество цветов может давать почти дублирующиеся цвета, которые трудно использовать по-разному. Для палитры интерфейса от 6 до 8 цветов обычно является хорошей отправной точкой.
Может ли палитра, извлечённая из изображения, автоматически соответствовать требованиям контраста WCAG?
Не автоматически. Доминирующие цвета на фотографии часто являются средними тонами с умеренной яркостью, которые, как правило, дают коэффициенты в диапазоне от 2:1 до 3:1 друг относительно друга. Достижение порога 4.5:1 для основного текста обычно требует осветления фоновых значений или затемнения значений текста сверх того, что даёт необработанное извлечение. Извлечение даёт отправную точку, а проверка контраста показывает, какая корректировка необходима.
Учитывает ли коэффициент контраста WCAG цветовую слепоту?
Частично. Формула яркости WCAG основана на относительной яркости, а не на оттенке, поэтому пара с высоким контрастом, отвечающая требованию 4.5:1, как правило, останется различимой даже для людей с нарушением цветового зрения, поскольку разница в светлоте сохраняется. Однако два цвета с похожей яркостью, но разными оттенками, например красный и зелёный одинаковой яркости, могут пройти проверку контраста на основе яркости, оставаясь при этом неразличимыми для людей с дейтеранопией. Запуск симуляции цветовой слепоты, правильный способ проверить дифференциацию на уровне оттенков отдельно от коэффициента контраста.