How Can I Dynamically Adjust Text Color Based on Background Brightness?

Adjusting Text Color Based on Background Brightness

Achieving optimal legibility often requires adjusting text color to contrast with the background. In this case, the desired effect is to dynamically switch the text color or images based on the brightness level of the background pixels.

Approaches for Contrast Adjustment

• Luminosity Calculation: Calculate the weighted average of the color channels (RGB) to determine the brightness level.
• Contrast Ratio: Compare the brightness of the text and background to ensure sufficient contrast for visual accessibility.

Available Resources

• W3C Contrast Checker: The World Wide Web Consortium (W3C) provides a standardized algorithm for calculating the brightness of a color and ensuring adequate contrast.
• Calculating Color Brightness: Explore online resources that offer functions to quantify the brightness of a given color.

W3C Contrast Algorithm

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

This algorithm ensures visually optimal text color selection based on background brightness.

The above is the detailed content of How Can I Dynamically Adjust Text Color Based on Background Brightness?. For more information, please follow other related articles on the PHP Chinese website!