根据背景颜色自动选择前景色

平面设计 颜色 文本 背景
2022-01-22 11:11:39

基于背景颜色(其中背景颜色可以是任何颜色)的前景色的适当“公式”是什么?

更多信息:

我想让我的应用程序根据(纯色均匀)背景颜色选择前景色。我的思路是:如果 RGB 分量的总数超过 (255x3)/2 ,则为黑色,否则为白色但宁愿得到专家的意见。有没有公​​认的方法来做到这一点?或者你有什么建议?

有一个类似的问题,但答案基本上可以限制可用的背景颜色。在这种情况下,这不是一个选择。

2个回答

前段时间我在 Game Development Stack Exchange 上回答了一个类似的问题,所以让我总结一下那里的答案。

您选择黑色或白色的想法,取决于哪一个与背景颜色形成更好的对比,是合理的。然而,简单地平均 RGB 分量并不能很好地指示特定颜色对人眼的显示程度,原因主要有两个:

首先,由于与人类颜色感知有关的原因,红、绿、蓝通道的相对亮度并不相同事实上,纯蓝色 ( #0000ff) 的亮度只有纯绿色 ( ) 的 10% 左右(纯红色只有 30% 左右#00ff00)。因此,例如纯蓝色上的黑色文本永远不会有特别好的对比度。

#ff0000例如,下图显示了纯红色、绿色和蓝色背景(#00ff00和)上的黑白文本示例#0000ff

纯 RGB 红色上的黑白文本 纯 RGB 绿色上的黑白文本 纯 RGB 蓝色上的黑白文本

您可以清楚地看到对比度的差异,即使所有这些颜色具有相同的平均 RGB 值。

另一个复杂因素是计算机屏幕上通常使用的 RGB 颜色空间(如sRGB)不是线性的,而是具有大约 2 左右的显示伽马。这意味着例如 RGB 颜色#7f7f7f= "50% 灰色" 实际上看起来并不像纯白色 ( #ffffff) 的一半亮,而是只有大约 25% 的亮,而实际上具有介于黑色和白色之间的相对亮度的颜色是实际上更接近“75% 灰色”(#bfbfbf)。

不过,方便的是,人眼也是非线性的,并且对较暗色调的差异更敏感。事实上,对于灰色阴影,非线性大致抵消了,因此 RGB 50% 灰色 ( ) 在感知#7f7f7f上仍然与黑色和白色的距离大致相同。作为演示,以下是 25%、50% 和 75% 灰色背景(和)上的一些黑白文本#3f3f3f#7f7f7f#bfbfbf

25% 灰色上的黑白文本 50% 灰色上的黑白文本 75% 灰色上的黑白文本

然而,为了准确计算任意 RGB 颜色的亮度,我们确实需要考虑显示伽马,因为它是需要平均的线性亮度值。

总而言之,要确定黑色或白色文本在背景上的对比度是否更好,您需要:

  1. 将伽马压缩的 RGB 颜色值转换为线性 RGB,
  2. 取线性 R、G 和 B 分量的加权平均值,以及
  3. 将得到的平均值与合适的阈值进行比较。

给出最佳结果的阈值可以通过实验确定,但人们通常会期望它接近 50% RGB 灰度的亮度。无论如何,值得注意的是,感知的对比度会因观看者的显示设置和观看条件而异,因此对于每个人来说,没有单一的最佳值,而是相当广泛的或多或少同样好的选择。

如果你只是想要一个简单的公式来插入数字,试试这个:

  • 如果 0.2126 × R γ + 0.7152 × G γ + 0.0722 × B γ > 0.5 γ,选择黑色;否则选择白色,

其中γ是近似的显示 gamma 值(典型值γ = 2.2)。

对于更简单的近似,您可以忽略 gamma 校正(即有效地假设γ = 1)并只使用条件 0.2126 × R + 0.7152 × G + 0.0722 × B > 0.5。对于灰色阴影,这没有什么区别(因为我们在不等式的两边都应用了相同的伽玛),但它确实有点高估了饱和颜色的亮度。幸运的是,在这种颜色上,无论如何,黑色和白色都倾向于具有不错的对比度,因此在实践中误差可能并不大。

最后,请注意,如果背景颜色不统一,则可能没有单一的文本颜色看起来不错。在这种情况下,您可以考虑例如使用带有白色轮廓的黑色文本,或者反之亦然,或者可能用相反颜色的半透明框围绕您的文本。

每种颜色都有三个变量;色相、饱和度和亮度。

易读性的关键是对比度,可以针对彼此独立的三个变量中的每一个进行优化。

例如; 色调对比度可以通过找到它的补色来优化。可以通过为每个地面选择对立面来优化饱和度对比度。同样,明亮可以与暗淡形成对比。

这(高于标准)仅涉及一个选择公式——最佳易读性。

可能还有其他考虑;审美、感性、技术等。

提供这种能力的一种实用方法是通过使用颜色查找表来使用预定的、可预测的和可接受的结果,该颜色查找表提供给定的两者之一的集合。例如; 给定 X 的前景,提供 Y 的背景。给定 Y 的前景,提供 X 的背景。CLUT 可以根据特定应用的需要而复杂或全面。

一旦知道这些值,就可以自动选择它们。