0

I have groups of items, like:

<div data-group="1">Item</div>
<div data-group="1">Item</div>
<div data-group="1">Item</div>

<div data-group="2">Item</div>
<div data-group="2">Item</div>

I want to change the background color by group so I can tell them apart. But the background can't make the text unreadable.

I don't expect to have over 20 groups.

Is there a way to generate background colors that will always work with #000 text?

Or a way to know if it will work better with #000 or #fff text so I can flip the text color if needed?

Or should I give up the idea to make it dynamic and just pre-allocate 20 colors (like Trello does for labels)?

BrunoLM
  • 97,872
  • 84
  • 296
  • 452
  • Essentially **any** colour beyond a certain brightness will "work" if the text is pure black. – Oliver Charlesworth Apr 09 '17 at 23:22
  • Easiest solution would be use a list, but if you want to make a function that calculates random colors you can do that too. – epascarello Apr 09 '17 at 23:23
  • Since it's so easy to get palletes online or using browser extensions or other color tools, personally I would grab a bunch from there and put in array or stylesheet using incremental classes – charlietfl Apr 09 '17 at 23:31
  • 1
    http://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color you can check here. You may decide the text color depending on background or you can get another random bg color if it doesnt fit with your text color. – ali.turan Apr 09 '17 at 23:32

1 Answers1

1

I would recommend using a predetermined list of colors, because you not only want the text to be legible on the background, but you also want the groups to be distinguishable from one another. If you have usability concerns, you might for instance want to shy away from colors that will look too similar to colorblind users. For more information see: http://www.somersault1824.com/tips-for-designing-scientific-figures-for-color-blind-readers/. That article contains a list of 15 colorblind safe colors that are distinguishable from one another.

You can then use something like the following jquery code (if jquery is available) to assign it: 

var colorList = [colors...]
​
$('div').css('background-color', function(){
   return colorList[this.getAttribute('data-group')]
})
Rafael Kennedy
  • 964
  • 5
  • 16