How to pick a background color depending on font color to have proper contrast How to pick a background color depending on font color to have proper contrast wpf wpf

How to pick a background color depending on font color to have proper contrast


There are some methods of calculating the brightness of a colour, based on that you could just take a black or white background and you would get a decent readability. See luma for example

Y = 0.2126 R + 0.7152 G + 0.0722 B

I think the threshold would be 0.5 if you use normalized input values (0.0 - 1.0), but it's been a while since i used this...

Edit: Example convert implementation sketch:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture){    var c = (Color)value;    var l = 0.2126 * c.ScR + 0.7152 * c.ScG + 0.0722 * c.ScB;    return l < 0.5 ? Brushes.White : Brushes.Black;}

The threshold may actually be a bit dependent on the display and personal preference, i for one would prefer something lower resulting in a bigger share of black backgrounds.


I think this is more than a design issue than having a 'formal' way. So it is a bit to your own decision. Can you show up some examples close to what you are tring to achieve? I am also working on something similar to your problem these days (creating online gallery which changes its BG according to the colors in the photos in the gallery dynamically), and I think I'm going pretty well, my advice is that, whatever you choose as a background, just create a layer of black or white in the background, depending on your foreground color (opposite brightness of it), and that way you are in a sense 'limiting' the BG, e.g. BG could be set to black, and your text is black too, but there's a white layer on top of BG that makes the text readable. The opacity of the layer is left to you, try and see what is the best value. And you can implement the whole thing in the value converter, and that BG + 'layer' composition is nothing more than a color value.


Ramhound's soulution completely fails for colors having each component near the value 128 (not all gray as suggested) - then you get almost the same color!

The most contrasting (different) color for any given color c you simply get by

new Color(c.R > .5 ? 0 : 1, c.G > .5 ? 0 : 1, c.B > .5 ? 0 : 1)

or if you need 0-255 range

new Color(c.R > 127 ? 0 : 255, c.G > 127 ? 0 : 255, c.B > 127 ? 0 : 255)

That text visibility on given background is allways best, but not allways nice. In case you do not want to disturbe by crazy colors you just end up using black/white suggested by accepted answer.