66

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.

A question with an upvote; the vote button is slightly blue colored

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:

Brighter, more saturated colors

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.

17
  • 7
  • 9
    @honk That one is about child meta sites. This seems to be about non-meta. Commented May 31, 2023 at 19:09
  • 3
    @BryanKrause: True, but it's the same problem. I guess we have a general problem here ;)
    – honk
    Commented May 31, 2023 at 19:16
  • @honk Indeed, the voting here: meta.stackexchange.com/questions/389359/… would indicate others also see the general problem. Commented May 31, 2023 at 19:21
  • I can see it quite clearly... Commented May 31, 2023 at 19:24
  • 7
    The goal is to increase the number of votes. Perhaps this increases the number of votes by forcing you to click it over and over to even tell if you voted?
    – Chris
    Commented May 31, 2023 at 19:32
  • 3
    @Chris-RegenerateResponse I think I've (unintentionally) retracted more votes than I've cast in the last week... Commented May 31, 2023 at 19:34
  • @RadvylfPrograms I've done it more than once. It's even harder to tell on some sites than others.
    – Chris
    Commented May 31, 2023 at 19:35
  • 2
    @Chris-RegenerateResponse Yes! The next step is to allow for multiple votes on the same content, and we're done!
    – Joachim
    Commented May 31, 2023 at 20:13
  • 1
    Moving to leave open as this was tagged as under review by a staff member (not just a mod unlike the other one). Commented May 31, 2023 at 22:40
  • The operating system vendors has been doing this for many decades now. And there is a special place in hell reserved for GNOME. (Yes, it can be changed, even in Windows, but in obscure places and/or ways.) Commented Jun 1, 2023 at 20:20
  • We have the same issue on our main site: bitcoin.meta.stackexchange.com/q/1169/5406
    – Murch
    Commented Aug 21, 2023 at 18:19
  • 1
    We know this issue persists. I don't have much of an update yet, but just wanted to share that we do plan to work on this in the first half of 2024.
    – Sasha StaffMod
    Commented Dec 20, 2023 at 15:41
  • @Sasha while very far guess better than nothing/never, thanks for the update. (Also, related, without official roadmap it's impossible for us to know what the developers are working on.) Commented Dec 20, 2023 at 16:05
  • 2
    Switching it back to grey for unvoted and orange for voted would solve this problem far better, but what do I know
    – TylerH
    Commented Mar 7 at 22:20

6 Answers 6

25

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

image of incompetent UX design

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."?

0
19

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

1
10

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

enter image description here

The color when I hover over it also changes:

enter image description here

On other sites, it still looks like these:

enter image description here enter image description hereenter image description here

[Hinduism] [English] [Hinduism Meta]

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

3
  • 1
    Reverted back in 10... 9... 8... Commented Jun 2, 2023 at 16:48
  • 1
    Anyway, it's only here on MSE. So just some early test. With total lack of communication with staff, we can't possibly know. Commented Jun 2, 2023 at 16:48
  • 3
    @ShadowTheSpringWizard - yeah, I realized that after checking some other sites. The new version is certainly an improvement in that regard, though.
    – CDR
    Commented Jun 2, 2023 at 16:52
6

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.

up and down arrows with vote counts, the arrow on the left is darker than the arrow on the right

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 .

4
  • Seems I was the first to notice this. :)
    – D S
    Commented Mar 7 at 20:21
  • 6
    I don't think this is a "fix". The voting buttons on Stackoverflow are too prominent. All I see in the page is that bold, brown circle :-/ Please make them stand out less. I have posted this as proposal here, in case you want to vote on it
    – Luis Mendo
    Commented Mar 7 at 22:18
  • 1
    The problem mentioned by @LuisMendo is also happening in SOpt. The arrow color is now brown-ish, are you sure it should be this way? i.sstatic.net/kRsAf.jpg
    – hkotsubo
    Commented Mar 7 at 23:47
  • FWIW, in "Force dark mode" in Chrome & related browsers, there's still not much difference between the look of voted and unvoted on MSO and other meta sites using a grey theme.
    – PM 2Ring
    Commented Mar 8 at 12:57
4

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:

Voting buttons from upvoted post on Bitcoin SE

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.

1

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.

enter image description here enter image description here

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .