I need to decide the colors for these states.

Approved, Reject, Corrected

The functions are like this. One user can approve some task but it can correct be corrected by some other user. Here hierarchy of these two users are not known.

  • 1
    you may have already considered this but don't rely solely on colour to denote the states. it should be supplementary to another device (e.g. inline icons, etc). – Dave Haigh Aug 7 '14 at 11:59
  • yes, I have thought of using the text in place of colors but it is the need for our application to use colors. In this case I have used the light red for reject, green for approve and orange for corrected. – ΛBHINΛV Aug 7 '14 at 12:09
  • Excellent point by @DaveHaigh - prevalence of colour-blindness is surprisingly high (~9% - colour-blindness.com/general/prevalence) - not a case of text instead of colour but just making use of text/icons as a fallback. – Whitingx Aug 7 '14 at 12:12
  • 1
    ux.mailchimp.com/patterns/feedback - offers some good examples around this design pattern - hope this helps. – Whitingx Aug 7 '14 at 12:17

Green for approved, red for reject, yellow for corrected.

Green for yes and red for no seem to be standard colours, yellow is debatable but might be a good choice to complete the stop light colours.

  • 1
    For traffic lights I would call this Amber / Orange rather than yellow. – Franchesca Aug 7 '14 at 12:53
  • @Franchesca oh yes, always forget that it's called Amber in English, thanks for the hint – msp Aug 7 '14 at 13:31
  • 1
    Agreeing on colour names is hard: blog.xkcd.com/2010/05/03/color-survey-results ;) – Franchesca Aug 7 '14 at 13:44
  • 1
    @Franchesca Hehe, I love xkcd. This gets very off-topic now, but in case you didn't know the whatif-section of xkcd: whatif.xkcd.com – msp Aug 7 '14 at 13:48

I would suggest you would reconsider using just colours. Red and Green are very similar to colourblind people, use photoshop to check the difference. The best way to approach it is:

  • Approved: Green Tick, tick in a green circle.
  • Rejected: Red X, x in a red circle
  • Corrected: if still approved display ✓[edited], of rejected x[eddited]

Edited could be next to the icon, at the beginning of the task or at the end of the task.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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