I can't see if I've already voted on something

Question

On many sites, I can't see the slight color change that indicates I've already voted unless I look very carefully. This seems like a massive accessibility issue, given that my vision is above average and I'm still struggling to use the UI.

The color change between the up and down arrows is almost indistinguishable to me, especially at the now very small size of the arrows on my monitor. The background seems to be slightly darker, and the border is darker, but these are details that are much much more subtle of changes than the old UI.

The specific colors chosen seem like the main issue. The background is just 3.5% darker when the button has been clicked, the saturation of the color used for the arrow is less than 50%, and the lightness of 41% is rather similar to the 25% of the unclicked arrow. While if I zoom in several times the difference is clearer, I don't always have the luxury of seeing my screen right up close.

This could be easily remedied by using a brighter, more saturated color, and bigger difference in brightness. For example, here's a (very rough) mockup where I've just increased the saturation and lightness of the theme color, and the saturation of the background:

Upon further inspection it seems the color used for the buttons is the site's theme color; this worked fine when the buttons were huge solidly colored blocks, but seriously needs to be looked at again when the only solidly colored part of the button is smaller than the number below it, especially for sites like those using the default theme where the primary color is so close to dark gray.

Answer 1

This is what a downvote looks like on the math.se main site:

There might be even less contrast than in yours.

We're like the second or third biggest sub-site. Did they not bother to check what it looks like, or did they look at that and think "That's great! Much better than what we have now."?

Answer 2

As far as I recall, the new voting buttons resemble those of around-2015-era. Nothing good or bad in that fact in particular, however by looking into the old icons we may come to a trade-off / solution to the readability problem...

And here it is: if Stack Exchange decides to keep these icons*, it's at least possible to make them more contrasty in a way it was done several years ago (pic 1 with blue button) - and in a similar way tweak the arrows for metas (pic 2, may add more contrast) and dark theme with color accents (pic 3) and dark theme without color accents (pic 4) (is it even a thing btw? meta SO doesn't seem to have a dark theme)

^{* - I mean, I do realize that the current design is far from being widely accepted by community, but here we're talking of solving at least the readability problem}

Answer 3

Looks like this has been fixed, at least on MSE:

The color when I hover over it also changes:

On other sites, it still looks like these:

[Hinduism] [English] [Hinduism Meta]

(Edit: Apparently it's now fixed on all per-site-metas)

Answer 4

A fix has been deployed across all sites. The voting buttons now use the same styling that was previously only used on meta sites network-wide.

I've included an image from the Mathematics site as an example.

The top arrow on the left is how it appeared before the change was pushed. The arrow on the right is how it currently appears.

I've updated the tag to status-completed.

Answer 5

We are also affected by this issue on our main site: New voting buttons make it hard to distinguish voted upon posts on MAIN site

This is what the voting buttons on Bitcoin.SE look like:

Just as Radvylf Programs said in the initial post here, I have great vision and I find myself needing to explicitly check to see whether I have voted on things.

Answer 6

After this change, the voting buttons on Stackoverflow are too prominent. They stand out too much, and distract from the text, or in fact from anything else on the page. For example, the check mark is hardly visible in comparison (see images below). Please tone down the voting buttons a little.