65

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.

12

4 Answers 4

22

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
18

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
11

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... Jun 2 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. Jun 2 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
    Jun 2 at 16:52
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.

You must log in to answer this question.

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