Кирилл Улитин написал о цвете в интерфейсе: о контрасте и конфликте разных информационных слоёв цвета.

— Цветовые пространства RGB и производные от него HSB и HSL не адаптированы для человеческого восприятия. Изменение оттенка даёт цвета, неравномерные по контрасту. Цветовые модели LCH и HSLuv призваны это исправить;
— Контраст зависит от способа воспроизведения: на электронно-лучевых экранах контрастнее жёлтый на чёрном, на светодиодных — чёрный на белом;
— Алгоритм расчёта контраста в WCAG 2.1 иногда ошибается. В новую версию стандарта доступности вошёл алгоритм APCA. Можно использовать инструменты Huetone и Accessible Palette;
— Алгоритмы проверяют цвета в идеальных условиях и не учитывают пользовательский контекст: тип матрицы экрана, яркость, режимы вроде Night Shift или корректирующие очки;
— Цвет может обеспечивать узнаваемость бренда;
— Apple в руководстве по интерфейсному дизайну говорит о том, что конфликт разных информационных слоёв цвета нежелателен: красное сообщение о критической проблеме будет менее эффективным, если красный используется в приложении для некритичных ситуаций;
— При этом в новой версии macOS Big Sur разработчикам дана возможность настраивать основной цвет интерфейса приложения;
— Когда цвет бренда (например, красный) совпадает со статусными цветами в интерфейсе (сообщения об ошибках) надо вводить дополнительный цвет для элементов интерфейса, отличающийся от брендового (например, Microsoft Office 365), или добиваться цветовой разницы от 30 до 40 единиц (например, МойОфис).

#color #accessibility

Анастасия Ланцева из UXART написала о контрастности.

— WCAG допускает 2 уровня хорошего контраста: достаточный (АА) и повышенный (ААА);
— АА: от 4,5 для основного текста, от 3 для крупного больше 24 px или жирного больше 18 px;
— ААА: от 7 для основного текста, от 4,5 для крупного или жирного;
— Для элементов, которые не надо читать: от 3;
— Самый светлый цвет в 21 раз ярче самого тёмного. Яркость измеряется от 0 до 1, чтобы не делить на ноль, поделили 1,05 на 0,05 и получили 21. Порог контрастной чувствительности глаза — 0,02;
— Стандарт WCAG рекомендует придерживаться уровня АА, если нет особых требований, придерживаться уровня ААА не обязательно;
— Слишком высокая контрастность может вызывать усталость глаз, повышенную утомляемость, способствовать приступам эпилепсии, создавать визуальные искажения (вспомните визуальные иллюзии с контрастными объектами). Близорукость усиливает эти эффекты;
— Такая контрастность подойдёт промосайтам, с которыми пользователь не взаимодействует долго;
— Вычисляется по значениям RGB, но в реальности на неё влияет тип экрана (TN-матрица понижает контраст), освещение и свойства шрифтов (слишком тонкие линии менее контрастны);
— Текущий алгоритм некорректно оценивает некоторые цветовые пары и в целом не учитывает а) размер цветного элемента, б) где фон, а где текст. В WCAG 3.0 обещают новый алгоритм (APCA);
— Контрастность растёт нелинейно. Для чёрного цвета первая половина цветовой шкалы даёт 4 пункта контрастности, а вторая — 17.

#color #accessibility

Тарик Шебл написал, почему лучше начинать дизайн с оттенков серого.

— Такой дизайн быстрее создавать (поиск подходящих цветов требует времени) и править (при перемещении элементов и изменении их размеров реже возникают конфликты);
— При обсуждении такого дизайна люди не отвлекаются на цвета, которые вызывают разные ассоциации, и фокусируются на обсуждении структуры и компоновки;
— Цвет — не самая важная составляющая дизайна. Дизайн должен работать ещё до добавления цвета;
— Дизайн должен быть функциональным в любом цвете. Цвет может измениться из-за пользовательских настроек, нового фирменного стиля, а также восприниматься иначе из-за нарушений зрения.

In English. #color

Илья Полянский рассказал, как делать чистые градиенты.

— Градиент — переход одного цвета в другой;
— Грязными принято называть градиенты, у которых в середине перехода можно увидеть серое пятно;
— Цветовую моделью RGB можно представить в виде куба, в ядре которого находятся оттенки серого;
— Поэтому все градиенты, проходящие через ядро (например, от жёлтого к синему) или рядом, будут довольно грязными;
— При переходе по поверхности куба (например, от жёлтого к зелёному) градиент будет чистым;
— Если нужен чистый переход именно от жёлтого к синему, можно добавить промежуточную точку или несколько;
— В цветовой модели HSB можно пропускать серые зоны, увеличивая значения Saturation и Brightness на 5−15 единиц. Hue не стоит увеличивать больше чем на 5 единиц, иначе появятся цвета, слабо связанные друг с другом;
— Есть сервисы, генерирующие радиальные переходы.

Копия статьи. #image #color

Максим Кононов написал о 13 базовых цветовых токенах (без токенов для ховеров).

— Блоки в интерфейсе — контейнеры для элементов и других блоков. Они должны выделяться на фоне родительского блока, создавая структуру слоёв;
— View (1) — блок, на котором отображается контент. Navigation (2) — блок с навигацией, который управляет тем, какие View отображаются;
— Border (3) может отделить два находящихся рядом блока, а также обвести немодальный блок, находящийся поверх остальных (плюс тень);
— Если блок модальный, для затемнения лежащего ниже контента — полупрозрачный Overlay (4);
— Элементы — всё остальное: текст, иконки, кнопки, поля ввода. Они управляют вниманием пользователя, выделяя важное, показывают состояние элемента;
— За внимание отвечают цвета элементов: Primary (5), Secondary (6) и Accent (7), перебивающий Primary;
— Характер задают: Danger (8), Success (9), Warning (10);
— Для фона кнопки — Background (11);
— Указанные выше яркие цвета можно применить не к тексту или иконке в кнопке, а к её фону. Тогда для её содержимого потребуется OnAccent (12);
— Кнопка в состоянии фокуса может иметь обводку с цветом Accent (с небольшим отступом, чтобы не сливаться, если у кнопки такой же фон), а в заблокированном состоянии — красить содержимое в цвет Disabled (13);
— Он же пригодится для плейсхолдера в поле ввода (логичнее было бы его назвать просто Tertiary);
— Также в статье есть о том, как подобрать цвета для этих токенов для светлой и тёмной темы.

Да, в заголовке статьи написано о 12 токенах, но это ошибка.

#color #design_system