It’s become difficult to see visually if I’ve upvoted a post

Question

I suppose this isn’t such a big deal, but it seems to have become difficult to see visually if I’ve upvoted a post on math.stackexchange:

Compare this with the clear coloring on stackoverflow:

Has this been discussed? Though it’s not a big deal, it seems to be a change which has made the user interface slightly worse.

Maybe I’m just part of an A/B test and I don’t realize it.

Answer 1

This is not an A/B test - those happened a while ago and it has now been rolled out to all sub's. There has been a bunch of stink raised over it on https://meta.stackexchange.com/, but then that seems to be a place where a lot of stink is raised frequently.

It seems like there are some overall colors that make up a palette for each sub, and the arrow coloring is drawn from one of those. Math.se seems to be one for which the lack of contrast is significantly worse. I've posted in those meta.se questions about our particular issues.

(What follows is speculation.) It looks like they put a lot of time and energy into designing and testing this change. With that much sunk cost it seems unlikely that they'd "oops, sorry, rollback" the change. The only response I've seen from company people is "Thank you for bringing this to our attention. Our team is working on updating the colors of the button after voting on Meta sites so it will be much more visible." I've also seen somewhere where "near future" was mentioned as the timeline, though I can't seem to find that now. Use that as you will when deciding if you want to try to come up with your own work-around, or wait to see if/how it is "fixed".

Answer 2

For the moment (given that it is highly unlikely the buttons will be modified soon), you can use a script to roll-back to the usual buttons.

For the sake of completeness, here's the full script which you can copy and paste to your script manager (for example, this one):

// ==UserScript==
// @name         Original Stack Overflow Vote Buttons
// @homepage     https://github.com/Tyler-H/SO-UserScripts/blob/master/OriginalVoteButtons.js
// @version      1.1
// @description  Reverts post vote buttons on Stack Exchange to the previous implementation, pre-2022-06-24
// @author       TylerH
// @match        https://*.stackoverflow.com/*
// @match        https://*.stackexchange.com/*
// @match        https://*.superuser.com/*
// @match        https://stackapps.com/*
// @match        https://*.serverfault.com/*
// @match        https://*.askubuntu.com/*
// @match        https://*.mathoverflow.net/*
// ==/UserScript==

(function() {
    let allbtns = document.querySelectorAll("button[class^='js-vote-']");
    let downsvg = document.querySelectorAll('.js-vote-down-btn .iconArrowDown');
    let upsvg = document.querySelectorAll('.js-vote-up-btn .iconArrowUp');
    let downpath = document.querySelectorAll('button.js-vote-down-btn svg.iconArrowDown path');
    let uppath = document.querySelectorAll('button.js-vote-up-btn svg.iconArrowUp path');
    
    // set attribute values for the SVG elements
    downsvg.forEach ( x => x.setAttribute('height','36'));
    downsvg.forEach ( x => x.setAttribute('width','36'));
    downsvg.forEach ( x => x.setAttribute('viewBox','0 0 36 36'));
    
    upsvg.forEach ( x => x.setAttribute('height','36'));
    upsvg.forEach ( x => x.setAttribute('width','36'));
    upsvg.forEach ( x => x.setAttribute('viewBox','0 0 36 36'));
    
    // set SVG path values to resize the SVGs themselves
    downpath.forEach ( x => x.setAttribute('d','M2 11h32L18 27 2 11Z'));
    uppath.forEach ( x => x.setAttribute('d','M2 25h32L18 9 2 25Z'));
    
//remove border & revert padding
allbtns.forEach ( x => x.setAttribute('style','border: 1px solid transparent !important; padding: 1px 4px'));

//revert hover styles
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:hover { color: var(--blue-500) !important; background: none !important; }</style>`);
allbtns.forEach ( x => x.style.setProperty('background-color','transparent','important'));

//revert :focus styles
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:focus { box-shadow: none; }</style>`);

//revert :active styles
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].s-btn:active { background: none }</style>`);

//de-emphasize color brightness of buttons while leaving brightness of score
//allbtns.forEach ( x => x.style.setProperty('color','rgb(105, 111, 117)',''));
document.head.insertAdjacentHTML("beforeend",`<style>button[class^="js-vote-"].fc-black-700 { color: rgb(186, 191, 196) !important; }</style>`);
})();