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:

Screen Shot 2022-01-16 at 4.25.59 PM.png

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

Issues · NodeBB/NodeBB

Node.js based forum software built for the modern web - Issues · NodeBB/NodeBB

GitHub (github.com)

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

Issues · NodeBB/NodeBB

Node.js based forum software built for the modern web - Issues · NodeBB/NodeBB

GitHub (github.com)

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! ^_^

Feature Request - Better visiblity on upvote/downvote icons when clicked for those with Colorblindness · Issue #10174 · NodeBB/NodeBB

Hi all, Linking to the topic I had posted about this feature request: https://community.nodebb.org/post/86662 Essentially, I have a friend who is colorblind and none of the default NodeBB themes are easy for him to tell if he has already...

GitHub (github.com)

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:

Some people with color blindness report improved color vision after psychedelic drug use

A new report published in Drug Science, Policy and Law suggests that psychedelic drugs may improve symptoms of color blindness. The study discusses 23

PsyPost (www.psypost.org)

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

Post-Traumatic Stress Disorder Treatment with Psychedelic Drugs | NYU Langone Health

NYU Langone’s High School Bioethics Project examines PTSD and the ethical implications of using psychedelics like psilocybin to treat symptoms. Learn More

NYU Langone Health (med.nyu.edu)

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!