Comment puis-je ajuster dynamiquement la couleur du texte en fonction de la luminosité de l'arrière-plan ?

Ajustement de la couleur du texte en fonction de la luminosité de l'arrière-plan

Pour obtenir une lisibilité optimale, il faut souvent ajuster la couleur du texte pour contraster avec l'arrière-plan. Dans ce cas, l'effet souhaité est de changer dynamiquement la couleur du texte ou des images en fonction du niveau de luminosité des pixels d'arrière-plan.

Approches de réglage du contraste

• Calcul de la luminosité : Calculez la moyenne pondérée des canaux de couleur (RVB) pour déterminer le niveau de luminosité.
• Rapport de contraste : Comparez la luminosité du texte et de l'arrière-plan pour garantir un contraste suffisant pour l'accessibilité visuelle.

Ressources disponibles

• Vérificateur de contraste du W3C : Le Consortium World Wide Web ( W3C) fournit un algorithme standardisé pour calculer la luminosité d'une couleur et garantir un contraste adéquat.
• Calcul de la luminosité des couleurs : Explorez les ressources en ligne qui offrent des fonctions permettant de quantifier la luminosité d'une couleur donnée.
🎜>

Algorithme de contraste du W3C

const rgb = [255, 0, 0];

function setContrast() {
  // Calculate brightness
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  // Set text color
  const textColour = (brightness > 125) ? 'black' : 'white';
  // Set background color
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';

  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

Cet algorithme garantit une sélection de couleur de texte visuellement optimale en fonction de la luminosité de l'arrière-plan.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!