В данной статье мы рассмотрим недостатки уже существующих инструментов, созданных для подбора цветовых палитр, а также расскажем о новом решении, плагине для Figma «HCL Easy» который позволит быстро и эффективно подбирать расширенные цветовые палитры, отвечающие требованиям по контрастности и особенностям цветовосприятия человека.
Ссылки:
- Лендинг — http://hcleasy.com
- Плагин Figma — https://www.figma.com/community/plugin/926166109013752444/HCL-Easy
Создатели HCL Easy:
Кир Дергачев – https://www.facebook.com/kirdergachev
- Алексей Шайхелисламов – https://www.facebook.com/Dlefender/
Потребность в доступности цифровых продуктов
Цветовой контраст играет ключевую роль в доступности восприятия визуального контента, в особенности для людей с нарушениями цветовосприятия. Также необходимо учитывать те ситуации, когда уровень внешнего освещения недостаточно высок или используются устаревшие экраны.
Пример задачи
Давайте представим следующую ситуацию — нам необходимо составить цветовую палитру для визуализации графиков и карт местностей, при этом она должна выглядеть гармоничной для восприятия человеческим глазом.
Нам необходимо подобрать 12 цветов и 10 оттенков для каждого цвета. В итоге получается 120 оттенков. В случае, если необходимо разработать версию для темной темы, количество оттенков увеличивается в два раза.
При разработке палитры и выбора цветов и их оттенков мы должны принять во внимание следующее:
- Соответствие подобранных оттенков цветовосприятию человека
- Все виды нарушения цветовосприятия
- Установленные стандарты контрастности
Примеры решения подобной задачи другими компаниями:
Конечно же, в первую очередь мы провели оценку уже существующих решений и пришли к выводу, что на рынке нет инструмента, который позволил бы обеспечить подбор такого количества цветов и оттенков, и главным образом это связано с тем, что большинство инструментов используют цветовое пространство sRGB и его производные, которые не адаптированы для особенностей восприятия цветов человеческим глазом. Помимо этого, существующие инструменты не дают возможности в режиме реального времени проверять цвета палитры на предмет их доступности для восприятия.
Главные недостатки существующих решений. RGB vc HCL (CIALab)
Все стандартные инструменты для создания дизайн-проектов и подбора цветовой палитры используют цветовое пространства RGB и его производные, такие как HSB, HSV, HSL и т.д.
Однако данное пространство обладает одним недостатком — оно некорректно рассчитывает светлоту цвета. Каждый цвет обладает своими математическими значениями. Одно из них — светлость.
В качестве примера давайте рассмотрим экранные цвета с одинаковым математическим значением светлости и насыщенности на изображении ниже. В то время, как показатели насыщенности и светлости в цветовом пространстве RGB для всех цветов находятся на одном уровне, наш глаз утверждает, что они различаются. Обратите внимание на тот факт, что некоторые из этих цветов кажутся более светлыми или насыщенными, чем другие. Например, оттенки голубого кажутся самыми темными, в то время как оттенки желтого и зеленого самыми светлыми.
В то же самое время существуют цветовые пространства, спроектированные на основании особенностей восприятия цветов человеческим глазом, например, HCL (CIALab). При использовании данного цветового пространства вы можете подобрать цвета cо значениями светлости и насыщенности, адаптированными к цветовосприятию человека.
Мы можем отметить значительные различия CIALab по сравнению с другими цветовыми пространствами при создании цветовой палитры. Цвета прекрасно сочетаются друг с другом, и каждый из них на уровне визуального восприятия обладает тем же уровнем светлости и насыщенности, что и остальные.
Это удивительно, что практически не существует инструментов для построения цветовых матриц, которые бы использовали цветовые модели, построенные на основании особенностей сенсорного восприятия цветов.
Именно поэтому мы решили создать собственный инструмент — HCL Easy, который позволяет решать данные задачи.
Решения, которые предлагает HCL Easy
Цветовое пространство, адаптированное для комфортного восприятия человеческим глазом
Мы используем цветовое пространство CIELab, представленное в виде осей HCL с помощью chroma.js, таким образом, чтобы инструмент был максимально удобен в использовании.
Автоматизация процессов при создании цветовой палитры
Все цвета представлены в виде матрицы, что позволяет подбирать гармоничные друг к другу цвета для светлых и темных тем. Данный инструмент дает возможность автоматически подбирать необходимый уровень яркости, насыщенности и светлости цвета с помощью кривых Безье.
Адаптация для всех форм дальтонизма и соответствие требованиям по контрастности цветов
С помощью функции «Доступность» можно проверить за раз всю цветовую матрицу на предмет контрастности, включая контрастность для каждого из восьми видов дальтонизма. Здесь мы использовали библиотеку, с говорящим названием Color Blind, эта библиотека преобразует наши HEX-коды в те, которые видят люди с различными нарушениями зрения, чтобы впоследствии мы могли проверить контрастность на воспроизведенных цветах.
Создание доступных для восприятия палитр цветов для использования в Figma
Мы создали инструмент в виде плагина для Figma, чтобы вы могли подбирать цветовые палитры к различным темам вашей дизайн-системы без использования внешних программ.
Брать пример с лучших
Мы предлагаем вам на выбор палитры самых популярных дизайн-системы в мире в качестве основы для вашей собственной цветовой палитры.
Что дальше:
- Автоматизация с вашим фирменным цветом. Вы сможете выстраивать оттенки не только на основании двух крайних цветов, но и на основании третьего, который будет расположен посередине вашей палитры. В качестве третьего цвета вы можете использовать ваш фирменный цвет.
- Выбор количества оттенков. Вы сможете выбирать количество необходимых оттенков для вашего цвета.
- Прямая интеграция со стилями библиотеки Figma.
- Плагин для Sketch и Adobe XD и веб версия.
Ссылки:Лендинг — http://hcleasy.com
Плагин Figma — https://www.figma.com/community/plugin/926166109013752444/HCL-Easy
Купил плагин, и вот что нужно допиливать:
— Добавить действие отмены и историю действий;
— Добавить возможность установки глобальных кривых, чтобы вручную не ковырять все кривые у каждого из десятка оттенков;
— Починить опции аксессибилити: они пропадают и глючат;
— В шаблонах оттенки сделать от светлого к тёмному, как в редакторе палитр, а не от тёмного к светлому;
— Добавить менеджмент сохраненных палитр с возможностью создания копий.
Но главное, что разочаровало, это то, что HCL-подход не даёт обещанных результатов. Попробовав множество разных инструментов на HCL, стало ясно, что это проблема самого цветового пространства. В частности:
Цвета прекрасно сочетаются друг с другом, и каждый из них на уровне визуального восприятия обладает тем же уровнем светлости и насыщенности, что и остальные.Нет, не обладает. Оттенки синего очень сильно отличаются по яркости и насыщенности от остальные. Среди ярких оттенков сама яркость плавает тоже. Особенно это видно, если перевести всю палитру в грейскейл.
Попытка отличная, денег я занёс, но до ручной генерации реально гармоничных оттенков по яркости и насыщенности в HSB по монохромному референсу это всё ещё далеко.
Привет!) Большое спасибо за развернутую обратную связь.
Мы получили более 20 отзывов со списком желаемого функционала для следующей версии. И ваши пункты во многом попадают, что говорит о востребованности. (Побольше бы такой обратной связи 😉)
По пункту "Починить опции аксессибилити: они пропадают и глючат"
Можете пожалуйста расписать подробнее баг. Это бы нам помогло при его воспроизведении.
По используемому нами цветового пространства
Цветовое пространство CIELAB на данный момент является наиболее линейным с точки зрения человеческого восприятия относительно математических значений.
Да, не идеальный (ох уж эти ученые и инженеры с 30+ лет экспертизы), но максимально приближенный.
По всему остальному.
Скорее всего текст статьи ввел в заблуждение. (Мы его пересмотрим)
Мы позиционируем HCL Easy как инструмент, который помогает автоматизировать ту ручную работу, которую мы выполняем при построении палитры. И Выстроить все оттенки цветов относительно друг друга с +–одинаковыми математическими значениями которые линейны человеческого восприятия цвета.
Мы не отменяем калибровку от субъективного чувства прекрасного) Мы помогаем делать это быстрее и эффективнее
Я не уверен, что ваш метод через перевод в монохром (Выключить Chroma) работает так, как вы задумывали. Так как оно идет в разрез с тем, как мы воспринимаем цвета.
Вот тут максимально развернуто расписана теория)
"Цвет: от шестнадцатеричных кодов до глаза"
http://jamie-wong.com/post/color/#wright-guild-s-color-matching-experiments
Еще раз спасибо за отзыв ❤️