Upvote colorblindness visibility

[RallyDarkstrike]

Hi all - pardon me if this is the wrong place to post this, but I am a moderator on a site (opposite-lock.com) that runs NodeBB as our software. I don't deal with the dev side of things, but just had a comment from a friend of mine who uses the site and thought it was a good suggestion.

My friend is colorblind (reds and blues) and, no matter what theme he selects on our site, he finds the minimal change to the upvote icon incredibly hard to see, so he has a hard time knowing if he upvoted something already or not.

Is there a chance we could get the upvote icon improved for those with color-blindness so that, rather than just changing color, the icon for an already self-upvoted upvote button changes more noticeable? Like, for example...maybe a circle appears behind it, or a square? Or it turns into a checkmark...?

Essentially, have it change in a way so, even if somebody were COMPLETELY colorblind, they would still be able to tell that it has changed?

Thanks for all the great work you do and I hope this is a sensible and easily-addable request!

[gotwf]

@rallydarkstrike Hot damn! Before you posted this I had never even noticed that it changed. And I am not color blind. Hence, I did not miss the lack of such visual feedback. Only that if one tries to upvote something they've already upvoted, then the vote count decreases. Easily remedied by some additional clickery.

So it is a minor issue. But one that could also easily be rectified?

Peace.

[RallyDarkstrike]

@gotwf Cheers for the reply! Yes, I would imagine it wouldn't be all that difficult to rectify, and it would make things easier for those with a color-blindness handicap....such a simple thing that most of us overlook it, but even such a minor change would make a big difference to them!

I forgot this would, of course, have to apply to downvotes as well (we have downvotes disabled at Oppositelock).

[DownPW]

@RallyDarkstrike

you can change color of upvote and downvote for example like this:

.upvoted > .fa-chevron-up:before {
    content: "\f077";
    color: red;
}

/*VIOLENCE: Changement de l'icône après un DOWNVOTE*/
.downvoted >.fa-chevron-down:before {
    content: "\f078";
    color: red;
}

[RallyDarkstrike]

@downpw I don't have access to the site so I can't change anything myself....I'm assuming this is in a file somewhere?

[phenomlab]

@rallydarkstrike yes, you'll find find this in the ACP under Custom CSS.

[gotwf]

@rallydarkstrike said in Upvote colorblindness visibility:

@downpw I don't have access to the site so I can't change anything myself....I'm assuming this is in a file somewhere?

You will need Admin access via the ACP. Follow the directions of @phenomlab below:

@phenomlab said in Upvote colorblindness visibility:

you'll find find this in the ACP under Custom CSS.

Of course, I guess you could also edit the respective file directly but the above offers lower hanging fruit.

Have fun!

[julian]

A very good suggestion, we should definitely strive for colourblindfriendliness (is that a word?)

Can you open an issue against the main GitHub repo?

[crazycells]

@rallydarkstrike in case site owner is interested to change the icons, we have these options:

custom CSS codes for this change is:

// Change the icon for votes
span.votes {
    .fa-chevron-up:before {
        content: "\f164";
        font-weight: 400;
    }
    .upvoted .fa-chevron-up:before {
        content: "\f164";
        font-weight: 900;
    }
    
    .fa-chevron-down:before {
        content: "\f165";
        font-weight: 400;
    }
    .downvoted .fa-chevron-down:before {
        content: "\f165";
        font-weight: 900;
    }
}