Anpassen der Textfarbe basierend auf der Hintergrundhelligkeit

Um eine optimale Lesbarkeit zu erreichen, ist es oft erforderlich, die Textfarbe an den Kontrast zum Hintergrund anzupassen. In diesem Fall besteht der gewünschte Effekt darin, die Textfarbe oder Bilder basierend auf dem Helligkeitsgrad der Hintergrundpixel dynamisch zu ändern.

Ansätze zur Kontrastanpassung

• Leuchtkraftberechnung: Berechnen Sie den gewichteten Durchschnitt der Farbkanäle (RGB), um die Helligkeit zu bestimmen Ebene.
• Kontrastverhältnis: Vergleichen Sie die Helligkeit von Text und Hintergrund, um einen ausreichenden Kontrast für die visuelle Zugänglichkeit sicherzustellen.

Verfügbare Ressourcen

• W3C Contrast Checker: Das World Wide Web Consortium (W3C) bietet einen standardisierten Algorithmus zur Berechnung der Helligkeit einer Farbe und zur Gewährleistung eines angemessenen Kontrasts.
• Berechnung der Farbhelligkeit: Entdecken Sie Online-Ressourcen, die Funktionen zur Quantifizierung der Helligkeit einer bestimmten Farbe bieten.

W3C-Kontrastalgorithmus

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

Dieser Algorithmus sorgt für eine optisch optimale Auswahl der Textfarbe basierend auf der Hintergrundhelligkeit.