Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make foregroundcolor black or white depending on background

Tags:

c#

colors

Something like calculating the average value of rgb components and then decide whether to use black or white?

Do I have to convert RGB to HSV in first step 'cause RGB is not always what the human eyes see?

I'm using C#

like image 926
Kai Avatar asked Feb 11 '10 00:02

Kai


People also ask

How do you contrast background and foreground colors?

Contrast between the foreground and background is one of the most important factors for the ease of reading. If coloured text is used on a bright background the contrast will be weak, for optimal contrast results is white text against dark colored backgrounds.

How do I change my background to white instead of black?

Open your device's Settings app . Select Accessibility. Under "Display," select Color inversion. Turn on Use color inversion.

What color font is best on a black background?

The following high-chroma colors provide very good contrast and legibility for text on a black background: Very good: Yellow (#FFFF00) text on a black background.


2 Answers

It just so happens I needed this function for a project not long ago.

private int PerceivedBrightness(Color c) {     return (int)Math.Sqrt(     c.R * c.R * .241 +     c.G * c.G * .691 +     c.B * c.B * .068); } 

This formula I found on the web at Nbd Tech that dealt with perceived colors and color conversion formula. The site gives a lot of information that is helpful.

Here's how to use this to select black or white:

var foreColor = (PerceivedBrightness(backColor) > 130 ? Color.Black : Color.White); 

You can use a value other than 130 as the cutoff; it is preference.


Update: According to Darel Rex Finley at his site:

The values I came up with by playing with Photoshop were actually .241, .691, and .068, but I have since been informed that the values .299, .587, and .114 are more accurate.

This specification follows ITU-R Recommendation BT.601 (or Rec. 601 for short). The site I mentioned above, Nbd Tech, hasn't yet been updated to reflect this.

Based on this, here is the updated method (thanks to DTI-Matt for the comment):

private int PerceivedBrightness(Color c) {     return (int)Math.Sqrt(     c.R * c.R * .299 +     c.G * c.G * .587 +     c.B * c.B * .114); } 

Note on threshold preference:

Colors with a perceived brightness near the middle (e.g. 120-140) will be more subjective. For example, it's debatable whether red (FF0000), which evaluates to 139, is clearer with a black or white overlay.

White and Black on Red

like image 194
JYelton Avatar answered Sep 27 '22 21:09

JYelton


what about that?

private static Color GetReadableForeColor(Color c) {     return (((c.R + c.B + c.G) / 3) > 128) ? Color.Black : Color.White; } 
like image 32
Kai Avatar answered Sep 27 '22 22:09

Kai