给定背景颜色的好文本前景色

Question

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

一个简单的尝试就是采用补色，但这会产生奇怪的按钮，用于纯蓝色或纯红色等颜色。 有没有众所周知的事情呢？

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

Answer 1

为了获得最大的易读性，您需要最大亮度对比度而不会进入不能同时工作的色调。最一致的方法是坚持使用黑色或白色作为文本颜色。你或许可以提出更美观的方案，但它们都不会更清晰。

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

• 单个原色红色，绿色和蓝色的感知亮度不相同。我可以给出的最快建议是使用传统公式将RGB转换为灰色 - R * 0.299 + G * 0.587 + B * 0.114。还有很多其他公式。

• 应用于显示器的伽玛曲线使中间灰度值高于您的预期。这可以通过使用186作为中间值而不是128来轻松解决。任何小于186的内容都应该使用白色文本，任何大于186的内容都应该使用黑色文本。

Answer 2

我不是编程与RGB相关的东西的专家，但从设计师的角度来看，通常最可读的颜色会更轻（如果背景颜色是暗的）或更暗（如果背景颜色很浅）版本相同的阴影。

基本上你会得到你的RGB值，如果它们接近0（暗），你可以将它们各自向上推动前景色相等，反之亦然，如果它是浅BG。

为了便于阅读，补色可能真的很痛苦。

Answer 3

利用可读性大纲

如果用“好文字颜色（前景）”，当用户选择any background colour时，您打算将其用于易读性，则可以始终生成白色文字黑色轮廓。它可以在任何实心，图案或渐变背景上清晰可辨，从黑到白，以及介于两者之间的任何东西。

即使这不符合您的意图，我认为值得在此发布，因为我来寻找类似的解决方案。

Answer 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"

Answer 5

你的光度差异最大。一般来说，带有彩色文字的彩色背景很容易读取，随着时间的推移会伤害眼睛。浅色调（例如HSB，S~10％，B> 90％），黑色文字可以很好地工作，或者在黑色背景上有浅色文字。我会远离着色。在白色背景上具有微妙着色的暗文本（b~30％，s> 50％）也可以是好的。深蓝色背景上的黄色（琥珀色）文字具有出色的可读性，黑色为琥珀色或绿色。这就是老dumbterms（vt100，vt52等）选择这些颜色的原因。

如果你真的需要为'look'做彩色，你可以反转H和B，同时将饱和度固定在中等到低的水平。

最后一点：如果你有50％的灰色背景，请重新考虑你的界面。你正在抢夺自己一半的动态范围！你疏远了低能见度的用户，包括超过35岁的人......

Answer 6

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

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

或使用预定义的组合。这就是Google在其日历产品中所做的事情。

Answer 7

我一直在寻找一个simailr的答案，并且发现了这篇文章和其他一些我认为我会分享的内容。根据{{​​3}}，“WCAG 2.0的成功标准1.4.3要求文本和文本图像的视觉呈现具有至少4.5：1的对比度”，但有一些例外。该网站允许您输入前景色和背景色来计算它们的对比度，尽管如果建议替代品或范围会有所帮助。

我发现用于可视化颜色对比度的最佳网站之一是http://juicystudio.com/services/luminositycontrastratio.php#specify它可让您同时调整几乎所有颜色标度（RGB，CMYK等），然后显示结果在屏幕上，例如黄色背景上的白色文字。

Answer 8

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

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

如果您的颜色是HSL，请将Hue旋转180度以进行合理的计算

Answer 9

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