Changer la couleur du texte en fonction de la luminosité de la zone d'arrière-plan couverte ?

Question

Je suis à la recherche d'un plugin ou d'une technique qui change la couleur d'un texte ou bascule entre des images/icônes prédéfinies en fonction de la luminosité moyenne des pixels couverts de l'image ou de la couleur d'arrière-plan de son parent.

Si la zone couverte par son fond est plutôt sombre, rendez le texte blanc ou changez les icônes.

De plus, ce serait génial si le script remarquait si le parent n'a pas de couleur de fond ou d'image définie et continuait ensuite à chercher la plus proche (de l'élément parent à son élément parent ).

Que pensez-vous, que savez-vous de cette idée ? Existe-t-il déjà quelque chose de similaire ? Des exemples ?

Answer 1

Des ressources intéressantes à cet égard :

• W3C - Assurez-vous que les combinaisons de couleurs d'avant-plan et d'arrière-plan offrent un contraste suffisant.
• Calculer la luminosité perçue d'une couleur

Voici l'algorithme du W3C (avec La démo de JSFiddle aussi ):

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>

Answer 2

Cet article sur les 24 façons de Calcul du contraste des couleurs pourrait vous intéresser. Ignorez la première série de fonctions car elles sont fausses, mais la formule YIQ vous aidera à déterminer si vous devez utiliser une couleur de premier plan claire ou foncée.

Une fois que vous avez obtenu la couleur d'arrière-plan de l'élément (ou de l'ancêtre), vous pouvez utiliser cette fonction de l'article pour déterminer une couleur d'avant-plan appropriée :

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';
}

Answer 3

mix-blend-mode fait l'affaire :

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>

Ajout (mars 2018) : Suite, un beau tutoriel expliquant tous les différents types de modes/implémentations : https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

Answer 4

Question intéressante. J'ai tout de suite pensé à inverser la couleur du fond en fonction du texte. Pour cela, il suffit d'analyser l'arrière-plan et d'inverser sa valeur RVB.

Quelque chose comme ça : 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

J'ai trouvé le Vérification des antécédents script pour être très utile.

Il détecte la luminosité générale de l'arrière-plan (qu'il s'agisse d'une image de fond ou d'une couleur), et applique une classe à l'élément de texte attribué ( background--light o background--dark ), qui dépend de la luminosité de l'arrière-plan.

Elle peut être appliquée à des éléments fixes ou en mouvement.

( Source : )