Click here to Skip to main content
11,702,396 members (73,624 online)
Click here to Skip to main content

Determining Ideal Text Color Based on Specified Background Color

, 8 May 2007 96.5K 97
Rate this:
Please Sign up or sign in to vote.
A method for programatically determining the appropriate foreground color based on the specified background color

Introduction

Here's a little snippet for everyone that develops web pages. Today, my boss told me that the text color on a web page element did not contrast enough with the element's background color. Well, she changes her mind more often than Bush denies that Iraq is in the middle of a civil war. For that reason, we had to come up with a way that would preclude us from revisiting the code when she changes her mind about the background color.

Here's a link to an article that describes the VBScript version. I kept them separate (versus putting everything in the same article) so that a search of the appropriate code category would help you find the desired version a little faster.

The Snippet

We spent three hours trying different methods to determine whether or not the text in a HTML element should be black or white. Finally, we found a W3C compliant formula for weighting the lightness of a given color. Once we found that, the rest was fairly easy.

To determine the text color, we subtracted the bgDelta value from 255, and then tried arbitrary threshold values until the text was coming up in a reasonable color for all of our test cases. Your threshold may vary, so don't hesitate to change the value we're using.

using System.Graphics.Drawing;

public Color IdealTextColor(Color bg)
{
    int nThreshold = 105;
    int bgDelta = Convert.ToInt32((bg.R * 0.299) + (bg.G * 0.587) + 
                                  (bg.B * 0.114));

    Color foreColor = (255 - bgDelta < nThreshold) ? Color.Black : Color.White;
    return foreColor;
}

We put this function into a base class that is inherited by all of the pages on our site. If you're writing VB code, you should be able to easily port this to your site.

Disclaimers

This article is short because there's really nothing of any complexity associated with the method described herein. There's also no downloadable code because - well - this is all the code, and I'm not going to fight with VS2005 just to create a sample program for you to download.

Hopefully, it will save you a little time...

History

  • 08 May 2007 - included a link at the top of this article to the VBScript version of this article.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

John Simmons / outlaw programmer
Software Developer (Senior)
United States United States
I've been paid as a programmer since 1982 with experience in Pascal, and C++ (both self-taught), and began writing Windows programs in 1991 using Visual C++ and MFC. In the 2nd half of 2007, I started writing C# Windows Forms and ASP.Net applications, and have since done WPF, Silverlight, WCF, web services, and Windows services.

My weakest point is that my moments of clarity are too brief to hold a meaningful conversation that requires more than 30 seconds to complete. Thankfully, grunts of agreement are all that is required to conduct most discussions without committing to any particular belief system.

You may also be interested in...

Comments and Discussions

 
GeneralI prefer this method Pin
Aiscrim28-Aug-08 3:15
memberAiscrim28-Aug-08 3:15 
GeneralRe: I prefer this method Pin
John Simmons / outlaw programmer8-Jan-10 4:57
mvpJohn Simmons / outlaw programmer8-Jan-10 4:57 
GeneralRe: I prefer this method Pin
Hornwood5098-Dec-14 3:34
memberHornwood5098-Dec-14 3:34 
GeneralThanks, John Pin
Hans Dietrich20-Aug-08 22:47
mvpHans Dietrich20-Aug-08 22:47 
GeneralRe: Thanks, John Pin
John Simmons / outlaw programmer20-Aug-08 23:15
mvpJohn Simmons / outlaw programmer20-Aug-08 23:15 
QuestionColor other than Black White Pin
a.mulay15-May-07 19:43
membera.mulay15-May-07 19:43 
AnswerRe: Color other than Black White Pin
John Simmons / outlaw programmer17-May-07 2:10
mvpJohn Simmons / outlaw programmer17-May-07 2:10 
GeneralRe: Color other than Black White Pin
a.mulay17-May-07 2:31
membera.mulay17-May-07 2:31 
GeneralRe: Color other than Black White Pin
Liam O'Hagan15-Apr-08 17:27
memberLiam O'Hagan15-Apr-08 17:27 
Questionwhat's the C++ echivalent code? Pin
Mihai Moga22-Dec-06 0:16
memberMihai Moga22-Dec-06 0:16 
AnswerRe: what's the C++ echivalent code? Pin
Pete O'Hanlon22-Dec-06 0:56
memberPete O'Hanlon22-Dec-06 0:56 
AnswerRe: what's the C++ echivalent code? Pin
Dieter Hammer8-May-07 20:07
memberDieter Hammer8-May-07 20:07 
GeneralRe: what's the C++ echivalent code? Pin
John Simmons / outlaw programmer14-May-07 2:04
mvpJohn Simmons / outlaw programmer14-May-07 2:04 
GeneralNot bad, but... Pin
ke4vtw7-Dec-06 6:50
memberke4vtw7-Dec-06 6:50 
GeneralRe: Not bad, but... Pin
John Simmons / outlaw programmer7-Dec-06 12:54
memberJohn Simmons / outlaw programmer7-Dec-06 12:54 
GeneralRe: Not bad, but... Pin
fwsouthern8-May-07 15:26
memberfwsouthern8-May-07 15:26 
GeneralYou got my 5 Pin
Tarakeshwar Reddy4-Dec-06 17:18
memberTarakeshwar Reddy4-Dec-06 17:18 
GeneralNice Pin
John Cardinal4-Dec-06 6:28
memberJohn Cardinal4-Dec-06 6:28 
GeneralRe: Nice Pin
John Simmons / outlaw programmer5-Dec-06 0:02
memberJohn Simmons / outlaw programmer5-Dec-06 0:02 
GeneralCool trick Pin
Mike Brand4-Dec-06 6:22
memberMike Brand4-Dec-06 6:22 
GeneralRe: Cool trick Pin
John Simmons / outlaw programmer8-Jan-10 4:56
mvpJohn Simmons / outlaw programmer8-Jan-10 4:56 
GeneralNow I remember... Pin
PJ Arends30-Nov-06 6:11
memberPJ Arends30-Nov-06 6:11 
GeneralCP Is Just The Greatest Thing Pin
Ilíon29-Nov-06 3:28
memberIlíon29-Nov-06 3:28 
GeneralGood Pin
norm .net29-Nov-06 0:54
membernorm .net29-Nov-06 0:54 
GeneralRe: Good Pin
John Simmons / outlaw programmer29-Nov-06 1:56
memberJohn Simmons / outlaw programmer29-Nov-06 1:56 
GeneralI am sure .. [modified] Pin
Monty229-Nov-06 0:07
memberMonty229-Nov-06 0:07 
GeneralAm I dreaming Pin
Rama Krishna Vavilala28-Nov-06 14:11
memberRama Krishna Vavilala28-Nov-06 14:11 
GeneralRe: Am I dreaming Pin
John Simmons / outlaw programmer28-Nov-06 14:35
memberJohn Simmons / outlaw programmer28-Nov-06 14:35 
GeneralExcellent Pin
PJ Arends28-Nov-06 14:04
memberPJ Arends28-Nov-06 14:04 
GeneralRe: Excellent Pin
John Simmons / outlaw programmer28-Nov-06 23:13
memberJohn Simmons / outlaw programmer28-Nov-06 23:13 
GeneralThis technique is general enough Pin
Joergen Sigvardsson28-Nov-06 12:39
memberJoergen Sigvardsson28-Nov-06 12:39 
GeneralRe: This technique is general enough Pin
John Simmons / outlaw programmer28-Nov-06 12:42
memberJohn Simmons / outlaw programmer28-Nov-06 12:42 
GeneralRe: This technique is general enough Pin
Joergen Sigvardsson28-Nov-06 12:56
memberJoergen Sigvardsson28-Nov-06 12:56 
QuestionRe: This technique is general enough Pin
Oskar Austegard4-Dec-06 4:30
memberOskar Austegard4-Dec-06 4:30 
AnswerRe: This technique is general enough Pin
John Simmons / outlaw programmer6-Dec-06 10:02
memberJohn Simmons / outlaw programmer6-Dec-06 10:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150819.1 | Last Updated 8 May 2007
Article Copyright 2006 by John Simmons / outlaw programmer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid