Make disabled state of toolbar buttons easier work out or hide them until in use

[karmatosed]

I appreciate there is a fine line between fading and people being unable to see. The current disabled treatment of the toolbar though, means that it's incredibly hard to work out if it's disabled. I have a few suggestions:

1. Shows the current state.
2. Make the fading more increased (as seen in the second version in mockup). The downside of this is visibility, but right now they aren't accessible and as they are disabled we need to work out do they need to be even seen.
3. Make the '+' a blue. This brings in color but it does make it visible. I am not sold this is best but it certainly means I can work out what is disabled and what isn't.

Playing on a little from my point in 2, if they don't need to be seen why are we showing them? Would maybe a better approach be to not even have them show until usable?

[afercia]

Reminder: from an a11y perspective disabled controls don't need a sufficient color contrast. Quoting:

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Hiding them completely doesn't sound right to me though 🙂

[karmatosed]

Hiding them completely doesn't sound right to me though

Why not? They aren't being used and they don't serve a purpose visually. If they are active they would appear.

Reminder: from an a11y perspective disabled controls don't need a sufficient color contrast.

Interesting you say because I found this issue because of an accessibility problem. My eyesight actually is not awesome at low contrast and I couldn't tell the difference between an active/disabled :)

[afercia]

I'm not sure I fully understand 🙂 Are you saying, for example, when editing an existing post, since "Undo" and "Redo" are disabled they should be hidden and users should see just the inserter and the info buttons? See below:

[karmatosed]

I'm saying that's one possible way. Right now it's easy to click those and get nothing back. That's not a great user experience as someone could assume it's broken. The contrast is too low to notice the disabled state.

[jasmussen]

It seems to me like the obvious fix here is to just dim the disabled buttons further i.e. option 2, and it also sounds like there aren't any accessibility issues with this?

[karmatosed]

Awesome, lets for now do 2 in that screenshot then. Make the fading stronger.