Adapting a design for colour blind users
eeee... this is kinda boring, i guess, but here goes.
we have a little (skeuomorphic, i know heh!) app for multiple choice question exams, this one is for learner driver theory tests, specifically.
the following image shows an in-test screen which the user has answered (chosen two answers, in this case), and is viewing the marked screen before moving on to the next question.
the requirements for this screen were originally to show:
1. selected answers which are correct,
2. selected answers which are incorrect,
3. unselected answers which are correct, and
4. unselected answers which are incorrect.
our current method of achieving this is as follows -
but, as you can see from this simulated version under protonapia-type conditions, users would be unable to differentiate between correct and incorrect unselected answers - not ideal for an educational app.
we have a little (skeuomorphic, i know heh!) app for multiple choice question exams, this one is for learner driver theory tests, specifically.
the following image shows an in-test screen which the user has answered (chosen two answers, in this case), and is viewing the marked screen before moving on to the next question.
the requirements for this screen were originally to show:
1. selected answers which are correct,
2. selected answers which are incorrect,
3. unselected answers which are correct, and
4. unselected answers which are incorrect.
our current method of achieving this is as follows -
but, as you can see from this simulated version under protonapia-type conditions, users would be unable to differentiate between correct and incorrect unselected answers - not ideal for an educational app.
Comments
below are some examples of how to overcome the problems faced by colourblind users, whilst trying to keep consistency in visual importance or weight for all users, colour-seeing, or not.
my preference is top left, whilst an 'expert' has stated that the design top-right is satisfactory.
however, i kind of disagree slightly with this. reason being, as you can see in the simulated version under protonapia-type conditions, the unselected incorrect answers carry far less visual weight than the unselected correct answer. it's not a huge deal, i concede, but if we're doing this, might as well try for something better, right?
the only problem with the top-left example is that the unselected marks do not meet the minimum contrast ratio in the w3g guidelines (but it's a little unclear, as in this state they could 'technically' be unselectable UI elements, and so do not need to meet those requirements).
so far, by removing the colour outlines on the unselected buttons, i've managed to make it far more apparent which buttons are selected or unselected, yet retained the helpful 'correct/incorrect' element of it, which benefits all users.
i personally feel that having the faded white marks on the unselected buttons (top left example) works well, even though they do not meet the minimum contrast levels (i can read them fine, but then i have full-colour vision).
now, i guess that if we were absolutely required to follow the contrast guidelines, then i'd have to make the unselected marks (heck, and text for that matter) white. the problem with this is that it then lowers the contrast between the selected and unselected answers, gah...
i have a meeting tomorrow to discuss this (because i'm being 'difficult' by wanting to take this opportunity to do things right, ugh). unless someone has some good ideas here, i'll let you know how it goes hehe
*type type type, sorry *
examples showing other icons in the app:
I like the simplicity of it though.