javascript - poner - ¿Cambiar el color del texto en función del brillo del área de fondo cubierta?

letras de colores para escribir

Question

Hace tiempo que pienso en lo siguiente, así que ahora quiero saber sus 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 de fondo o color de su padre.

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

Además, sería genial si la secuencia de comandos se daría cuenta si el elemento primario no tiene un color de fondo definido o una imagen y luego continúe buscando el elemento más cercano (del elemento principal al elemento principal ...).

¿Qué piensas, sabes sobre esta idea? ¿Ya hay algo similar? script-examples?

Cheers, J.

Answer 1

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();
        }
        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 normalise 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 hará que el texto sea negro o blanco, según corresponda. Para hacer los iconos:

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

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

Tenga en cuenta que esto no funcionará en caso de que un contenedor rebase su elemento principal (por ejemplo, si la altura del CSS es 0 y el desbordamiento no está oculto). Para que funcione eso sería mucho más complejo.

Answer 2

Este artículo sobre 24 formas de calcular el contraste de color podría ser de su interés. Ignora el primer conjunto de funciones porque están equivocadas, pero la fórmula YIQ te ayudará a determinar si usarás o no un color de primer plano claro u oscuro.

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

function getContrastYIQ(hexcolor){
    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'';
}

Answer 3

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--light o background--dark ), dependiendo del brillo del fondo.

Se puede aplicar a elementos quietos y en movimiento.

( Source )

Answer 4

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+'')'');

Answer 5

Recursos interesantes para esto:

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

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

var rgb = [255, 0, 0];

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

function setContrast() {
  // randomly update
  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
  var o = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  var fore = (o > 125) ? ''black'' : ''white'';
  var back = ''rgb('' + rgb[0] + '','' + rgb[1] + '','' + rgb[2] + '')'';
  $(''#bg'').css(''color'', fore); 
  $(''#bg'').css(''background-color'', back);
  

}

#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>

Answer 6

Si está utilizando ES6, convierta hexadecimal a RBG 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))

Answer 7

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/