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

Question

I don't know much about color composition, so I came up with this algorithm that will pick a background color based on the font color on a trial an errors basis:

public class BackgroundFromForegroundColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!(value is Color))
            return value;
        Color color = (Color)value;
        if (color.R + color.G + color.B > 550)
            return new SolidColorBrush(Colors.Gray);
        else if (color.R + color.G + color.B > 400)
            return new SolidColorBrush(Colors.LightGray);
        else
            return new SolidColorBrush(Colors.White);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I did some googling about this, but I haven't found anything very formal about the different ways a background color can be calculated to get a good contrast effect with the font color.

So my question is: is there a more "formal" approach to pick a good background to get a good contrast? Alternatively, how would you handle picking a background color with the sole intent of having your text as readable as possible whatever its font color?

Quick update

A bit more context: I'm simply trying to show a preview of some text (eg "The quick brown fox jumps over the lazy dog") where the user picks the font color, weight, font, etc. I am however interested to see what can be done, whether it's super simple, or more complex.

Final edit

I decided to go with what H.B. suggested: it seems to work fine with all colors I tried unlike with my previous algorithm were the foreground would not always contrast properly with the background. I would've been curious to see if there is formula that gives you an "optimal" background for a given foreground, but for what I need black/white works just fine. This is my code in its current form:

public class BackgroundFromForegroundColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!(value is Color))
            return value;
        Color color = (Color)value;
        double Y = 0.2126 * color.ScR + 0.7152 * color.ScG + 0.0722 * color.ScB;
        return Y > 0.4 ? Brushes.Black : Brushes.White;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

In a project I work on we decided on a formula that seperates the color by Red Green Blue values and subtract Red Green and Blue from 255 to get a near perfect constrasting color.

However...Gray is one of those colors that wouldn't work with this formula. You can simple check to see if the color is Gray before doing the subtraction. There are some other colors on both ends of the color spectrume where you might have to hold their hand to get a readable constrasting color.