440 views

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

1. 12 months ago

### Jürg O

7 Feb 2019 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 ;)

### Answered by Jürg O

See post in context

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

7 Feb 2019 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

7 Feb 2019 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

7 Feb 2019 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

7 Feb 2019 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

7 Feb 2019 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

7 Feb 2019 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. ### Dennis H

7 Feb 2019

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

7 Feb 2019 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. ### Dennis H

7 Feb 2019

@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

7 Feb 2019 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

7 Feb 2019 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

7 Feb 2019 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

7 Feb 2019 Pre-Release Testers, Xojo Pro Germany, Lower Saxony

@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

7 Feb 2019 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

7 Feb 2019 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.