DEV Community


Discussion on: Changing text colour based on background colour luminosity

inhuofficial profile image
InHuOfficial • Edited

See I like the concept, but (and I could be reading it wrong) - does this not start failing the closer a colour has to a luminance of 127?

Instead, perhaps you could do something where you try and make the luminance +100, if it goes over 255 then try - 100?

That way you should always get good contrast?

jamiemcmanus profile image
Jamie Mc Manus Author

I can't believe I didn't notice that, thanks !

I have adjusted the code to add additional contrast.

inhuofficial profile image

I think you made another minor mistake 😜🀣

If you get a 220 luminosity result you are trying to add 100 to it and capping at 255. I think all you have done is swap your greater thans and less thans by mistake!

Also with the way you have done it you could actually just do

Less than 127, add 100. Greater than 127, remove 100. You will never go out of bounds so you don’t need the additional checks. (126+100 or 127 - 100, it will always be within 0 to 255.)