Find the most readable color of text that is drawn on a colored surface

Question

I'm not sure how to ask about it, but here it goes.

I draw a filled color rectangle on the screen. The color has the form R, G, B

Then I want to draw the text on top of the rectangle, however, the color of the text should be such that it provides better contrast, that is, readable.

Example:

If I draw a black rectangle, the obvious color of the text will be white.

What I tried right now is this. I pass this function the color of the rectangle and returns the inverted color, which I then use for my text.

It works, but it is not the best way.

Any suggestions?

// eg. usage: Color textColor = GetInverseLuminance(rectColor); private Color GetInverseLuminance(Color color) { int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f))); return Color.FromArgb(greyscale, greyscale, greyscale); } 

Answer 1

One simple approach, which is guaranteed to give a significantly different color, is to switch the top bit of each component of the RGB triple.

 Color inverse(Color c) { return new Color(cR ^ 0x80, cG ^ 0x80, cB ^ 0x80); } 

If the original color was # 1AF283, the “inverse” would be # 9A7203.

The contrast will be significant. I make no guarantees regarding aesthetics.

Update, 2009/4/3: I experimented with this and other schemes. Results on my blog .

Answer 2

The most readable color will be either white or black. The most soothing color will be what is not white or black, it will be a color that contrasts slightly with the background color. It is not possible to do this programmatically, because it is subjective. You will not find the most readable color for everyone, because everyone sees things differently.

Answer 3

Some color hints, especially about matching foreground and background, for example, with text.

The human eye is essentially a simple lens and therefore can effectively focus on only one color at a time. The lenses used in most modern cameras work around this problem using multiple lenses with different refractive indices (chromatic lenses), so that all colors are in focus at a time, but the human eye is not so advanced.

For this reason, your users only need to focus on one color at a time to read the text. This means that either the foreground color or the background, but both. . This leads to a normal state called vibration, in which the eye quickly shifts focus between the foreground and background colors, trying to solve the shape, but it never solves, the shape never focuses, and this leads to eye retention.

Answer 4

Your function will not work if you provide it with RGB (127,127,127), since it will return the same color. (changing your function to return either black or white will improve the situation a bit)

The best way to always have readable things is to have white text with black around it or vice versa.

This is often achieved by first drafting in (x-1, y-1), (x + 1, y-1), (x + 1, y-1), (x + 1, x + 1), and then white text in (x, y).

Alternatively, you can first draw a translucent black block, and then above it an opaque white text. This ensures that there will always be a certain contrast between your background and text.

Answer 5

why gray? either black or white. white on dark tones, black on light tones. just make sure the brightness is above the threshold and select one or the other

(by the way, you don't need .net, C # or asp.net tags)

Answer 6

You need to learn some color theory. A program called "Color Wheel Pro" is fun to play and will give you a general idea.

Essentially, you are looking for complementary colors for a given color.

However, I think you will find that while color theory helps, you still need the human eye for fine-tuning.