如何根据字体颜色选择背景颜色以获得适当的对比度
我不太了解颜色组成,所以我想出了这个算法,它将在错误的基础上根据字体颜色选择背景颜色:
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();
}
}
我对此做了一些Google搜索,但我还没有发现任何关于背景颜色计算的不同方式的非常正式的方法,以便与字体颜色产生良好的对比效果。
所以我的问题是:是否有一种更“正式”的方法来挑选良好的背景以获得良好的对比? 或者,您将如何处理挑选背景颜色的唯一目的是让您的文字尽可能具有可读性,而不论其字体颜色如何?
快速更新
更多的上下文:我只是试图展示一些文本的预览(例如,“快速棕色狐狸跳过懒狗”),用户在其中选择字体颜色,重量,字体等。但我感兴趣看看可以做什么,无论是超级简单还是更复杂。
最终编辑
我决定采用HB
建议:它似乎可以很好地处理我尝试过的所有颜色,与我以前的算法不同,前景不会总是与背景形成对比。 我一直很好奇,看看是否有公式可以给你一个给定前景的“最佳”背景,但是对于我需要黑/白的作品来说很好。 这是我目前的代码:
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();
}
}
有一些计算颜色亮度的方法,基于这种方法,您可以只采用黑色或白色背景,并且可以获得不错的可读性。 以luma为例
Y = 0.2126 R + 0.7152 G + 0.0722 B
如果你使用标准化的输入值(0.0 - 1.0),我认为阈值是0.5,但是因为我使用了这个,所以这是一段时间...
编辑:示例转换实施草图:
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;
}
门槛可能实际上取决于显示器和个人喜好,我对于一个人会偏好较低的东西而导致黑色背景的更大份额。
我认为这不仅仅是一种“正式”方式,而是一个设计问题。 所以这是对你自己的决定。 你能举出一些与你想要达到的结果相关的例子吗? 我现在也在研究类似于你的问题的东西(创建一个在线画廊,根据画廊照片的颜色动态地改变它的BG),我想我会很好,我的建议是,无论你选择作为背景,只需在背景中创建一层黑色或白色,具体取决于您的前景色(与其相反的亮度),并且这样您就可以在某种意义上“限制”BG,例如BG可以设置为黑色,而且你的文字也是黑色的,但是BG的顶部有一层白色的图层,可以让文本阅读。 图层的不透明度由您决定,请尝试查看最佳值。 而且你可以在价值转换器中实现整个事情,并且BG +'图层'组合只不过是一个颜色值。
对于每个组件都接近128值的颜色(不是所有灰色都是建议的),Ramhound的颜色完全失败 - 那么您的颜色几乎相同!
对于任何给定的颜色c,最简单的(不同的)颜色
new Color(c.R > .5 ? 0 : 1, c.G > .5 ? 0 : 1, c.B > .5 ? 0 : 1)
或者如果你需要0-255的范围
new Color(c.R > 127 ? 0 : 255, c.G > 127 ? 0 : 255, c.B > 127 ? 0 : 255)
在给定的背景下文本的可见性总是最好的,但并不总是好的。 如果你不想被疯狂的颜色打扰,你最终会使用接受的答案中提出的黑/白。
链接地址: http://www.djcxy.com/p/87061.html上一篇: How to pick a background color depending on font color to have proper contrast