Using Javascript to change text color based on text box color

[walterg88984081]

Hey everyone.

I am creating an embroidery form for my job. I have text boxes where you can input the item number for a particular thread color and the text box changes its RGB color values to match the color of the thread. My problem is that the text is black and can be hard to read on darker color boxes. Is there any way to use the RGB values to have the text change to be white on darker color boxes and black on lighter color boxes?

I'm fairly new to Javascript and any help would be appreciated.

[try67]

Yes, but you need to define a way to programmatically distinguish between "darker" and "lighter" colors for that, which is not trivial...

[rana26141933e74k]

Thank you so much okay take care Allah hafiz

[walterg88984081]

My thought was to use the RGB values to essentially define the brightness of the color. Since each RGB value is expressed in a range of 0 to 1, my ideas was to write a script that added each value together then devided the result by 3. If the output was over 0.5 then the text would be black, if under 0.5 then the text would be white. (R+G+B)/3 = Brightness. I just dont know how to express that in Javascript.

[try67 · Accepted solution]

 In that case you can do it like this:

function calcColorBrightness(c) {
	
	if (c.length==4 && c[0]=="RGB") { // RGB
		return (c[1]+c[2]+c[3])/3;
	
	} else if (c.length==5 && c[0]=="CMYK") { // CMYK ???
	
	} else if (c.length==2 && c[0]=="G") { // Grayscale ???
	 
	}
	return 0;
}

event.target.textColor = calcColorBrightness(event.target.fillColor) < 0.5 ? color.white : color.black;

[walterg88984081]

That worked like a charm. Thank You.

[JR Boulay]

If you use Acrobat with the dark gray interface you will notice that the Acrobat programmers are still unable to manage the contrast of the texts while the background color is fixed and known.

If you can do it with JavaScript it would be nice to share your script with them. 😉