Page MenuHomePhabricator

Avatar icon darker than before
Closed, DeclinedPublic

Description

In T123810 a new, slightly darker avatar icon was introduced. After this update, I find myself constantly looking over there because it looks almost like the active, black version of the other icons.
Would it be possible to brighten it up a little such that it matches the other, inactive icons?

Details

Related Gerrit Patches:
mediawiki/extensions/Echo : masterStreamline `opacity` on personal tool icons

Related Objects

Event Timeline

1-Byte created this task.Oct 20 2018, 1:00 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 20 2018, 1:00 PM
Schnark added a subscriber: Schnark.

This is a double-edged request. All our icon interface elements, which are disabled, currently receive 0.51 opacity resulting in #7d7d7d (in Chrome) and a 4.12:1 contrast ratio, being sufficient for WCAG 2.0 AA conformance for large text, which applies to our default icon size of 20x20px.
The reason I've went this specific opacity is, that our interfaces feature icon only elements which might be disabled, but have no other additional representation like a label drawing them insufficiently recognizable for people with visual impairments.

The user icon, which is part of the link itself is in the link combination never disabled, nor is the read-all status of the bell (alerts) or the tray (notifcations) icon. But the user icon is also not read, therefore from an interface logic it needs to go with an 'active' color, in this specific case Base20 aka #54595d from our color palette. There's other icon+label combinations like the UniversalLanguageSelector in the personal tools as well, which uses #54595d.

So lowering the user icon would be oppose our own active indication logic elsewhere.
Upping the Notifications icon a bit would be a solution, but I guess that wouldn't satisfy your needs for clearer stating the 'allread' status, exemplified here:

Looking through the code, I did find a few minor issues though, that are additionally complicating the applied colors in Notifications. Will prepare a patch to streamline this.

Change 472378 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Echo@master] Streamline opacity on personal tool icons

https://gerrit.wikimedia.org/r/472378

Change 472378 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Streamline opacity on personal tool icons

https://gerrit.wikimedia.org/r/472378

Volker_E closed this task as Declined.Feb 5 2019, 8:41 AM
Volker_E removed a project: Patch-For-Review.

With the opacity alignment in, the color is corrected as reasonable right now – it being part of an interactive element and not a disabled element. We might revisit this in the future with stricter guidelines around icon colors and interactive elements.