Is there any chance of a colour blind mode for correct / incorrect answers. Even just being able to use blue and yellow instead of red and green would really help. I’m often not able to tell if I have correctly answered a question. I have installed a userscript from here [Userscript] WaniKani Review Accessibility Change Icon and I know it was previously spoken about as an update to wanikani but I was wondering what the status of that was?
yeah this helps me but it would be really nice for it to be solved on the wanikani side as it can be a major accessibility problem for ~10% of the male population.
I always find these types of conversation really important and interesting. I know a bit about colour blindness but obviously I am not exposed to it all the time so I really do just take my vision for granted.
If I could ask, and this is a very personal questions so please you don’t have to answer if it makes you uncomfortable. To what degree do you find colour blindness when learning has a major affect on just your confidence while learning alone? Are you ever able to adjust using other cues that you can pick up on and train yourself to pick up on cues that someone like myself wouldn’t have to be concern with?
Additionally, if there wasn’t a way to change colour alone, what could be done more to assist with given a more defined feedback for users that have a lot of varied colour blindness?
Happy to answer. It doesn’t effect my confidence, more it can be that you enter the same answer multiple times thinking it was marked green and correct, when it was actually incorrect and red. Its only a minor frustration for me. colour blindness can come in different types and different levels of severity, so for some people it would be effectively impossible to distinguish the correct and incorrect answers. For me I can notice the difference if I am paying attention, differentiating red and green is like differentiating two shades of the same colour.
Giving the user flexibility over picking the colours would be a nice solution as that would allow people to use whichever colours suit them (for instance a very small minority of people have yellow blue colourblindness). Theres a tiny minority of people who have complete colour blindness and see the world in shades of gray and for these people you would need visual cues such as a tick or a cross. But of course that’s very few people and would take more development time. I think custom or alternate colour schemes is a sweet spot in terms of development time vs helping 99% of people with colour deficiencies.
Interesting. So you’d much prefer colour reinforcement improvement on feedback than additional feedback that is separate of colour that can be an equal part in supporting the difference between a correct and non-correct answer?
I guess this is something I take a lot of interest in as a software dev making UI/UX because I overlook this and place more enforces on colour as a form of feedback. I guess I’m wondering how it would be possible to lean in a more balanced delivery for colour blind people that they don’t have to figure out colour alone because I have provided an equally helpful form of visual feedback.
Have you find any websites that do a better job that don’t solve the pure colour design?
colour is still a nice form of feedback but yeah its better in combination with other cues. Also the choice of colours can make a huge difference, red and blue for instance is pretty safe. In terms of other websites Bunpro shows blue for correct along with a tick, and red for incorrect along with a cross. This is pretty ideal.
Ahh, there you go. You learn something new everyday.
I hope the extension that @YandrosTheSane helps for now. I could imagine how much it would stall my progression if I had to sit an extra X amount of minutes analysing the result. Would very quickly become exhausting.
I’ve put the stylesheet and basic instructions in my Study Log first post for later ease of retrieval.
@polarbean if you have additional style suggestion to further improve it, I rely on your feedback (provided it’s easy to implement, i’m far from being a css guru).
Cool! I changed the colours and added a tick and cross. They work well on my machine but its totally possible that it might not work on other displays.
.quiz-input__input-container[correct="false"] .quiz-input__input {
background-color: #f00 !important; /* Red for incorrect */
color: black !important;
caret-color: #f00 !important;
border: 3px solid black !important;
position: relative;
}
.quiz-input__input-container[correct="false"]::after {
content: "✖"; /* Cross mark */
color: black;
font-size: 20px;
font-weight: bold;
position: absolute;
right: 10rem;
top: 50%;
transform: translateY(-50%);
}
.quiz-input__input-container[correct="true"] .quiz-input__input {
background-color: #0279c9 !important; /* Blue for correct */
color: white !important;
border: 3px solid white !important;
position: relative;
}
.quiz-input__input-container[correct="true"]::after {
content: "✔"; /* Tick mark */
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
right: 10rem;
top: 50%;
transform: translateY(-50%);
}
In addition to choice of colours for indicating different things, another key aspect if taking colour blindness into account during UI design is contrast when it comes to choice of text and background colour. This is the thing that I struggle with the most. Often times the bg/fg colour combo choice can be very difficult, and sometimes impossible, to read for me.