Question

107

Change text color based on brightness of the covered background area?

rated 0 times [ 109] [ 2] / answers: 1 / hits: 121937 / 12 Years ago, wed, august 8, 2012, 12:00:00

I am looking for a plugin or technique that changes a text's color or switches between predefined images/icons depending on the average brightness of the covered pixels of its parent's background-image or -color.

If the covered area of it's background is rather dark, make the text white or switch the icons.

Additionally, it'd be great if the script would notice if the parent has no defined background-color or -image and then continue to search for the nearest (from parent element to its parent element..).

What do you think, know about this idea? Is there something similar out there already? Examples?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

victorr

Add To Favorites

Follow

Total Points: 193

Total Questions: 86

Total Answers: 105

Location: Pitcairn Islands

Member since Thu, Jun 24, 2021

3 Years ago

victorr questions

1 Dot product of two arrays in Javascript

Fri, Nov 13, 20, 00:00, 4 Years ago

1 Rendering a component only after API request is finished React hooks

Thu, Oct 15, 20, 00:00, 4 Years ago

1 Thousand separator input with React Hooks

Sat, Jul 25, 20, 00:00, 4 Years ago

1 Typescript object destructuring is caught by ESLint no-unused-vars rule

Fri, Jul 10, 20, 00:00, 4 Years ago

1 How to pass data to {props.children}

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 12 Years ago deving · Accepted Answer

Interesting resources for this:

W3C - Ensure that foreground and background color combinations provide sufficient contrast

Calculating the Perceived Brightness of a Color

Here's the W3C algorithm (with JSFiddle demo too):

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>