¿Cambiar el color del texto según el brillo del área de fondo cubierta?

Ya he pensado en lo siguiente por un tiempo, así que ahora quiero conocer vuestras opiniones, posibles soluciones, etc.

Estoy buscando un complemento o técnica que cambie el color de un texto o cambie entre imágenes / iconos predefinidos según el brillo promedio de los píxeles cubiertos de la imagen o color de fondo de los padres.

Si el área cubierta de su fondo es bastante oscura, haga que el texto sea blanco o cambie los iconos.

Además, sería genial si el script notase si el padre no tiene un color de fondo o una imagen definidos y luego continúe buscando el más cercano (desde el elemento principal hasta su elemento principal ..).

¿Qué piensas, sabes de esta idea? ¿Hay algo similar por ahí? ejemplos de guiones?

Saludos, J.

Recursos interesantes para esto:

• W3C: asegúrese de que las combinaciones de colores de primer plano y de fondo brinden suficiente contraste
• Cálculo del brillo percibido de un color

Aquí está el algoritmo W3C (con la demostración de JSFiddle también ):

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update colours
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

#bg {
  width: 200px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bg">Text Example</div>

Este artículo sobre 24 formas de calcular el contraste de color puede ser de su interés. Ignore el primer conjunto de funciones porque son incorrectas, pero la fórmula YIQ le ayudará a determinar si debe utilizar un color de primer plano claro u oscuro.

Una vez que obtenga el color de fondo del elemento (o del antepasado), puede usar esta función del artículo para determinar un color de primer plano adecuado:

function getContrastYIQ(hexcolor){
    hexcolor = hexcolor.replace("#", "");
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

Interesante pregunta. Mi pensamiento inmediato fue invertir el color del fondo como texto. Esto implica simplemente analizar el fondo e invertir su valor RGB.

Algo como esto: http://jsfiddle.net/2VTnZ/2/

var rgb = $('#test').css('backgroundColor');
var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var brightness = 1;

var r = colors[1];
var g = colors[2];
var b = colors[3];

var ir = Math.floor((255-r)*brightness);
var ig = Math.floor((255-g)*brightness);
var ib = Math.floor((255-b)*brightness);

$('#test').css('color', 'rgb('+ir+','+ig+','+ib+')');

mix-blend-mode Hace el truco:

header {
  overflow: hidden;
  height: 100vh;
  background: url(https://www.w3schools.com/html/pic_mountain.jpg) 50%/cover;
}

h2 {
  color: white;
  font: 900 35vmin/50vh arial;
  text-align: center;
  mix-blend-mode: difference;
  filter: drop-shadow(0.05em 0.05em orange);
}

<header>
  <h2 contentEditable role='textbox' aria-multiline='true' >Edit me here</h2>
</header>

Adición (marzo de 2018): A continuación, un buen tutorial que explica todos los diferentes tipos de modos / implementaciones: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

He encontrado que el script BackgroundCheck es muy útil.

Detecta el brillo general del fondo (ya sea una imagen de fondo o un color) y aplica una clase al elemento de texto asignado ( background--lighto background--dark), dependiendo del brillo del fondo.

Se puede aplicar a elementos fijos y móviles.

( Fuente )

Si está utilizando ES6, convierta hexadecimal a RGB y luego puede usar esto:

const hexToRgb = hex => {
    // turn hex val to RGB
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result
        ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16)
          }
        : null
}

// calc to work out if it will match on black or white better
const setContrast = rgb =>
    (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 > 125 ? 'black' : 'white'

const getCorrectColor = setContrast(hexToRgb(#ffffff))

Aquí está mi intento:

(function ($) {
    $.fn.contrastingText = function () {
        var el = this,
            transparent;
        transparent = function (c) {
            var m = c.match(/[0-9]+/g);
            if (m !== null) {
                return !!m[3];
            }
            else return false;
        };
        while (transparent(el.css('background-color'))) {
            el = el.parent();
        }
        var parts = el.css('background-color').match(/[0-9]+/g);
        this.lightBackground = !!Math.round(
            (
                parseInt(parts[0], 10) + // red
                parseInt(parts[1], 10) + // green
                parseInt(parts[2], 10) // blue
            ) / 765 // 255 * 3, so that we avg, then normalize to 1
        );
        if (this.lightBackground) {
            this.css('color', 'black');
        } else {
            this.css('color', 'white');
        }
        return this;
    };
}(jQuery));

Entonces para usarlo:

var t = $('#my-el');
t.contrastingText();

Esto inmediatamente hará que el texto sea blanco o negro, según corresponda. Para hacer los iconos:

if (t.lightBackground) {
    iconSuffix = 'black';
} else {
    iconSuffix = 'white';
}

Entonces cada icono podría verse así 'save' + iconSuffix + '.jpg'.

Tenga en cuenta que esto no funcionará donde un contenedor desborde a su padre (por ejemplo, si la altura de CSS es 0 y el desbordamiento no está oculto). Hacer que eso funcione sería mucho más complejo.

Al combinar las respuestas [@ alex-ball, @jeremyharris] encontré que esta es la mejor manera para mí:

        $('.elzahaby-bg').each(function () {
            var rgb = $(this).css('backgroundColor');
            var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

            var r = colors[1];
            var g = colors[2];
            var b = colors[3];

            var o = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) /1000);

            if(o > 125) {
                $(this).css('color', 'black');
            }else{
                $(this).css('color', 'white');
            }
        });

*{
    padding: 9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='elzahaby-bg' style='background-color:#000'>color is white</div>

<div class='elzahaby-bg' style='background-color:#fff'>color is black</div>
<div class='elzahaby-bg' style='background-color:yellow'>color is black</div>
<div class='elzahaby-bg' style='background-color:red'>color is white</div>