如何根据字体颜色来选择背景颜色以具有适当的对比度 [英] How to pick a background color depending on font color to have proper contrast

问题描述

我对彩色构图不太了解，所以我想出了这个算法，它会根据错误的基础上的字体颜色选择背景颜色：

  public class BackgroundFromForegroundColorConverter：IValueConverter 
 {
 public object Convert（object value，Type targetType，object parameter，CultureInfo culture）
 {
如果（！（value是Color））
返回值; 
颜色颜色=（颜色）值; 
 if（color.R + color.G + color.B> 550）
返回新的SolidColorBrush（Colors.Gray）; 
 else if（color.R + color.G + color.B> 400）
返回新的SolidColorBrush（Colors.LightGray）; 
 else 
返回新的SolidColorBrush（Colors.White）; 
 
 
公共对象ConvertBack（对象值，类型targetType，对象参数，CultureInfo culture）
 {
 throw new NotImplementedException（）; 
 
 
 
 
 
 
 $ b我在这方面做了一些Google搜索，发现任何非常正式的背景颜色可以计算出不同的方式来获得与字体颜色的良好对比效果。所以我的问题是：是否有更多正规的方法来挑选一个良好的背景，以获得良好的对比？另外，如何处理选择背景颜色的唯一目的是让文本尽可能易读，而不管它的字体颜色如何？ 
 
 
 快速更新 
 
 
更多的上下文：我只是试图展示一些文本的预览（例如快速的棕色狐狸跳过懒惰的狗），用户选择字体的颜色，重量，字体等。不过，我很有兴趣看看可以做些什么，无论是超级简单还是更复杂。 
 
 
  Final编辑 
 
 
 
我决定用 HB 建议：对于所有的颜色我尝试不像我以前的算法前景不会总是与背景对比。我一直很好奇，看看是否有公式，给你一个给定的前景最佳的背景，但我需要黑色/白色的作品很好。这是我的代码目前的形式：
 
 pre $  public class BackgroundFromForegroundColorConverter：IValueConverter 
 {
 public object Convert （object value，Type targetType，object parameter，CultureInfo culture）
 {
 if（！（value is Color））
返回值; 
颜色颜色=（颜色）值; 
 double Y = 0.2126 * color.ScR + 0.7152 * color.ScG + 0.0722 * color.ScB; 
 return Y> 0.4？ Brushes.Black：Brushes.White; 
 
 
公共对象ConvertBack（对象值，类型targetType，对象参数，CultureInfo culture）
 {
 throw new NotSupportedException（）; 
 
 
 $ / code $ / pre 
 
解决方案
是计算颜色亮度的一些方法，基于这种方法，您可以只采取黑色或白色的背景，你会得到一个体面的可读性。例如 luma   
 < blockquote> 
  Y = 0.2126 R + 0.7152 G + 0.0722 B 
 
 
你使用规范化的输入值（0.0  -  1.0），但是这是一段时间，因为我用这个... ... 
 $ b 
 编辑：示例转换实现sketch： 
 
 
  public object转换（对象值，类型targetType，对象参数，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; 
 
 
 
 $ b $ p 
 $ b 
阈值实际上可能与显示和个人喜好有关，一个人会喜欢低一些的东西，从而产生更大的黑色背景。
 
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();
    }
}

解决方案
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.

                        
这篇关于如何根据字体颜色来选择背景颜色以具有适当的对比度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！