Improve icon readability

[NickColley]

Change the baseline colour of the icons match the deemphasised text.

Unpressed button icons will be a darker grey similar to the text that surrounds toots.

Pressed button icons will match the theme colour and be more saturated.

This means the icons meet at least 3:1 contrast ratio against the background.

Light

Status toolbar

Before	After

Compose toolbar

Before	After

Dark

Status toolbar

Before	After

Compose toolbar

Before	After

[NickColley]

We could consider saturating ozark even more similar to the other dark themes which'd make the pressed colour even better contrast too - perhaps for another pull request...

[NickColley]

On hover states at the moment they're so minimal they're not very obvious so the intention with the backgrounds are to make a simpler and clearer state but I don't think it's a deal breaker we could just focus on the colour itself.

If we keep the colour for the unpressed state then we would have to make them much darker as at the moment they don't meet 3:1. This pull request instead makes them a similar level of contrast but changing in colour (and with the check) to distinguish between states.

I can't think of a way to ensure unpressed is readable and clearly different opacity without moving away from the colour itself but maybe there's another way...

[nolanlawson]

On hover states at the moment they're so minimal they're not very obvious so the intention with the backgrounds are to make a simpler and clearer state but I don't think it's a deal breaker we could just focus on the colour itself.

For the hover/active I think it is fine for the effect to be very subtle. I don't think there's an a11y problem with not communicating the hover/active states – you (should) get very clear feedback when pressing the button either way, since either the toggle state changes or some other action is triggered (like the emoji picker popping up).

If we keep the colour for the unpressed state then we would have to make them much darker as at the moment they don't meet 3:1.

I'm fine with changing the color to meet 3:1. If they're too faint right now then we can make both the unpressed and pressed states darker. In the case of the dark theme, it looks like we're already there; for the light theme I would just like at least a little color in the unpressed state, e.g. using SASS mix() to mix with the theme color or something. If it's gray-ish then that's fine. :slightly_smiling_face:

I can't think of a way to ensure unpressed is readable and clearly different opacity without moving away from the colour itself but maybe there's another way...

I'm not following – I thought this PR was just changing the color for the unpressed vs pressed state? Did you have something else in mind? (Like a checkmark or a background?)

[NickColley]

@nolanlawson will look into your suggestion of desaturating the colour to increase contrast while keeping more colour. 👍

And remove the clearer hover states in this proposal as it's not something that should block improved contrast.

Thanks for thoughts as always.

[NickColley]

So mixing grey into colours, it ends up looking muddy, so I don't think it's the best way to try and keep colour it'd be difficult to get pleasing colours programmatically that'll work across all the themes.

I think making the icons easy for visually impaired people is a higher priority than colour in this case.

[NickColley]

@nolanlawson okay I feeling happy with this now, let me know if the colour stuff is a deal breaker...

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
pinafore	✅ Ready (Inspect)	Visit Preview	Dec 6, 2022 at 1:10AM (UTC)

[nolanlawson]

So mixing grey into colours, it ends up looking muddy

Agreed, it doesn't look great.

Unfortunately I'm still not sold on the gray icons either. To explain my thoughts, here is the default theme:

At a glance, most things that are interactive have a blue tint (links, buttons, even the scrollbar). Whereas non-interactive parts tend to be gray or black. (Exceptions here are the "500" text, "3 hours ago," the textarea, and usernames, to be fair.)

Whereas as soon as we have the gray icons, that distinction is lost:

Gray to me also communicates "disabled," which makes the buttons feel even less interactive.

I understand that a 3:1 ratio on icons is important. I see this spelled out here in the WCAG AA guidelines. Right now these icons are 2.32. (Although interestingly, when I run the Axe extension, they don't complain about it. Maybe an oversight on their part.)

I'm not sure how to resolve our disagreement on this. Again: I'd be perfectly happy to make these changes in a "high contrast" setting, which could be automatically enabled based on prefers-high-contrast: more. That's pretty easy to implement.

Maybe we could also go in to each theme and individually dial up the deemphasized color for each. But I know that's a lot less work than doing it once for each light/dark theme.

[NickColley]

I think we should try and make icons readable by default if possible, otherwise we won't meet WCAG which is not a high bar in this case.

The problem with arguing for the light blue as an indicator for clickable is if people can't see the icons then it's not indicating anything.

The grey style is already apart of many of the dark themes so if you are concerned about it not seeming clickable then we'd have reports by now I think.

With this in mind, and given we have real reports from people finding it hard to see I hope you can consider that even if you personally don't like grey as much that it's objectively more readable.

Perhaps you can agree to personally not like it as much aesthetically (I like it myself, it will vary person to person) and instead decide to accept this given it'll make icons easier for everyone to distinguish.

[NickColley]

Just to elaborate on high contrast, high contrast is meant to be very high contrast. Here we are talking about minimum contrast.

The problem with only reserving readable contrast for high contrast is some people experience visual stress from very contrasting colours.

So you need the interface to be readable at a reasonable contrast and also support very high contrast.

If we only do the one we force anyone with visual impairments (that experience visual stress) to choose between being able to see the interface and headaches.

[NickColley]

One option for worries around things being mistaken for disabled is to make it darker.

This sort of style is very common seen in the official Twitter client, Mastodon clients etc. I could pull together screenshots that show it but my proposal is pretty standard on that front.

[nolanlawson]

Just to elaborate on high contrast, high contrast is meant to be very high contrast. Here we are talking about minimum contrast.

Yeah I know, it was a bad argument.

I think you're right that it comes down to the fact that I don't like the gray. Is there any shade of blue that you think would work here?

[NickColley]

Sure, I'll have a play for sure outside of Sass land and see if there's something...

[nolanlawson]

Thanks a bunch. Maybe the darker gray would also look nice. Sorry for being stubborn about this.

And if there is no better option, then yeah, meeting WCAG AA is important, so I will go with the gray. :slightly_smiling_face:

[NickColley]

I played around with colour outside of Sass land and ran into similar problems where to get the contrasts readable you end up having to mix darker shades into it which results in a muddying that is really ugly.

I have made the greys a little less light so the risk of them looking disabled is reduced, hopefully this is a good compromise.

[nolanlawson]

Thank you for your work on this. I took another look, and I'm sorry, but I'm just not very happy with the grays, even when they're darker. I think this risks making the UI less accessible, because now it's less clear what's clickable and what's not. Also the UI still feels less lively to me.

Some of the themes also have less personality now that they're grayed, e.g. Hacker:

The current contrast of 2.3 (on the default "Royal" theme) is not ideal, but it's not far from the 3.0 recommended by WCAG AA. Also, I have not yet heard anyone complain about being unable to see the buttons in their unpressed state (unlike pressed vs unpressed, where lots of people complained). So it's not clear to me that the grays are worth it, to get us to 3.0 contrast.

I know you put a ton of work into this, and I appreciate that, but I just don't think this design jives very well with my original vision for Pinafore.

I think at this point the best solution would be to simply make the unpressed buttons a bit darker. Since the contrast between pressed and unpressed is less critical (since we have the checkmark), we don't even necessarily need to make the pressed ones darker.

[NickColley]

I think this risks making the UI less accessible,

I do not agree with this, the majority of mastodon clients use this style of icons and the interface we're talking on right now uses this style of grey icon, objectively this proposal makes them easier to see but will try to make some smaller improvements to the icons that avoid this conflict for example improving the dark theme and a few spots that dont require bigger changes.