小开

最佳答案

我也遇到过类似的问题。我必须找到一种选择对比字体颜色的好方法，以便在色度/热图上显示文本标签。它必须是通用的方法，生成的颜色必须“好看”，这意味着简单地生成互补色并不是一个好的解决方案——有时它会生成奇怪的、非常强烈的颜色，很难观察和阅读。

经过长时间的测试和试图解决这个问题，我发现最好的解决方案是选择白色字体的“;黑暗”。颜色，黑色字体为“明亮”;颜色。

下面是我在c#中使用的一个函数示例:

Color ContrastColor(Color color)
{
int d = 0;
    

// Counting the perceptive luminance - human eye favors green color...
double luminance = (0.299 * color.R + 0.587 * color.G + 0.114 * color.B)/255;
    

if (luminance > 0.5)
d = 0; // bright colors - black font
else
d = 255; // dark colors - white font
                

return  Color.FromArgb(d, d, d);
}

这是测试了许多不同的颜色尺度(彩虹，灰度，热，冰，和许多其他)，是唯一的“通用”;我发现的方法。

< p > 编辑
将计数a的公式改为“感知亮度”。-看起来真的好多了!已经在我的软件中实现了，看起来很棒

<强>编辑2 @WebSeed提供了这个算法的一个很好的工作示例:http://codepen.io/WebSeed/full/pvgqEq/

小开

如果你是为了视觉效果而操纵色彩空间，通常使用HSL(色相、饱和度和明度)比RGB更容易。在RGB中移动颜色以获得自然的令人愉悦的效果在概念上是相当困难的，而转换为HSL，在那里进行操作，然后再转换回来在概念上更直观，并且总是会给出更好的外观结果。

维基百科有一个好的介绍到HSL和密切相关的HSV。网络上有免费代码可以进行转换(例如这是一个javascript实现)

你使用什么精确的转换是一个品味问题，但我个人认为颠倒色调和明度组件肯定会产生一个良好的高对比度的颜色作为第一个近似，但你可以很容易地追求更微妙的效果。

小开

谢谢你写这篇文章。

对于可能感兴趣的人，这里有一个Delphi中的函数示例:

function GetContrastColor(ABGColor: TColor): TColor;
var
ADouble: Double;
R, G, B: Byte;
begin
if ABGColor <= 0 then
begin
Result := clWhite;
Exit; // *** EXIT RIGHT HERE ***
end;


if ABGColor = clWhite then
begin
Result := clBlack;
Exit; // *** EXIT RIGHT HERE ***
end;


// Get RGB from Color
R := GetRValue(ABGColor);
G := GetGValue(ABGColor);
B := GetBValue(ABGColor);


// Counting the perceptive luminance - human eye favors green color...
ADouble := 1 - (0.299 * R + 0.587 * G + 0.114 * B) / 255;


if (ADouble < 0.5) then
Result := clBlack  // bright colors - black font
else
Result := clWhite;  // dark colors - white font
end;

小开

您可以在任何色相背景上有任何色相文本，并确保它是易读的。我一直都这么做。在Javascript中有一个公式可读的彩色文本- STW* 正如它在那个链接上所说的那样，这个公式是逆伽马调整计算的变化，尽管IMHO更易于管理。该链接右侧的菜单及其相关页面使用随机生成的颜色作为文本和背景，始终清晰可辨。所以，是的，显然这是可以做到的，没有问题

小开

基于Gacek的回答，但直接返回颜色常量(其他修改见下文):

public Color ContrastColor(Color iColor)
{
// Calculate the perceptive luminance (aka luma) - human eye favors green color...
double luma = ((0.299 * iColor.R) + (0.587 * iColor.G) + (0.114 * iColor.B)) / 255;


// Return black for bright colors, white for dark colors
return luma > 0.5 ? Color.Black : Color.White;
}

我删除了亮度值的反转，使明亮的颜色有一个更高的值，这对我来说似乎更自然，也是默认的计算方法。
(编辑:这在原来的答案中也被采用了) < / p >

我使用了与在这里中的Gacek相同的常量，因为它们对我来说非常有用。

你也可以使用以下签名将其实现为扩展方法:

public static Color ContrastColor(this Color iColor)

你可以通过
调用它 foregroundColor = backgroundColor.ContrastColor() . < / p >

小开

我对Gacek回答的快速实现:

func contrastColor(color: UIColor) -> UIColor {
var d = CGFloat(0)


var r = CGFloat(0)
var g = CGFloat(0)
var b = CGFloat(0)
var a = CGFloat(0)


color.getRed(&r, green: &g, blue: &b, alpha: &a)


// Counting the perceptive luminance - human eye favors green color...
let luminance = 1 - ((0.299 * r) + (0.587 * g) + (0.114 * b))


if luminance < 0.5 {
d = CGFloat(0) // bright colors - black font
} else {
d = CGFloat(1) // dark colors - white font
}


return UIColor( red: d, green: d, blue: d, alpha: a)
}

小开

丑陋的Python，如果你不想写它:)

'''
Input a string without hash sign of RGB hex digits to compute
complementary contrasting color such as for fonts
'''
def contrasting_text_color(hex_str):
(r, g, b) = (hex_str[:2], hex_str[2:4], hex_str[4:])
return '000' if 1 - (int(r, 16) * 0.299 + int(g, 16) * 0.587 + int(b, 16) * 0.114) / 255 < 0.5 else 'fff'

小开

这是一个非常有用的答案。谢谢!

我想分享一个SCSS版本:

@function is-color-light( $color ) {


// Get the components of the specified color
$red: red( $color );
$green: green( $color );
$blue: blue( $color );


// Compute the perceptive luminance, keeping
// in mind that the human eye favors green.
$l: 1 - ( 0.299 * $red + 0.587 * $green + 0.114 * $blue ) / 255;
@return ( $l < 0.5 );


}

现在弄清楚如何使用算法来自动创建菜单链接的悬停颜色。浅标题的悬停颜色较深，反之亦然。

小开

谢谢你@Gacek。下面是一个Android版本:

@ColorInt
public static int getContrastColor(@ColorInt int color) {
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;


int d;
if (a < 0.5) {
d = 0; // bright colors - black font
} else {
d = 255; // dark colors - white font
}


return Color.rgb(d, d, d);
}

还有一个改进的(更短的)版本:

@ColorInt
public static int getContrastColor(@ColorInt int color) {
// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color)) / 255;
return a < 0.5 ? Color.BLACK : Color.WHITE;
}

小开

iOS Swift 3.0 (UIColor扩展):

func isLight() -> Bool
{
if let components = self.cgColor.components, let firstComponentValue = components[0], let secondComponentValue = components[1], let thirdComponentValue = components[2] {
let firstComponent = (firstComponentValue * 299)
let secondComponent = (secondComponentValue * 587)
let thirdComponent = (thirdComponentValue * 114)
let brightness = (firstComponent + secondComponent + thirdComponent) / 1000


if brightness < 0.5
{
return false
}else{
return true
}
}


print("Unable to grab components and determine brightness")
return nil
}

小开

Javascript (ES2015)

const hexToLuma = (colour) => {
const hex   = colour.replace(/#/, '');
const r     = parseInt(hex.substr(0, 2), 16);
const g     = parseInt(hex.substr(2, 2), 16);
const b     = parseInt(hex.substr(4, 2), 16);


return [
0.299 * r,
0.587 * g,
0.114 * b
].reduce((a, b) => a + b) / 255;
};

小开

作为Kotlin / Android扩展:

fun Int.getContrastColor(): Int {
// Counting the perceptive luminance - human eye favors green color...
val a = 1 - (0.299 * Color.red(this) + 0.587 * Color.green(this) + 0.114 * Color.blue(this)) / 255
return if (a < 0.5) Color.BLACK else Color.WHITE
}

小开

一个Android版本，捕捉alpha以及。

(感谢@thomas-vos)

/**
* Returns a colour best suited to contrast with the input colour.
*
* @param colour
* @return
*/
@ColorInt
public static int contrastingColour(@ColorInt int colour) {
// XXX https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color


// Counting the perceptive luminance - human eye favors green color...
double a = 1 - (0.299 * Color.red(colour) + 0.587 * Color.green(colour) + 0.114 * Color.blue(colour)) / 255;
int alpha = Color.alpha(colour);


int d = 0; // bright colours - black font;
if (a >= 0.5) {
d = 255; // dark colours - white font
}


return Color.argb(alpha, d, d, d);
}

小开

objective-c的实现

+ (UIColor*) getContrastColor:(UIColor*) color {
CGFloat red, green, blue, alpha;
[color getRed:&red green:&green blue:&blue alpha:&alpha];
double a = ( 0.299 * red + 0.587 * green + 0.114 * blue);
return (a > 0.5) ? [[UIColor alloc]initWithRed:0 green:0 blue:0 alpha:1] : [[UIColor alloc]initWithRed:255 green:255 blue:255 alpha:1];
}

小开

我也有同样的问题，但我必须在PHP中开发它。我使用了@Garek的解决方案，我也使用了这个答案: 在PHP中转换十六进制颜色为RGB值将HEX颜色代码转换为RGB

所以我要分享它。

我想在给定的背景颜色下使用这个函数，但不总是从“#”开始。

//So it can be used like this way:
$color = calculateColor('#804040');
echo $color;


//or even this way:
$color = calculateColor('D79C44');
echo '<br/>'.$color;


function calculateColor($bgColor){
//ensure that the color code will not have # in the beginning
$bgColor = str_replace('#','',$bgColor);
//now just add it
$hex = '#'.$bgColor;
list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
$color = 1 - ( 0.299 * $r + 0.587 * $g + 0.114 * $b)/255;


if ($color < 0.5)
$color = '#000000'; // bright colors - black font
else
$color = '#ffffff'; // dark colors - white font


return $color;
}

小开

Swift 4示例:

extension UIColor {


var isLight: Bool {
let components = cgColor.components


let firstComponent = ((components?[0]) ?? 0) * 299
let secondComponent = ((components?[1]) ?? 0) * 587
let thirdComponent = ((components?[2]) ?? 0) * 114
let brightness = (firstComponent + secondComponent + thirdComponent) / 1000


return !(brightness < 0.6)
}


}

更新 -发现0.6是一个更好的查询测试平台

小开

颤振实现

Color contrastColor(Color color) {
if (color == Colors.transparent || color.alpha < 50) {
return Colors.black;
}
double luminance = (0.299 * color.red + 0.587 * color.green + 0.114 * color.blue) / 255;
return luminance > 0.5 ? Colors.black : Colors.white;
}

小开

请注意，在谷歌闭包库中有一个引用w3c推荐的算法:http://www.w3.org/TR/AERT#color-contrast。但是，在这个API中，您提供了一个建议颜色列表作为起点。

/**
* Find the "best" (highest-contrast) of the suggested colors for the prime
* color. Uses W3C formula for judging readability and visual accessibility:
* http://www.w3.org/TR/AERT#color-contrast
* @param {goog.color.Rgb} prime Color represented as a rgb array.
* @param {Array<goog.color.Rgb>} suggestions Array of colors,
*     each representing a rgb array.
* @return {!goog.color.Rgb} Highest-contrast color represented by an array.
*/
goog.color.highContrast = function(prime, suggestions) {
var suggestionsWithDiff = [];
for (var i = 0; i < suggestions.length; i++) {
suggestionsWithDiff.push({
color: suggestions[i],
diff: goog.color.yiqBrightnessDiff_(suggestions[i], prime) +
goog.color.colorDiff_(suggestions[i], prime)
});
}
suggestionsWithDiff.sort(function(a, b) { return b.diff - a.diff; });
return suggestionsWithDiff[0].color;
};




/**
* Calculate brightness of a color according to YIQ formula (brightness is Y).
* More info on YIQ here: http://en.wikipedia.org/wiki/YIQ. Helper method for
* goog.color.highContrast()
* @param {goog.color.Rgb} rgb Color represented by a rgb array.
* @return {number} brightness (Y).
* @private
*/
goog.color.yiqBrightness_ = function(rgb) {
return Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);
};




/**
* Calculate difference in brightness of two colors. Helper method for
* goog.color.highContrast()
* @param {goog.color.Rgb} rgb1 Color represented by a rgb array.
* @param {goog.color.Rgb} rgb2 Color represented by a rgb array.
* @return {number} Brightness difference.
* @private
*/
goog.color.yiqBrightnessDiff_ = function(rgb1, rgb2) {
return Math.abs(
goog.color.yiqBrightness_(rgb1) - goog.color.yiqBrightness_(rgb2));
};




/**
* Calculate color difference between two colors. Helper method for
* goog.color.highContrast()
* @param {goog.color.Rgb} rgb1 Color represented by a rgb array.
* @param {goog.color.Rgb} rgb2 Color represented by a rgb array.
* @return {number} Color difference.
* @private
*/
goog.color.colorDiff_ = function(rgb1, rgb2) {
return Math.abs(rgb1[0] - rgb2[0]) + Math.abs(rgb1[1] - rgb2[1]) +
Math.abs(rgb1[2] - rgb2[2]);
};

小开

base R版本的@Gacek的答案，以获得luminance(你可以很容易地应用你自己的阈值)

# vectorized
luminance = function(col) c(c(.299, .587, .114) %*% col2rgb(col)/255)

用法:

luminance(c('black', 'white', '#236FAB', 'darkred', '#01F11F'))
# [1] 0.0000000 1.0000000 0.3730039 0.1629843 0.5698039

小开

基于Gacek的回答，在用波浏览器扩展分析了@WebSeed的例子之后，我提出了以下版本，它根据对比度(在W3C的Web Content Accessibility Guidelines (WCAG中定义)而不是亮度选择黑色或白色文本。

这是代码(javascript):

// As defined in WCAG 2.1
var relativeLuminance = function (R8bit, G8bit, B8bit) {
var RsRGB = R8bit / 255.0;
var GsRGB = G8bit / 255.0;
var BsRGB = B8bit / 255.0;


var R = (RsRGB <= 0.03928) ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
var G = (GsRGB <= 0.03928) ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
var B = (BsRGB <= 0.03928) ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);


return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};


var blackContrast = function(r, g, b) {
var L = relativeLuminance(r, g, b);
return (L + 0.05) / 0.05;
};


var whiteContrast = function(r, g, b) {
var L = relativeLuminance(r, g, b);
return 1.05 / (L + 0.05);
};


// If both options satisfy AAA criterion (at least 7:1 contrast), use preference
// else, use higher contrast (white breaks tie)
var chooseFGcolor = function(r, g, b, prefer = 'white') {
var Cb = blackContrast(r, g, b);
var Cw = whiteContrast(r, g, b);
if(Cb >= 7.0 && Cw >= 7.0) return prefer;
else return (Cb > Cw) ? 'black' : 'white';
};

一个有效的例子可以在@WebSeed的代码依赖的我的叉子中找到，它在WAVE中产生零低对比度错误。

小开

我会评论@MichaelChirico的回答，但我没有足够的声誉。这里有一个在R中返回颜色的例子:

get_text_colour <- function(
background_colour,
light_text_colour = 'white',
dark_text_colour = 'black',
threshold = 0.5
) {


background_luminance <- c(
c( .299, .587, .114 ) %*% col2rgb( background_colour ) / 255
)


return(
ifelse(
background_luminance < threshold,
light_text_colour,
dark_text_colour
)
)
}

> get_text_colour( background_colour = 'blue' )
[1] "white"


> get_text_colour( background_colour = c( 'blue', 'yellow', 'pink' ) )
[1] "white" "black" "black"


> get_text_colour( background_colour = c('black', 'white', '#236FAB', 'darkred', '#01F11F') )
[1] "white" "black" "white" "white" "black"

小开

简短的回答:

计算给定颜色的亮度(Y)，并根据预先确定的中间对比度图将文本翻转为黑色或白色。对于典型的sRGB显示，当Y <0.4(即40%)

再回答

毫不奇怪，这里几乎每个答案都有一些误解，和/或引用了不正确的系数。唯一接近的答案是Seirios，尽管它依赖于WCAG 2的对比，而WCAG 2本身是不正确的。

如果我说“不足为奇”，部分原因是互联网上关于这个特定主题的大量错误信息。事实上，这一领域仍然是一个活跃的研究和悬而未决的科学的主题，增加了乐趣。我得出这个结论是由于过去几年对一种新的可读性对比预测方法的研究。

视知觉领域是密集而抽象的，也是不断发展的，因此误解的存在是很常见的。例如，HSV和HSL甚至在感知上都不接近准确。为此，您需要一个感知上统一的模型，如CIELAB或CIELUV或CIECAM02等。

一些误解甚至已经进入了标准，例如WCAG 2(1.4.3)的对比部分，在其大部分范围内都被证明是不正确的。

第一个解决办法:

这里许多答案中显示的系数为(。299， .587， .114)是错误的，因为它们属于一个被称为NTSC YIQ的早已过时的系统，这是几十年前北美的模拟广播系统。虽然在一些YCC编码规范中仍可能用于向后兼容，但它们不应该在sRGB上下文中使用。

sRGB和Rec.709 (HDTV)的系数为:

红色:0.2126
绿色:0.7152
蓝色:0.0722

其他颜色空间如Rec2020或AdobeRGB使用不同的系数，对于给定的颜色空间使用正确的系数是很重要的。

这些系数不能直接应用于8位sRGB编码的图像或颜色数据。编码的数据必须首先线性化，然后应用系数来找到给定像素或颜色的亮度(光值)。

对于sRGB，有一个分段变换，但由于我们只对感知的亮度对比感兴趣，以找到“翻转”的点。文字由黑变白，我们可以通过简单的伽玛法走捷径。

安迪的亮度快捷键明度

将每个sRGB颜色除以255.0，然后提高到2.2的幂，然后乘以系数并将它们相加，得到估计的亮度。

 let Ys = Math.pow(sR/255.0,2.2) * 0.2126 +
Math.pow(sG/255.0,2.2) * 0.7152 +
Math.pow(sB/255.0,2.2) * 0.0722; // Andy's Easy Luminance for sRGB. For Rec709 HDTV change the 2.2 to 2.4

这里，Y是sRGB监视器的相对亮度，范围从0.0到1.0。但这与感知无关，我们需要进一步的转换来适应我们人类对相对亮度的视觉感知，以及感知到的对比。

40%的翻转

但在这之前，如果你只是寻找一个基本点来将文本从黑色翻转到白色，反之亦然，欺骗是使用我们刚刚导出的Y，并将翻转点设置为Y = 0.40;。因此，对于高于0.4 Y的颜色，将文本设置为黑色#000，对于高于0.4 Y的颜色，将文本设置为白色#fff。

  let textColor = (Ys < 0.4) ? "#fff" : "#000"; // Low budget down and dirty text flipper.

为什么是40%而不是50%?人类对明暗和对比的感知不是线性的。对于自动照明显示器来说，在大多数典型条件下，0.4 Y恰好是中等对比度。

是的，它是不同的，是的，这是一个过度简化。但如果你要将文本翻转成黑色或白色，简单的答案是有用的。

知觉奖励轮

预测对特定颜色和亮度的感知仍然是一个活跃的研究课题，而不是完全确定的科学。CIELAB或LUV的L* (Lstar)已被用于预测感知亮度，甚至预测感知对比度。然而，L*在非常明确/受控的环境中很好地用于表面颜色，而不适用于自发光显示器。

虽然这不仅取决于显示类型和校准，还取决于你的环境和整个页面内容，如果你从上面取Y，并将它提高到^0.685到^0.75左右，你会发现0.5通常是将文本从白色翻转到黑色的中间点。

  let textColor = (Math.pow(Ys,0.75) < 0.5) ? "#fff" : "#000"; // perceptually based text flipper.

使用指数0.685将使文本颜色交换在较深的颜色上，而使用0.8将使文本颜色交换在较浅的颜色上。

空间频率双倍奖励回合

值得注意的是，对比度不仅仅是两种颜色之间的距离。空间频率，换句话说，字体的重量和大小，也是不可忽视的关键因素。

也就是说，你可能会发现当颜色处于中间位置时，你会想要增加字体的大小和重量。

  let textSize = "16px";
let textWeight = "normal";
let Ls = Math.pow(Ys,0.7);


if (Ls > 0.33 && Ls < 0.66) {
textSize = "18px";
textWeight = "bold";
}  // scale up fonts for the lower contrast mid luminances.

Hue R U

这超出了本文的范围，但上面我们忽略了色相和色度。色相和色度确实有影响，如Helmholtz Kohlrausch，上面简单的亮度计算并不总是预测饱和色相的强度。

为了预测感知的这些更微妙的方面，需要一个完整的外观模型。亨特，费尔希尔德，伯恩斯是值得一看的几位作家，如果你想坠入人类视觉感知的兔子洞……

出于这个狭窄的目的，我们可以稍微重新加权系数，知道绿色占亮度的大部分，纯蓝色和纯红色应该总是两种颜色中最暗的。使用标准系数往往会发生的情况是，含有大量蓝色或红色的中间颜色可能会在低于理想亮度的情况下变成黑色，而含有大量绿色成分的颜色可能会相反。

也就是说，我发现通过增加中间颜色的字体大小和粗细来解决这个问题是最好的。

把它们放在一起

因此，我们假设您将向这个函数发送一个十六进制字符串，它将返回一个样式字符串，可以发送到特定的HTML元素。

查看CODEPEN，灵感来自Seirios的作品:

< a href = " https://codepen。io/myndex/pen/RwZJyPR" rel="nofollow noreferrer">CodePen: 花式字体翻转

Codepen代码所做的其中一件事是为低对比度的中范围增加文本大小。下面是一个例子:

如果你想尝试其中一些概念，请访问SAPC开发网站https://www.myndex.com/SAPC/，点击“研究模式”。提供交互式实验来演示这些概念。

启蒙的术语

亮度: Y(相对)或L(绝对cd/m²)光的光谱加权但线性测量。不要与“亮度”混淆。
亮度:光随时间变化，在天文学中有用。
明度: L^＊ (Lstar) CIE定义的感知亮度。一些型号有一个相关的轻度J^＊。

根据背景色确定字体颜色