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é.
• Contraste Ratio : 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 W3C : Le World Wide Web Consortium (W3C) fournit un algorithme standardisé pour calculer la luminosité d'une couleur et garantir une luminosité adéquate. contraste.
• 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 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.