## Make text more readable on a background color

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

bogs
Posts: 3791
Joined: Sat Feb 25, 2017 10:45 pm

### Make text more readable on a background color

Ok, I'm working on another tutorial about Lc and colors, and although it is a very simple thing, I've managed to hit something I am not quite satisfied with, which is making the text on a background color readable.

The first code I attempted to do it with is just setting the text color to black or white based on an average of the RGB values divided by 2, which actually works out not too bad, but did have some inconsistencies...

Code: Select all

`````` put the backgroundColor of line x of field 1 into tmpCol
# determine a color offset to decide whether to use black or white text...
if sum(tmpCol) /2 < 160 then
set the textColor of line x of field 1 to "white"
else
set the textColor of line x of field 1 to "black"
end if
``````
RGB /2 method...
Next, I tried using the inverse of the background color, but I'm not sure I really understand how to arrive at it correctly after reading a few articles about it. Again, there are some inconsistencies about how well it shows up...

Code: Select all

``````      put (255 - item 1 of tmpCol) & comma into tmpText1; put (255 - item 2 of tmpCol) & comma after tmpText1; put (255 - item 3 of tmpCol) after tmpText1;
set the textColor of line x of field 1 to tmpText1
``````
Feeling a bit inverted...
And lastly, I tried a basic math solution on the values based on whether they were lighter or darker...

Code: Select all

``````      if item 1 of tmpCol > 180 then
put 55 into item 1 of tmpCol
else
put 180 into item 1 of tmpCol
end if

if item 2 of tmpCol > 180 then
put 55 into item 2 of tmpCol
else
put 180 into item 2 of tmpCol
end if

if item 3 of tmpCol > 180 then
put 55 into item 3 of tmpCol
else
put 180 into item 3 of tmpCol
end if

set the textColor of line x of field 1 to tmpCol
``````
Which seems to work the best so far, until you get to certain members of the gray family of colors...
I'm feeling a bit gray...
I also tried something Hermann posted, about setting the ink of the field to various things, but apparently that only works well if the background is a solid color and not a different color each line. Or at least I couldn't figure out how to get it to go in this setup.

What I'd be really interested in reading is someone that knows how to do something *like* setting the ink, which works out great in the script editor, but in a way where it takes the background color of each line into account.

Alternately, if someone knows how to simulate doing that, or just plain has a better way I haven't already thunk of

[-hh]
VIP Livecode Opensource Backer
Posts: 2120
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

### Re: Make text more readable on a background color

Computes the contrastRatio for two colors:
viewtopic.php?p=147159#p147159

If I recall right, SampleStack "ColorChooser6789_2"
( http://livecodeshare.runrev.com/stack/854/ )
uses a slightly different algorithm to compute a contrastColor on base of the contrastRatio.
shiftLock happens

bogs
Posts: 3791
Joined: Sat Feb 25, 2017 10:45 pm

### Re: Make text more readable on a background color

Man that is awesome -hh!

bogs
Posts: 3791
Joined: Sat Feb 25, 2017 10:45 pm

### Re: Make text more readable on a background color

I finally wound up going with a slightly simpler version of the formula in your example -hh. Just for posterity -

Code: Select all

``````# could be in a button, an event, whatever...
put empty into field 1
put the colorNames into field 1
put empty into tmpCol

repeat with x=1 to the number of lines of field 1
set the backgroundcolor of line x of field 1 to line x of field 1

# put the rgb value of the color on the line...
put tab & the backgroundColor of line x of field 1 after line x of field 1
put the backgroundColor of line x of field 1 into tmpCol

# put the hex value of the color...
put item 1 of tmpCol into tmpR; put item 2 of tmpCol into tmpG; put item 3 of tmpCol into tmpB
put baseConvert(tmpR,10,16) into tmpR; put baseConvert(tmpG,10,16) into tmpG; put baseConvert(tmpB,10,16) into tmpB;
put tab & "#" & tmpR & tmpG & tmpB after line x of field 1

# calculate brightness of the background color...
put ((item 1 of tmpCol * 299) + (item 2 of tmpCol *  587) + (item 3 of tmpCol *  114)) / 1000 into tmpBright

# set the text color to black or white...
if tmpBright > 127.5 then
set the textColor of line x of field 1 to "black"
else
set the textColor of line x of field 1 to "white"
end if

end repeat
``````