One part of my application allows users to select items in order to manipulate the items, and I want to put a border around the items with a color to show when it's selected.

Normally the users will select one item (i.e., delete item) or two items (i.e., move item one after item two) only.

I was thinking that one color would represent the first selected item, and a second color would represent the second item, so as to not confuse the two items selected This is especially important in the case of moving one item to the position after the another item, where it's important to know which item is moving after the other.

My questions are.

  1. Should each item have their own selected color, or should the same color be used for both items?

  2. Are there certain colors that are preferred, over other colors to use when selecting items? i.e., green over red.

NOTE: I wanted to mention that I'm not exactly highlighting the entire item, but merely adding a colored border around the item, so the items will still look the same, besides a 2px or so border around the item.

  • @Izhaki so what do you recommend in that case?
    – XaolingBao
    Commented Feb 22, 2017 at 1:44

2 Answers 2


Use same color for selection that will reduce cognitive load unless you want to show a queue of selected items based on selected time. If your intention is to show a queue then choose the color that suits your application theme, but don't mix it with multiple colors - you can use shades of one color such as; dark for the first and little faint for the second and so on.

Don't just rely on colors - think about color-blind users, they won't see any change if you only change colors.

Along with color change also consider changing the dimensions of the selected items - like making the selected items a little larger than the rest.

  • 2
    Good answer, color based on brand and shades for order. It is more important that the color creates enough contrast with the other element's color, than the color itself. The color could be in the background primarily but possibly in the border of the element or the text-color.
    – Alvaro
    Commented Feb 22, 2017 at 18:31
  • Thanks for the tips. There is no queue, just 1 or 2 items being selected, but would like to show which is the first and second selection, even though the users should know which one they selected first or second. The items will get a border colored around them, not the entire item being highlighted. I should make that clear in the OP. I like the dimension idea though, that might work as well. Does the shade matter if it's the first or second one that's darker? Is there an order that is usually followed i.e., darker first, then lighter? Thanks.
    – XaolingBao
    Commented Feb 23, 2017 at 14:56

Choice of colors depends on nature / industry of your application. But pale yellow for first selection and light blue for other will be good in your case.

  • How did you get to that conclusion? Commented Feb 22, 2017 at 7:49

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.