Change colour of text foreground based on background color input

Question

I have an input element which allows users to set the background colour of the input element.

When the user sets the background colour of the input element, I want the text in the input element to be a contrasting colour to the original colour.

For example: The user inputs "black" as the input background colour; then the text colour of the input will be white. However if the user inputs "white" as the input colour, the text colour would be black. (There are more cases than just black or white.)

How would I achieve this? I know that you can use another element on top of a background and set mix-blend-mode, but I don't want to because that would remove the point of the input.

Thanks!

Answer 1

You could calculate if black or white would have a higher contrast with the color given by the user based on the hexadecimal value of the color.

This link goes into detail on two ways to do this calculation. https://24ways.org/2010/calculating-color-contrast/