给定背景颜色的良好文本前景色
https://stackoverflow.com/questions/946544
-
09-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在绘制一个颜色选择按钮，并且正在寻找一个漂亮且简单的公式来为给定的 RGB 背景颜色获得良好的文本颜色（前景）。
一个简单的尝试是只采用补色，但这会为纯蓝色或纯红色等颜色产生一个看起来很奇怪的按钮。
有什么众所周知的东西可以做到这一点吗？
如果有必要的话，我正在使用 QT。
解决方案
为了获得最大的易读性，您需要最大的亮度对比度，但又不会陷入互不相容的色调。最一致的方法是坚持 黑色的 或者 白色的 为文本颜色。您也许能够想出更美观的方案，但它们都不会更清晰。
要在黑色或白色之间进行选择，您需要知道背景的亮度。由于两个因素，这变得有点复杂：
红色、绿色和蓝色各个原色的感知亮度并不相同。我能给出的最快建议是使用传统公式将 RGB 转换为灰度 - R*0.299 + G*0.587 + B*0.114。还有很多其他公式。
应用于显示器的伽玛曲线使中间灰度值高于您的预期。通过使用 186 而不是 128 作为中间值可以轻松解决这个问题。小于 186 的任何内容都应使用白色文本，大于 186 的任何内容都应使用黑色文本。
其他提示
我在与RGB编程的东西不是专家，但是从一个设计师的角度来看，往往是最可读的颜色，将刚才轻得多（如果背景颜色为暗）或更暗（如果背景颜色为淡）版本相同的浓淡的。
基本上你把你的RGB值，并且如果它们是接近0（暗）你会推动它们各自最多一个相等的量为前景色，或者如果它是一个光BG反之亦然。
补色其实是可以对眼睛真的很痛苦的可读性。
<强>充分利用的轮廓为易读性
如果通过的“好文字颜色（前景），” 的你想让它对于可读性的目的，当用户选择any background colour，你总是可以产生具有黑色轮廓的白色文字。这将是清晰可见的任何固体，图案或梯度的背景下，从黑色经过白色和任何之间。
即使这不打的你的意图的标志，我觉得这里是值得张贴，因为我来寻找类似的解决方案。
这是马克的回应顶部大厦，这里的一些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"
您是在亮度高的差更好。一般来说，彩色文本彩色背景吮吸可读性，随着时间的推移伤害眼睛。轻度着色的颜色（例如，在HSB，S〜10％，B> 90％）与黑色文本工作细，或在黑色背景上轻度着色的文本。我想从两个着色望而却步。暗文本（B〜30％，S> 50％）与在白色背景上的微妙着色也可以是细。在深蓝色的背景黄色（琥珀色）文本具有良好的可读性，一样的黑色黄色或绿色。这就是为什么旧dumbterms（VT100，VT52等）拍得这些颜色。
如果你真的需要为“看”做颜色的颜色，你可以扭转H和B，同时以中等钉扎饱和度较低的水平。
和最后一个音符：如果你有一个50％的灰色背景下，重新审视自己的界面。你抢劫一半的动态范围的自己！你疏远能见度低的用户，包括任何人超过35 ...
颜色的组合常常看起来可怕时不慎重选择。为什么不使用白色或黑色的文字，根据颜色的亮度。 （是否需要转换成HSB第一。）
或者让用户选择黑色或白色的文字。
或者使用预先定义的组合。这是谷歌确实在他们的日历产品中。
我一直在寻找一个答案simailr和整个这个职位和其他一些人，我想我会分享出来。根据 http://juicystudio.com/services/luminositycontrastratio.php#specify 中的“成功标准WCAG 2.0的1.4.3需要文本的文本和图像的可视呈现具有至少4.5：1" 的对比度有一些例外。该网站可以让你把前景色和背景色来计算它们的对比度，尽管这将是有益的，如果它会提出其他建议或范围。
一，我发现用于可视化色彩对比 http://colorizer.org/ 它的最佳地点可以调整几乎所有的方式在同一时间色阶（RGB，CMYK等），然后显示在屏幕上的结果，诸如白色的文字在黄色背景。
我东西，转化为HSV可能是这样，但IMO改变色调会显得怪异。我会尝试保持色调和用价值摆弄，也许饱和度（暗红色文字淡红色按钮... HM听起来很吓人:-)）。
