I'm designing an app that allows people to indicate if they are in or out of the office. When they change state, I'm showing a pop-up screen with an in icon or an out icon.

Currently the background colour for this pop-up is green for arriving and red for departure. Someone suggested that this might not be so good for color blind people.

I was thinking maybe black logo on green background for arrival and white logo on dark grey background for departure? Any other thoughts?

  • 1
    Given Bevan's response, I suggest making the 'in' icon look like a shining light indicator, while leaving the 'out' icon dull (like an LED which is turned on/off). The shining effect could be achieved by surrounding the 'in' icon with a little "glow" effect, and adding a few rays radiating outwards. (Lens flare is also an option, but might be going too far!) Jan 25, 2014 at 7:00

1 Answer 1


You don't need to avoid colours to provide support for colour-blind people, you just need to make sure colour isn't the only thing to use.

Check out the "jelly bean" presence indicators used by Microsoft Office Communicator:

Office Communicator         Office Communicator http://neuralyte.org/~joey/images/ux.se/UQY2K_greyscaled.jpg

(Image taken from here)

The indicator for "Available" has a double-ring; "Do Not Disturb" has a horizontal bar and the other three are basically "not available".

I'd suggest that instead of changing the background of the popup, include a prominent icon to indicate the new status - with sufficient difference in shape or detail (e.g. the double ring for "Available" shown above) that colour isn't necessary to the perception, just a nice extra.

Two last comments.

Firstly, you can do much worse than copy UX ideas from companies that spend millions of dollars on the research.

Secondly, I'm writing from the perspective of someone who has a colour vision defect (for example, the "Be Right Back" and "Away" jelly beans look the same to me, but I can tell the rest apart).

  • 3
    They look the same because they are the same!
    – you786
    Jan 25, 2014 at 8:18
  • According to the eyedropper tool in Paint.Net, "Be Right Back" is slightly more yellow than "Away" - at least on my work PC. Interestingly, in the screenshot I used above, they are the same - can't explain the difference.
    – Bevan
    Jan 25, 2014 at 8:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.