Заметили разницу?

На большом мониторе я не с первого раза заметила. Это плохой пример UX/UI.

В данном случае функция включения/отключения уведомлений. При нажатии на колокольчик он становится серым 665E5E. При этом начертания самой иконки достаточно тонкие, что визуально мешает четкому различию состояния.

Сам по себе цвет неплох, но для интерфейса по стандарту WCAG (для соблюдения инклюзивности) недотягивает — ААА 6.31:1. Должно быть не ниже 7:1 для мелких элементов. Для крупных такой показатель окей.

У нас же контраст низкий за счет цвета и начертаний самой иконки. Пользователь не сразу замечает, что произошло и произошло ли.

Это снижает нам юзабилити. Пользователь должен чётко видеть изменения состояния.

Можно иконку сделать контрастнее, например, #555555 или #323232. Нарушения гармонии не будет, но при этом визуально разница состояния будет более очевидна.

Мой идеал #323232. Очень хорошая контрастность для мелкого элемента.

Чтобы не голословить, прикладываю сравнение в комменты 🙂

Заметили разницу? | Сетка — социальная сеть от hh.ru Заметили разницу? | Сетка — социальная сеть от hh.ru