Change Text Color Based on Background

General
1

If I recall correctly there was a post about changing the text color based on the background color. If it was dark it would tell you to make the text white and if was light it would tell you to make the text black. Anyone have a link to that post and/or code?

2

Seems it was me that asked that question a year or so ago… If I can recall what project it was for I can get the exact code.

But it seemed to be the process was to convert the background color to grayscale… and then based on the “grayvalue” use Black or White for the foreground…

gray=(c.red * 0.299)+(c.green * 0.587) + (c.Blue *0.114)
3

[code]Public Function ContrastingTextColor(InputColor as Color) as Color
if (InputColor.Red0.299 + InputColor.Green0.587 + InputColor.Blue*0.114) > 128 then
Return &c000000
else
Return &cFFFFFE
end if

End Function
[/code]

4

Yuppp… pretty much what I remembered… although I think I had to adjust the “128” to get better results

5

Thanks!

6

Your welcome.

BTW The reason the light color is not pure white in my function is “historical”… I needed to make sure it did not interact when one set transparent = 1 where white became transparent.

In this age of DarkMode (I don’t have Mojave installed so don’t know if it matters) maybe returning an ‘off-black’ as well as an ‘off-white’ might be good idea to prevent unexpected results?

Also I wrote that before there was an alpha channel, though that likely does not matter for this usage.

  • karen
7

That’s fair. This application doesn’t support DarkMode and I don’t see it doing so for a while if ever. Although now that I’ve said that I’m sure the client will change their mind tomorrow. :slight_smile:

8

If you need more than black or white, I have a FindContrastingColor method in https://github.com/thommcgrath/Beacon/blob/master/Project/Modules/BeaconUI.xojo_code that takes an foreground and background color and adjusts the brightness in both directions until it finds a color that passes the WCAG 2.0 specifications. Of course, if the colors already pass, the foreground will be unaltered. And if the color can’t pass, it’ll pick either white or black depending on which provides more contrast.

9

Don’t need that now but you never know what something like that will come in handy. Thanks Thom!