I'm working on a dark design which is composed on a list with alternated row colors ( #252425 and #121314 ) and I use different colors for the text on it ( #85bb23, #6F6A6F, #FFFFFF, #C50005, #2AAADB ).

Every time I choose a color to highlight a line (on click), I realize that its combination with one of the colors above looks ugly (or the text become unreadable because of low contrast)

Is there a technique (or a tool) to choose this color efficiently?

  • The dark red definitely gives insufficient contrast. Try some colors that work, e.g. websafecolors.info or flatuicolors.com – imrek Mar 15 '15 at 15:07
  • Also, try different displays, some happen to have less contrast than others. It's sometimes surprising to see how awful your design looks on a low contrast display. – imrek Mar 15 '15 at 15:11
  • This question might help! Do you have a sample with your selected state, or is the grey one selected? – Yisela Mar 16 '15 at 9:24

The highlighting of your row could be a solid color instead. If the color uses the whole horizontal space, and your text remains white, you only need to worry about the color looking ok with the rest of the text.

For example:

enter image description here

enter image description here


There are different colour palette creators, some that help you create your own and some that give you user generated palettes as well, using them you can find other combinations that might work. The main tools I like are Adobe Kuler, recently renamed as Adobe Color CC and Colourlovers

  • This answer doesn't even mention highlighting - the entire purpose of the question – Zach Saucier Mar 15 '15 at 17:07

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.