# Choose white or black letters over color

Given a background color, what is the best way to determine if I should use black or white for the foreground color?

For example, could I use a formula based on the HSB values of the color?

It's for an app in which the background color is dynamic.

• This question is a duplicate of graphicdesign.stackexchange.com/questions/17359/…. Please vote to close it if you think it's appropriate. I'd delete myself it if it hadn't received answers (it's not fair to the answerers now). – hpique Feb 10 '14 at 17:52
• The best way is to use your own eyes. :) – DA01 Feb 10 '14 at 18:23
• @hpique Although there is a similar question, since this one has so many nice answers I think we can leave both open :) – Yisela Feb 10 '14 at 19:20

I have used a javscript based color picker on some of my sites, and the font color within the input box changes based on the values the picker chooses...

The code (Direct Code Link Here) for the script shows a specific location for the colorization of the input box the script is attached to.

Within that code you can see the formula:

``````0.213 * this.rgb[ 0 ] +
0.715 * this.rgb[ 1 ] +
0.072 * this.rgb[ 2 ]
``````

With the result being:

``````< 0.5 ? '#FFF' : '#000';
``````

or... (IF) less than 0.5 of the pure white (255) = 'White' (Otherwise) = 'Black';

You can extrapolate from that formula that: 0.213 * your RED value (0 - 255) +
0.715 * your Blue Value (0 - 255) +
0.072 * your Green value (0 - 255)
gives you a number

...and if that number is greater than .5,

you should opt for a Black font color, otherwise, go for white.

Example:

0.213 * 21 = 4.473
0.715 * 57 = 33.605
0.072 * 117 = 8.424

4.473 + 33.605 + 8.424 = 46.502

Since 46.502 is less than .5 of the pure white (255), we should use white on this background.

Hope this helps.

• Why did you use 50 in your example? Shouldn't it be 255/2? – pomber Feb 16 '15 at 3:23
• Agreed. Updated my answer, and posted more info including a link to the code itself... Nice catch @pomber. – Phlume Feb 16 '15 at 18:48

See this answer to a similar question: See How to calculate the best type colour for a random background colour?

Applying this theory, For you to figure out dynamically, you could use RGB values or hex colors. In hex the color codes go from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. So #751 or #745814 is 7 or in red, 5 in green and 1 in blue (RGB). Every second number in the 6-digit hex is just "fine tuning".

Midway point makes <=7 is darker than 50%, >=8 is lighter (technically it is more saturated). So you can programmatically find an accumulative score and apply black text to the lighter colors, and vice versa.

• Thanks John. I didn't see that question when I searched. Could you please vote to close this one? – hpique Feb 10 '14 at 17:32

I would say if your background color is constantly changing, that indeed going with a neutral color would be best. Depending on how bright or dark the background becomes should determine, whether you use white or black. Pick a middle ground between all of the background colors and scale your colors from darkest to lightest. Then with the darker backgrounds, use white, and as you reach more of the lighter colors you should then switch black. Maybe even throw some of the in between grays in there as well. So all in all setup up to scales, one with your colors from dark to light and then a scale below it with white to black. That way you will know which color is best used. Hope this helps. Also this is really opinion based, so others may or may not agree with me or even give their own thoughts. Good Luck!

Another alternative I found a couple of days ago and made the whole process of finding contrast ratios REALLY easy:

http://leaverou.github.io/contrast-ratio/

You can copy-past HEX values in the boxes and it automatically gives you a number. If you try with white and black plus the color you should have a result in less than 5 seconds :)