Comments 7
Вопрос к автору, почему полупрозрачных тонов всего по четыре получилось, в чем избирательность заключалась?
P.S. Все эти танцы дизайнеров вокруг важности WCAG и ее заветной галочкой дабл АА, кажутся порой довольно преувеличенными. Автоматизация подбора цветовых контрастов на уровне плагинов и макетов в фигме, всё это очень условно и не дает ни каких гарантий, что на пользовательской стороне все будет читаемым. На WCAG хватает достаточно объективной критики, если углубиться в интернеты. Пока работает текущая версия стандарта, где-то за кулисами разрабатывается уже другая, заделывая дыры и ошибки предыдущей.
Сама идея этого довольно утопична, пытаться решить это только програмно. Это должно быть устройство по типу калибратора монитора, которая будет анализировать яркость и контрастность экрана пользователя, уровень освещенности помещения, площадь цветовых заливок (сюда же и масштаб интерфейса), особенности зрения конкретного человека, потом все эти данные передавать прямо в видеокарту и корректировать програмно значения выводимых на экран цветов. Вот тогда да, вот тут можно быть уверенным, что заданные дизайнеров "веса" контраста по типу WCAG точно сработают, как и задумывалось.
У самого WCAG есть проблемы с контрастом, поэтому, при подборе цветов, в некоторых случаях, APCA подходит больше. Хотя, уверен, что и последний - не серебряная пуля.
Иными словами, я согласен с утверждением товарища @udinhtml о том, что слепое следование галочке именно WCAG - довольно опрометчивое решение.
Предлагаю подойти к проблеме комплексно:
Белый фон,
Близкий к чёрному цвет для текста и других основных элементов
Warning - оранжевый фон
Error -красный фон, желтый текст
Info - светло синий фон -чёрный текст
Все читабельно и контрастно
Возможно, я не понял фрагмент про прозрачность, но почему нельзя просто выставлять бейджам режим наложения multiply или luminosity?
Luminosity — режим наложения, где учитывается только светимость, он не подходит
Multiply даёт больше грязи, чем просто полупрозрачная подложка
Вот пример — https://codepen.io/igapeka/pen/YzmNyyR
В целом режимы наложения менее предсказуемые. И всё-таки более «дорогие» для рендера. Хотя с ними можно, конечно, много всякого интересного придумать.
Ох, мы намучились с подбором цветов в свое время) Особенно с учетом специфики производства. Делюсь опытом: https://habr.com/ru/companies/nlmk/articles/792720/
Как я правил контраст и базовую палитру в дизайн-системе