If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element's style — you must do so using CSS. Bron: http://www.kennethcachia.com/background-check/

background-check.min.js

/* BackgroundCheck
   http://kennethcachia.com/background-check
   v1.0.0 */

!function(a,b){"function"==typeof define&&define.amd?define(b):a.BackgroundCheck=b(a)}(this,function(){"use strict";function a(a){if(void 0===a||void 0===a.targets)throw"Missing attributes";w.targets=d(a.targets),w.images=d(a.images||"img"),w.changeParent=a.changeParent||!1,w.threshold=a.threshold||50,w.minOverlap=a.minOverlap||50,w.classes=a.classes||{dark:"background--dark",light:"background--light"},w.windowEvents=a.windowEvents||!0,w.maxDuration=a.maxDuration||500,w.mask=a.mask||{r:0,g:255,b:0},w.debug=a.debug||!1,void 0===q&&(e(),q&&(r.style.position="fixed",r.style.top="0px",r.style.left="0px",r.style.width="100%",r.style.height="100%",window.addEventListener(v,n.bind(null,function(){g(),m()})),window.addEventListener("scroll",n.bind(null,m)),g(),m()))}function b(){q=null,r=null,s=null,w={},t&&clearTimeout(t)}function c(a){p("debug")&&console.log(a)}function d(a){var b=a;if("string"==typeof a?b=document.querySelectorAll(a):1===a.nodeType&&(b=[a]),!b||0===b.length)throw"Elements not found";return b}function e(){r=document.createElement("canvas"),r&&r.getContext?(s=r.getContext("2d"),q=!0):q=!1}function f(a){var d=(new Date).getTime()-a;c("Duration: "+d+"ms"),d>p("maxDuration")&&(console.log("BackgroundCheck - Killed"),i(),b())}function g(){u={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},r.width=document.body.clientWidth,r.height=window.innerHeight}function h(a){var b=a.getBoundingClientRect();s.drawImage(a,b.left,b.top,b.width,b.height)}function i(a){for(var b,c=a?[a]:p("targets"),d=0;d<c.length;d++)b=c[d],b=p("changeParent")?b.parentNode:b,b.className=b.className.replace(" "+p("classes").light,""),b.className=b.className.replace(" "+p("classes").dark,"")}function j(a){var b,d=a.getBoundingClientRect(),e=0,f=0,g=p("mask");if(d.width>0&&d.height>0){i(a),a=p("changeParent")?a.parentNode:a,b=s.getImageData(d.left,d.top,d.width,d.height).data;for(var h=0;h<b.length;h+=4)b[h]===g.r&&b[h+1]===g.g&&b[h+2]===g.b&&f++,e+=.2126*b[h]+.7152*b[h+1]+.0722*b[h+2];b=b.length/4+1,e=e/b/255,f<=b*(1-p("minOverlap")/100)&&(c("Target: "+a.className+" lum: "+e),a.className+=" "+(e<=p("threshold")/100?p("classes").dark:p("classes").light))}}function k(a,b){return a=a.getBoundingClientRect(),b=b===u?b:b.getBoundingClientRect(),!(a.right<b.left||a.left>b.right||a.top>b.bottom||a.bottom<b.top)}function l(a){for(var b,c=(new Date).getTime(),d=a&&"IMG"===a.tagName?"image":"targets",e=a?!1:!0,g=p("targets").length,h=0;g>h;h++)b=p("targets")[h],k(b,u)&&("targets"!==d||a&&a!==b?"image"===d&&k(b,a)&&j(b):(e=!0,j(b)));if("targets"===d&&!e)throw a+" is not a target";f(c)}function m(a,b,d){var e,f=!1,g=p("mask"),i=d?[d]:p("images");if(c("--- BackgroundCheck ---"),c("Loading: "+f),c("onLoad event: "+(d&&d.src)),q){b!==!0&&(s.clearRect(0,0,r.width,r.height),s.fillStyle="rgb("+g.r+", "+g.g+", "+g.b+")",s.fillRect(0,0,r.width,r.height));for(var j=0;j<i.length;j++)e=i[j],k(e,u)&&(0===e.naturalWidth?(f=!0,c("Loading... "+e.src),e.addEventListener("load",m.bind(null,a,!0,e))):(c("Drawing: "+e.src),h(e)));d||f?d&&l(d):l(a)}}function n(a){p("windowEvents")===!0&&(t&&clearTimeout(t),t=setTimeout(a,200))}function o(a,b){if(void 0===w[a])throw"Unknown property - "+a;if(void 0===b)throw"Missing value for "+a;if("targets"===a||"images"===a)try{b=d("images"!==a||b?b:"img")}catch(c){throw b=[],c}i(),w[a]=b,m()}function p(a){if(void 0===w[a])throw"Unknown property - "+a;return w[a]}var q,r,s,t,u,v=void 0!==window.orientation?"orientationchange":"resize",w={};return{init:a,destroy:b,refresh:m,set:o,get:p}});