给定背景颜色的良好文本前景色答案

【问题标题】：Good text foreground color for a given background color给定背景颜色的良好文本前景色
【发布时间】：2013-01-06 08:06:02
【问题描述】：

我正在绘制一个颜色选择按钮，并且我正在寻找一个漂亮而简单的公式来为 RGB 中的给定背景颜色获得良好的文本颜色（前景）。

一个简单的尝试是只采用补色，但这会为纯蓝色或纯红色等颜色生成一个奇怪的按钮。
有没有众所周知的事情可以做到这一点？

如果这很重要，我正在使用 QT。

【问题讨论】：

另外，补色存在灰色映射到灰色的问题。
这个易于使用的颜色工具可能会有所帮助：accessible-colors.com

标签： user-interface text colors background-color

【解决方案1】：

为了获得最大的易读性，您需要最大的亮度对比度，而不会陷入无法协同工作的色调。最一致的方法是使用 black 或 white 作为文本颜色。您也许可以想出更美观的方案，但没有一个更清晰。

要在黑色或白色之间进行选择，您需要知道背景的亮度。由于两个因素，这变得有点复杂：

红色、绿色和蓝色的各个原色的感知亮度不相同。我能给出的最快建议是使用传统公式将 RGB 转换为灰色 - R*0.299 + G*0.587 + B*0.114。还有很多其他的公式。
应用于显示器的伽马曲线使中间灰度值高于您的预期。这可以通过使用 186 而不是 128 作为中间值轻松解决。小于 186 的任何内容都应使用白色文本，大于 186 的任何内容都应使用黑色文本。

【讨论】：

假设我们有一个背景颜色，它位于灰度光谱的中间。在显示器进行伽马解码之前，这种颜色不是由系统进行伽马编码的吗？如果是这样，我们为什么要通过将中点设置为 186 来应用第二层伽马解码？还是我在这里遗漏了什么？
@LeviBotelho，不，系统不进行伽马编码 - 它使用的所有 RGB 值都假定已经进行了伽马编码。在经过适当校准的显示器上，您会发现 0/255 的交替线与 186 的灰色块具有相同的亮度。由于大多数显示器未校准，这会有所不同，例如我的显示器接近 167。跨度>
感谢您的解释。交替线条的好例子！
请注意：如果您需要 W3C 合规性，请参阅stackoverflow.com/a/3943023/5987。

【解决方案2】：

我不是 RGB 相关编程方面的专家，但从设计师的角度来看，通常最易读的颜色只是更亮（如果背景颜色较暗）或更暗（如果背景颜色较亮）相同色调的版本。

基本上你会获取你的 RGB 值，如果它们更接近 0（暗），你会为你的前景色将它们每一个推上等量，反之亦然，如果它是一个浅色 BG。

为了可读性，补色实际上会让眼睛很痛苦。

【讨论】：

我同意这一点，选择相同颜色的更深或更浅的阴影。这也很容易以编程方式完成
注意daltonic people。例如，我的一位大学老师很难区分蓝色的深浅。
最有效的方法是使用不透明度而不是实际更改 RGB 值。因此，如果您希望文本更亮，请使用透明的白色，而更暗的则使用透明的黑色。 google.com/design/spec/style/…

【解决方案3】：

利用大纲提高可读性

如果“良好的文本颜色（前景）”当用户选择any background colour 时，您打算将其用于易读性目的，您始终可以生成带有黑色的白色文本大纲。它在任何纯色、图案或渐变背景上都清晰可见，从黑色到白色以及介于两者之间的任何东西。

即使这没有达到您的意图，我认为值得在这里发布，因为我来寻找类似的解决方案。

【讨论】：

【解决方案4】：

基于 Mark 的响应，这里有一些 Ruby 代码可以完成这项工作

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

【讨论】：

Qt/c++ 等价物：自动亮度 = Brush.redF() * 0.299 + Brush.greenF() * 0.587 + Brush.blueF() * 0.114; Painter.setPen((亮度 > 0.6) ? Qt::black : Qt::white); // 文本

【解决方案5】：

亮度差异较大时您的情况会更好。一般来说，带有彩色文本的彩色背景会降低可读性，随着时间的推移会伤害眼睛。带有黑色文本的浅色（例如 HSB，S~10%，B>90%）可以正常工作，或者黑色背景上的浅色文本效果很好。我会远离两种颜色。在白色背景上带有微妙色彩的深色文本（b~30%，s>50%）也可以。深蓝色背景上的黄色（琥珀色）文本具有出色的可读性，黑色上的琥珀色或绿色也是如此。这就是为什么旧的哑词（vt100、vt52 等）选择这些颜色的原因。

如果你真的需要为“外观”做颜色上的颜色，你可以反转 H 和 B，同时将饱和度固定在中等到低的水平。

最后一点：如果您有 50% 的灰色背景，请重新考虑您的界面。你正在抢夺你一半的动态范围！您正在疏远低知名度的用户，包括 35 岁以上的任何人...

【讨论】：

【解决方案6】：

如果不仔细选择，颜色组合通常看起来很糟糕。为什么不使用白色或黑色作为文本，取决于颜色的亮度。（需要先转换成 HSB。）

或者让用户选择黑色或白色文本。

或者使用预定义的组合。这就是 Google 在他们的日历产品中所做的。

【讨论】：

【解决方案7】：

我一直在寻找一个 simailr 的答案，并偶然发现了这篇文章和其他一些我认为我会分享的帖子。根据http://juicystudio.com/services/luminositycontrastratio.php#specify，“WCAG 2.0 的成功标准 1.4.3 要求文本的视觉呈现和文本图像的对比度至少为 4.5:1”，但有一些例外。该网站允许您输入前景色和背景色来计算它们的对比度，但如果它会建议替代品或范围会很有帮助。

我发现的用于可视化颜色对比度的最佳网站之一是http://colorizer.org/，它可以让您同时调整几乎所有方式的色标（RGB、CMYK 等），然后将结果显示在屏幕，例如黄色背景上的白色文本。

【讨论】：

我发现这有利于测试，而不是设计阶段

【解决方案8】：

我通常看补色，他们也有补色轮来帮助

http://www.makart.com/resources/artclass/cwheel.html

如果您的颜色是 HSL，请将色相翻转 180 度以进行适当的计算

【讨论】：

给我一个红底绿字的申请（反之亦然），你就会知道我把其他尸体埋在哪里了。

【解决方案9】：

我认为转换为 HSV 可能是一种方式，但 IMO 改变色调看起来很奇怪。我会尝试保持色调并调整值和饱和度（浅红色按钮和深红色文本......嗯听起来很可怕:-)）。

【讨论】：