LiveCode Forums.

Posted: **Sun Jul 07, 2019 9:07 pm**

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

Posted: **Mon Jul 08, 2019 8:19 am**

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

If I recall right, SampleStack "ColorChooser6789_2"
(sorry, currently not available)
uses a slightly different algorithm to compute a contrastColor on base of the contrastRatio.

Posted: **Mon Jul 08, 2019 3:27 pm**

Man that is awesome -hh!

Posted: **Tue Jul 09, 2019 10:54 pm**

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

LiveCode Forums.

Make text more readable on a background color

Make text more readable on a background color

Re: Make text more readable on a background color

Re: Make text more readable on a background color

Re: Make text more readable on a background color