Auto-Change The Color Of Elements According To The Background – BackgroundCheck


When using text over images, if the image is random, the text can become unreadable once the text + image colors are similar.

BackgroundCheck is a small JavaScript library for preventing such issues by auto-changing the style of the element to a darker or lighter one.


Once an element overlaps an image, it adds  .background--dark or .background--light classes to it. And, creating the related styles for each class would be enough.

It is possible to limit the functionality to only selected images, define the dark/light threshold and more.