在javascript中计算对比色 [英] Calculating contrasting colours in javascript

问题描述

在我们正在处理的一个页面上，用户可以更改显示文本的背景。

On one of pages we're currently working on users can change the background of the text displayed.

我们希望自动更改前景色以保持文本的合理对比度。

We would like to automatically alter the foreground colour to maintain reasonable contrast of the text.

我们也希望颜色范围是自由裁量的。例如，如果背景以255为增量从白色变为黑色，我们不希望看到255种色调的前景色。在这种情况下，可能是2到4，只是为了维持合理的对比。

We would also prefer the colour range to be discretionary. For example, if background is changing from white to black in 255 increments, we don't want to see 255 shades of foreground colour. In this scenario, perhaps 2 to 4, just to maintain reasonable contrast.

任何UI /设计/颜色专家/画家在那里鞭子超出公式？

Any UI/design/colour specialists/painters out there to whip out the formula?

推荐答案

就纯粹的可读性而言，您希望在任何背景上使用黑白文本。因此，将RGB转换为HSV，并检查V是否为< 0.5。如果是这样，白色，如果不是，则为黑色。

In terms of sheer readability, you want to use black and white text on whatever background it is. So convert RGB to HSV, and just check whether V is < 0.5. If so, white, if not, black.

首先尝试，看看你是否觉得它很有吸引力。

Try that first and see if you find it attractive.

如果你不这样做，那么当你的背景太亮或太暗时，你可能希望白色和黑色不那么明显。要将其调低，请保持相同的色调和饱和度，并将这些值用于亮度：

If you don't, then you probably want the white and black not to be so stark when your background is too bright or too dark. To tone this down, keep the same hue and saturation, and use these values for brightness:

background V  foreground V
0.0-0.25      0.75
0.25-0.5      1.0
0.5-0.75      0.0
0.75-1.0      0.25

在中等颜色上，您仍会看到黑色或白色文字，这些文字非常易读。在深色或浅色上，您将看到相同的颜色文本，但在亮度方面至少3/4，因此仍然可读。我希望它看起来不错：）

On a medium color, you'll still see black or white text which will be nicely readable. On a dark color or light color, you'll see the same color text but at least 3/4 away in terms of brightness and therefore still readable. I hope it looks nice :)

这篇关于在javascript中计算对比色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！