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;
}

.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;
    }
}

[RallyDarkstrike]

@julian Sure, how would I go about doing that?

[gotwf]

@rallydarkstrike said in Upvote colorblindness visibility:

@julian Sure, how would I go about doing that?

Mayhaps these are the droids you are looking for....

https://github.com/NodeBB/NodeBB/issues

[RallyDarkstrike]

@gotwf said in Upvote colorblindness visibility:

@rallydarkstrike said in Upvote colorblindness visibility:

@julian Sure, how would I go about doing that?

Mayhaps these are the droids you are looking for....

https://github.com/NodeBB/NodeBB/issues

Yup, looks like, though as this is a feature request and not a bug report, do I have to fill out all these requested details? I'm not a dev on our site so I don't have access to them

[baris]

@rallydarkstrike You don't have to fill out the details just put a link to this topic in the github issue.

[omega]

@baris ... at this point, who is going to write a mod or plugin that allows users post an issue directly to GitHub via the forum.

Maybe there will be some

[baris]

@omega Sounds like something up @julian's alley

[RallyDarkstrike]

Thanks folks! Posted on the github issues page as a feature request and it's already marked as milestone....kudos NodeBB devs! ^_^

https://github.com/NodeBB/NodeBB/issues/10174

[omega]

Crazy tangent here with context - I remember a couple of random unexpected posts I read on a forum about I think digestion issues around 2014.

Psilocybin, see this guy posted, that twice, it cured his colourblindness, first time temporarily, then it seemed permanently the second time, so I did a quick search for this post and what do you know, it's a thing:

Then there are also the studies and reports that it also helps PTSD victims., for e.g.:

Fungus is literally mind-blowing (expanding I believe is the correct term) in more ways than one, but tbh, I have to take other peoples word for it and watch documentaries, nor am I endorsing you run out and start eating mushrooms off the local golf course! No no, this post is not medical or medicinal advice, more of a "did you know", trivial pursuit type intervention.

Whoa, check out the mycelium on that State man, it's humongous... .

[RallyDarkstrike]

@omega Surprised yet not surprised!