I am trying to implement a range display, like in the image and the main challenge I am facing is to dynamically switch the font color of value when its background is darker.

I have already tried mix-blend-mode: difference;, but it doesn't help.

I want the font color to switch only between the two colors displayed in the image.