Which TextColor (black, white) is best for a custom Background Color

  1. 5 months ago

    Jürg O

    Feb 7 Pre-Release Testers, Xojo Pro

    In the sitatuation where the user can select any Color as BackgroundColor:
    What kind of algorithm/detection do you suggest to detect which FontColor (black or white) is "best readable" on that (userdefined) BackgroundColor?
    If you even have a code snipplet: thanks even more ;)

    In order to have an answer marked (Note @jim m 's input below if you're using this CodeSnipplet):
    An attempt with "perceived Luminance" (according to: https://www.w3.org/TR/AERT/#color-contrast)

    Color brightness is determined by the following formula:

    Dim dVal As Double = (mColor.Red * 0.299) + (mColor.Green * 0.587) + (mColor.Blue * 0.114)
      if (dVal <= 127.5) then
        'Dark Background: Bright TextColor
        colBestForText = &cFFFFFF
      else
        'Bright Background: Dark TextColor
        colBestForText = &c000000
      end if

    @jim m Looks good to me. Only thing I would change is to move the threshold up to 180 or so. I feel like it's easier on the eyes to look at white on medium/light gray than black on gray.

  2. Jürg O

    Feb 7 Pre-Release Testers, Xojo Pro

    An attempt with "perceived Luminance" (according to: https://www.w3.org/TR/AERT/#color-contrast)

    Color brightness is determined by the following formula:

     Dim dVal As Double = (mColor.Red * 0.299) + (mColor.Green * 0.587) + (mColor.Blue * 0.114)
      if (dVal <= 127.5) then
        'Dark Background: Bright TextColor
        colBestForText = &cFFFFFF
      else
        'Bright Background: Dark TextColor
        colBestForText = &c000000
      end if

    Is this good enough - or what do you use?

  3. Alfred V

    Feb 7 Pre-Release Testers

    Unless you are going to color your background (not using black or white), I would stick to the guidelines of macOS and windows. The link you provide is a draft document of the year 2000, and has not been updated to current standards as far as I can judge. Let the system handle it, i.e., light and dark mode on macOS and high-contrast on windows. Apple and Microsoft do know about contrast guidelines.

  4. Dave S

    Feb 7 San Diego, California USA

    @Alfred V;Hoek Let the system handle it

    The system won't/can't choose an appropriate contrasting color to a specific background color
    The only thing "darkmode" will do is swap BLACK for WHITE if those are one of the choices you assigned.
    But to swap textcolors as you change background colors is not supported, and is what this topic and the above solution address, since "user defined background" was specifically mentioned.

  5. Alfred V

    Feb 7 Pre-Release Testers

    Dave, it is all about color vision and some suffer from not being able to see colors. Yes I understand the thread, there's no need to start a discussion about whether or not I would understand it.

    Color blindness is an issue and requires further considerations, suggesting, for example, to refrain from using a colored background. That's all.

  6. Dave S

    Feb 7 San Diego, California USA

    Alfred... sit down, chill out. Who mentioned color-blindness? What makes you assume the OP wishes to support that? He made a request for a very specific situation, a situation for which a viable solution was supplied.

    Fun fact.. only 4.5% of the worlds population (on average) are to some degree "color-blind"... and and those do see color, just not the same as the other 95.5% (its rare for color-blindness to be shades of gray only)

  7. jim m

    Feb 7 Pre-Release Testers, Xojo Pro piDog.com

    @Jürg O An attempt with "perceived Luminance" (according to: https://www.w3.org/TR/AERT/#color-contrast )

    Looks good to me. Only thing I would change is to move the threshold up to 180 or so. I feel like it's easier on the eyes to look at white on medium/light gray than black on gray.

  8. It seems to me that if your user can select a background color, let them select the font color. No worries about visual limitations or personal preferences or taste.

    Dennis

  9. Dave S

    Feb 7 San Diego, California USA

    @Dennis H It seems to me that if your user can select a background color

    there may also be situations (not specificly related to the OP) where the background color shifts based on program logic, and the text color needs to compensate as well

  10. 4 months ago

    @Dave S He made a request for a very specific situation
    @Jürg O In the sitatuation where the user can select any Color as BackgroundColor

    I was addressing the very specific situation posed by the OP.

  11. Jürg O

    Feb 7 Pre-Release Testers, Xojo Pro

    @jim m Looks good to me. Only thing I would change is to move the threshold up to 180 or so. I feel like it's easier on the eyes to look at white on medium/light gray than black on gray.

    Thanks for this input!

    @Dennis H let them select the font color.

    @Dave S there may also be situations (not specificly related to the OP) where the background color shifts based on program logic, and the text color needs to compensate as well

    Quite close :) It has nothing to do with DarkMode. It's for the situation where the Background in some "table cells" get different colors (a combination of user-selected and some "business-logic").
    And there is "Text" that needs to be drawn on top of that BackgroundColor. Not red/blue/user-selected - just "plain Text".

    So it seems to me that the possible solution mentioned above works good enough for this situation.
    And I appreciate the Input about why you suggest to use a different treshold than "50%".

  12. Richard D

    Feb 7 Pre-Release Testers, Xojo Pro Europe (UK, London)

    @Jürg O An attempt with "perceived Luminance" (according to: https://www.w3.org/TR/AERT/#color-contrast )

     Dim dVal As Double = (mColor.Red * 0.299) + (mColor.Green * 0.587) + (mColor.Blue * 0.114)
      if (dVal <= 127.5) then
        'Dark Background: Bright TextColor
        colBestForText = &cFFFFFF
      else
        'Bright Background: Dark TextColor
        colBestForText = &c000000
      end if

    Is this good enough - or what do you use?

    thanks for the code above, Jürg Otter.

    i have put this code into my application where user are allow to change the background color or the sidebar and check it is suitable for black or white.

    i make it into a function and call it from the bevelbutton that open the color selector

    Public Function TextColorBlackorWhite(mcolor as Color) as Color
      Dim dVal As Double = (mColor.Red * 0.299) + (mColor.Green * 0.587) + (mColor.Blue * 0.114)
      If (dVal <= 127.5) Then
        'Dark Background: Bright TextColor
        Return &cFFFFFF
      Else
        'Bright Background: Dark TextColor
        Return  &c000000
      End If
    End Function
    
    If TextColorBlackorWhite(c) = kkWhite Then
          MsgBox "You need a color that goes well with black color text"
    Else
          ....
    END IF
  13. Jürg O

    Feb 7 Pre-Release Testers, Xojo Pro Answer

    In order to have an answer marked (Note @jim m 's input below if you're using this CodeSnipplet):
    An attempt with "perceived Luminance" (according to: https://www.w3.org/TR/AERT/#color-contrast)

    Color brightness is determined by the following formula:

    Dim dVal As Double = (mColor.Red * 0.299) + (mColor.Green * 0.587) + (mColor.Blue * 0.114)
      if (dVal <= 127.5) then
        'Dark Background: Bright TextColor
        colBestForText = &cFFFFFF
      else
        'Bright Background: Dark TextColor
        colBestForText = &c000000
      end if

    @jim m Looks good to me. Only thing I would change is to move the threshold up to 180 or so. I feel like it's easier on the eyes to look at white on medium/light gray than black on gray.

  14. Sascha S

    Feb 7 Pre-Release Testers, Xojo Pro Germany

    @Dave S The only thing "darkmode" will do is swap BLACK for WHITE if those are one of the choices you assigned.

    Not according to Apples HIG: https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/ ;)

  15. Richard D

    Feb 7 Pre-Release Testers, Xojo Pro Europe (UK, London)

    @Jürg O Only thing I would change is to move the threshold up to 180 or so.

    where to change the value to 180??? is it the 127.5?

  16. Jürg O

    Feb 7 Pre-Release Testers, Xojo Pro

    @Richard D where to change the value to 180??? is it the 127.5?

    Yup. dVal will be between 0 (dark) and 255 (bright). Use any value in between to switch - my example just uses the "middle" (127.5). If you'd like to respect Jim's Feedback, change it to a higher value.

or Sign Up to reply!