找到在彩色表面上绘制的文本的最易读的颜色
我不知道如何问这个问题，但就这样吧。
我在屏幕上绘制一个填充的彩色矩形。 颜色采用 R、G、B 的形式，
然后我想在矩形顶部绘制文本，但是文本的颜色必须能够提供最佳对比度，这意味着它是可读的。
示例：
如果我绘制一个黑色矩形，则文本的明显颜色将为白色。
我现在尝试的是这个。 我向这个函数传递矩形的颜色，它返回一个反转的颜色，然后将其用于我的文本。
它有效，但不是最好的方法。
有什么建议么？
// eg. usage: Color textColor = GetInverseLuminance(rectColor);
private Color GetInverseLuminance(Color color)
{
int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f)));
return Color.FromArgb(greyscale, greyscale, greyscale);
}
I'm not sure how to ask this but here goes.
I draw a filled coloured rectangle on screen. The colour is in form of R,G,B
I then want to draw text on top of the rectangle, however the colour of the text has to be such that it provides the best contrast, meaning it's readable.
Example:
If I draw a black rectangle, the obvious colour for text would be white.
What I tried right now is this. I pass this function the colour of the rectangle and it returns an inverted colour that I then use for my text.
It works, but it's not the best way.
Any suggestions?
// eg. usage: Color textColor = GetInverseLuminance(rectColor);
private Color GetInverseLuminance(Color color)
{
int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f)));
return Color.FromArgb(greyscale, greyscale, greyscale);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
一种保证提供显着不同颜色的简单方法是切换 RGB 三元组的每个分量的最高位。
如果原始颜色是#1AF283，则“反转”将为#9A7203。
对比将会很明显。 我对美观不做任何保证。
更新，2009/4/3：我尝试了这个方案和其他方案。 结果位于我的博客。
One simple approach that is guaranteed to give a significantly different color is to toggle the top bit of each component of the RGB triple.
If the original color was #1AF283, the "inverse" will be #9A7203.
The contrast will be significant. I make no guarantees about the aesthetics.
Update, 2009/4/3: I experimented with this and other schemes. Results at my blog.
最易读的颜色是白色或黑色。 最“舒缓”的颜色不是白色也不是黑色，而是与背景颜色形成轻微对比的颜色。 无法以编程方式执行此操作，因为它是主观的。 您不会找到适合每个人的最易读的颜色，因为每个人对事物的看法都不同。
The most readable color is going to be either white or black. The most 'soothing' color will be something that is not white nor black, it will be a color that lightly contrasts your background color. There is no way to programmatically do this because it is subjective. You will not find the most readable color for everyone because everyone sees things differently.
关于颜色的一些提示，特别是关于前景和背景并置（例如文本）的提示。
人眼本质上是一个简单的镜片，因此一次只能有效地聚焦于一种颜色。 大多数现代相机中使用的镜头通过使用多个不同折射率的镜头（彩色镜头）来解决这个问题，以便所有颜色同时聚焦，但人眼并没有那么先进。
因此，您的用户每次只需关注一种颜色即可阅读文本。 这意味着前景要么是颜色，要么是背景，但绝不会两者兼而有之。这会导致一种通常称为振动的情况，在这种情况下，眼睛在前景和背景颜色之间快速转移焦点，试图解决问题形状，但它永远不会消失，形状永远不会聚焦，并且会导致眼睛疲劳。
Some tips about color, particularly concerning foreground and background juxtaposition, such as with text.
The human eye is essentially a simple lens, and therefore can only effectively focus on one color at a time. The lenses used in most modern cameras work around this problem by using multiple lenses of different refractive indexes (chromatic lenses) so that all colors are in focus at one time, but the human eye is not that advanced.
For that reason, your users should only have to focus on one color at a time to read the text. This means that either the foreground is in color, or the background, but never both. This leads to a condition typically called vibration, in which the eye rapidly shifts focus between foreground and background colors, trying to resolve the shape, but it never resolves, the shape is never in focus, and it leads to eyestrain.
如果您向函数提供 RGB(127,127,127)，您的函数将无法工作，因为它将返回完全相同的颜色。 （修改你的函数以返回黑色或白色会稍微改善一些情况）
始终保持可读性的最佳方法是使用白色文本，周围有黑色，或者反之亦然。
通常是通过首先在 (x-1,y-1)、(x+1,y-1)、(x+1,y-1)、(x+1,x+1) 处绘制黑色文本来实现，并且然后是 (x,y) 处的白色文本。
或者，您可以先绘制一个半透明的黑色块，然后在其上绘制不透明的白色文本。 这确保了背景和文本之间始终存在一定程度的对比度。
Your function won't work if you supply it with RGB(127,127,127), because it will return the exact same colour. (modifying your function to return either black or white would slightly improve things)
The best way to always have things readable is to have white text with black around it, or the other way around.
It's oftenly achieved by first drawing black text at (x-1,y-1),(x+1,y-1),(x+1,y-1),(x+1,x+1), and then white text at (x,y).
Alternatively, you could first draw a semi-transparent black block, and then non-transparent white text over it. That ensures that there will always be a certain amount of contrast between your background and your text.
为什么是灰色的？ 黑色或白色是最好的。 深色上白色，浅色上黑色。 只需查看亮度是否高于阈值并选择其中之一
（顺便说一句，您不需要 .net、c# 或 asp.net 标签）
why grey? either black or white would be best. white on dark colors, black on light colors. just see if luminance is above a threshold and pick one or the other
(you don't need the .net, c# or asp.net tags, by the way)
你需要学习一些色彩理论。 一个名为“Color Wheel Pro”的程序玩起来很有趣，并且会给你一个总体的想法。
本质上，您正在寻找给定颜色的互补色。
也就是说，我认为您会发现虽然颜色理论有所帮助，但您仍然需要人眼进行微调。
You need to study some color theory. A program called "Color Wheel Pro" is fun to play around with and will give you the general idea.
Essentially, you're looking for complimentary colors for a given color.
That said, I think you will find that while color theory helps, you still need a human eye to fine tune.