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

我正在绘制一个颜色selectbutton,我正在寻找一个好的和简单的公式来获得一个良好的文本颜色(前景)的RGB给定的背景颜色。

一个简单的尝试将只是采取补色,但这将产生一个奇怪的button像纯蓝色或纯红色的颜色。
有没有人知道这样做?

如果它很重要,我使用QT。

为了获得最大的可读性,您希望获得最大的亮度对比度,而不会遇到不一致的色相。 最一致的方法是坚持使用黑色白色的文字颜色。 你可能会想出更美观的scheme,但是没有一个会更清晰。

要select黑色还是白色,您需要知道背景的亮度。 由于两个因素,这会变得更复杂一些:

  • 红色,绿色和蓝色各个原色的亮度不尽相同。 我能给出的最快的build议是使用传统的公式将RGB转换成灰色–R * 0.299 + G * 0.587 + B * 0.114。 还有很多其他的公式。

  • 应用于显示器的伽马曲线使得中间灰度值比您预期的更高。 这很容易通过使用186作为中间值而不是128.任何小于186应使用白色文本,任何大于186应使用黑色文本。

我并不擅长编程与RGB有关的东西,但从devise师的angular度来看,最可读的颜色通常会更轻(如果背景颜色较暗)或较暗(如果背景颜色较浅)的版本相同的颜色。

基本上,你会把你的RGB值,如果他们接近0(黑暗),你会把他们每一个等于你的前景颜色,反之亦然,如果它是一个光BG。

对于可读性来说,补充颜色实际上可能真的很痛苦。

利用大纲的易读性

如果通过“良好的文本颜色(前景)” ,当用户selectany background colour时,为了便于阅读 ,可以始终生成黑色轮廓的白色文本。 它可以在任何固体,图案或渐变的背景上清晰可见,从黑色到白色以及任何其他任何东西。

在这里输入图像描述

即使这不符合你的意图,我认为这是值得的,因为我来寻找类似的解决scheme。

build立在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" 

颜色组合往往看起来很糟糕,如果不仔细select。 为什么不使用白色或黑色的文字,取决于颜色的亮度。 (需要先转换成HSB。)

或让用户select黑色或白色文本。

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

你的光度差异很大。 一般来说,有彩色文字的彩色背景吸吮可读性,随着时间的推移伤害眼睛。 黑色文字的浅色(如HSB,S〜10%,B> 90%)工作正常,或黑色背景上浅色的文字。 我会远离着色。 黑色文字(b〜30%,s> 50%)以及白色背景上的微妙着色也可以。 深蓝色背景上的黄色(琥珀色)文字具有出色的可读性,如琥珀色或黑色的绿色。 这就是为什么老笨蛋(vt100,vt52等)去为这些颜色。

如果你真的需要在“外观”上进行色彩搭配,那么可以同时反转H和B,同时将饱和度从中等级别降低到低级别。

最后一个注意事项:如果您有50%的灰色背景,请重新考虑您的界面。 你抢夺你的一半dynamic范围! 你正在疏远低能见度的用户,包括35岁以上的人

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

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

如果您的颜色是HSL,将色相翻转180度,体面计算

我一直在寻找一个simailr的答案,并遇到这个post和其他一些我认为我会分享。 根据http://juicystudio.com/services/luminositycontrastratio.php#specify“WCAG 2.0的成功标准1.4.3要求视觉呈现的文字和图像的文字具有至less4.5:1的对比度”与一些例外。 这个网站可以让你把前景和背景颜色来计算它们的对比度,但是如果它会提出替代scheme或范围,这将是有帮助的。

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

我转换成HSV的方式可能是这样,但IMO改变色相看起来很奇怪。 我会尽量保持色调和摆弄的价值,也许饱和(浅红色的button与深红色的文字…嗯听起来吓人:-))。