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

75

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

一个简单的尝试就是只取补色，但这会为纯蓝色或纯红色之类的颜色产生奇怪的外观。
有什么众所周知的东西吗？

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

— hoo
source

4

另外，互补色具有灰色映射为灰色的问题。

— shoosh

这个可访问的颜色工具可能会有所帮助：accessible-colors.com

— Misha Moroshko

128

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

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

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

— 马克·兰索姆
source

1

假设我们的背景色恰好位于灰度光谱的中间。在监视器进行伽玛解码之前，系统是否先对这种颜色进行伽玛编码？如果是这样，为什么我们要通过将中点设置为186来应用第二层伽马解码？还是我在这里想念什么？

— Levi Botelho 2014年

1

@LeviBotelho，没有系统不进行伽马编码-假定与它一起使用的所有RGB值均已被伽马编码。在一个正确校准显示器，你会发现的0/255即交替线将是相同亮度的186灰度块由于大多数显示器不校准这会有所不同，例如我自己更接近167

— 马克赎金

感谢您的解释。交替线的好例子！

— Levi Botelho 2014年

所有人注意：如果您需要W3C合规性，请参阅stackoverflow.com/a/3943023/5987。

— Mark Ransom 2014年

11

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

基本上，您将采用RGB值，如果它们接近0（深色），则将它们分别按等值向上推以用作前景色，如果是浅色BG，则反之亦然。

补色实际上对于可读性而言可能确实使眼睛感到痛苦。

— 加布里埃尔·赫利（Gabriel Hurley）
source

我同意这一点，请选择相同颜色的深色或浅色。这也将很容易以编程方式完成

— gonzohunter

1

注意道尔顿人。例如，我的一位大学老师很难区分蓝色阴影。

— ANeves认为SE是邪恶的，

最有效的方法是使用不透明度，而不是实际更改RGB值。因此，如果要使文本变浅，请使用透明的白色，对于较深的文本，请使用透明的黑色。google.com/design/spec/style/…–

— 杰西·埃利奥特

9

利用轮廓清晰

如果在用户选择时出于“便于阅读的文本颜色（前景）”的目的而打算将其用作，则您始终可以生成具有黑色轮廓的白色文本。从黑色到白色，以及介于两者之间的任何实心，图案或渐变背景，它都清晰可见。 any background colour

在此处输入图片说明

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

— 约翰·K
source

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"

— 达伦·希克斯（Darren Hicks）
source

2

等效于Qt / c ++：自动亮度= brush.redF（）* 0.299 + brush.greenF（）* 0.587 + brush.blueF（）* 0.114; painter.setPen（（亮度> 0.6）？Qt :: black：Qt :: white）; //文字

— roberto

3

亮度差异很大，您会感觉更好。通常，带有彩色文本的彩色背景会增加可读性，随着时间的流逝会伤害眼睛。带有黑色文字的浅色（例如HSB，S〜10％，B> 90％）可以很好地工作，或者在黑色背景上带有浅色的文字也可以。我会避免同时为两者着色。深色文本（b〜30％，s> 50％）在白色背景上带有微妙的着色也可以。深蓝色背景上的黄色（琥珀色）文本具有出色的可读性，琥珀色或黑色则具有绿色。这就是为什么旧的哑词（vt100，vt52等）选择这些颜色的原因。

如果您确实需要为“外观”进行彩色着色，则可以反转H和B，同时将饱和度固定在中低水平。

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

— 亚历克斯·费曼
source

2

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

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

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

— 拉里·K
source

1

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

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

— g
source

我发现这很适合测试，而不是在设计阶段

— Edward Chan JW

0

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

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

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

— 鲍勃
source

13

给我一个带有红色背景上的绿色文本的应用程序（反之亦然），您会发现我将其他尸体埋在哪里。

— 亚当·鲁滨逊

-1

我认为转换成HSV可能是方法，但是IMO更改色调看起来很奇怪。我会尝试保持色调，并摆弄值，甚至饱和（浅红色按钮和深红色的文字... hm听起来很可怕:-)）。

— 立方体
source