JavaScript 颜色对比

Posted 2023-03-06

【中文标题】JavaScript 颜色对比

【英文标题】：JavaScript color contraster

【发布时间】：2011-08-04 18:55:20

【问题描述】：

我正在寻找一种技术，我们可以通过编程方式选择最佳颜色对比度，以应用于具有不同（不可预测的）背景颜色的 html 元素上的文本。

由于 HTML 元素将具有不同的颜色，我们正在寻找一种能够确定文本背后内容的颜色的技术，然后调整文本的颜色以使用具有最佳对比度的颜色.

我很确定这不能只是 CSS，我一直在寻找 Jquery 解决方案但找不到任何...有人有线索吗？

[更新]： 根据第一个回复，我想我需要重新措辞。想象一下，我正在构建一个图像共享服务，并且我想允许人们自己标记图片on。图片可以是任何颜色。如何为每张不同的图片选择正确的标签颜色？

【问题讨论】：

你可以试试 BackgroundCheck 脚本：kennethcachia.com/background-check

【参考方案1】：

我认为这可能会为任何未来的研究人员节省一点时间，这对我来说非常有效。将红色绿色和蓝色值插入函数，它会输出“dark-text”或“light-text”。

var darkOrLight = function(red, green, blue) 
  var brightness;
  brightness = (red * 299) + (green * 587) + (blue * 114);
  brightness = brightness / 255000;

  // values range from 0 to 1
  // anything greater than 0.5 should be bright enough for dark text
  if (brightness >= 0.5) 
    return "dark-text";
   else 
    return "light-text";
  

使用来自@David 答案的http://particletree.com/notebook/calculating-color-contrast-for-legible-text/ 中的一些代码。

【讨论】：

看看这个 JQuery 插件github.com/joggink/jquery-colorcontrast，它似乎实现了上述功能。小心（当前）插件没有迭代；您需要自己调用“每个”

【参考方案2】：

看看http://www.0to255.com。只需浏览一下该网站呈现的渐变色，您就会立刻感到眼前一亮。你将不得不解谜，但只有大约 20 秒。它是解决此类问题的好网站，也是程序化解决方案的绝佳创意来源。而且不涉及数学：只需为 rgb vals 插入一些字节即可。

【讨论】：

有用资源+1，虽然我不确定它是否特别回答了这个问题！

感谢您的链接，但这并没有说明我如何才能真正获得文本下方的颜色！

啊，是的。我现在看到我跳到了前面。您必须使用 javascript、DHTML 和 DOM。在 Javascript 中，找到需要更改其文本颜色的对象；从该对象中提取背景颜色属性；然后继续为标签文本选择一种颜色。这更接近您正在寻找的答案吗？

@Julien Genestoux -- 至于图像：就个人而言，我什至不会考虑尝试在照片中整合颜色以产生一种复合背景色，以对比显示标签文本颜色。取而代之的是，我总是在照片上放一团白色，并在该白色团块上显示黑色标签文本。只是我的观点;毫无疑问，很酷的算法可以计算出平均背景颜色的良好近似值。 Nut，就我个人而言，我不会尝试这样的事情。

【参考方案3】：

现在 CSS 中有一个名为 mix-blend-mode 的属性（目前只是草稿），可用于实现与您想要的类似的东西。

.contrasting-text 
    mix-blend-mode: difference;

有人整理的 CodePen 证明了这一点：https://codepen.io/thebabydino/pen/JNWqLL

【参考方案4】：

这是我最喜欢的两种颜色的calculate the "readability"（对比度）资源。

W3C 建议文本和文本后面的背景之间存在至少 5:1 的对比度http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18

从页面：

上面显示的合规率是达到的最高合规率。 WCAG 2.0 AA 级和提议的第 508 节刷新合规性级别基于实现 3:1 的对比度，用于大小为 18 点（如果加粗为 14 点）或更大的文本，或者对于大小小于 4.5:1 的文本18 分。当小于 18 磅的文本达到 7:1 的对比度和 18 磅（粗体为 14 磅）或更大的文本达到 4.5:1 时，符合 WCAG 2.0 级别 AAA 合规级别。

【讨论】：

对不起，但这不是回答问题。是的，如果我能够分辨出我的文字下的颜色，那将是，但我不能。我该怎么办？

您可以使用 JavaScript 读取元素的当前背景颜色： $('.myclass').css('background-color') 使用该值可以计算任何其他元素的对比度级别颜色。我假设您想使用 jQuery，因为您提到要查找它。

2 个问题：如何确定“myid”？如果是图片呢？

如果您的背景是图像，我不会尝试自动处理客户端（使用画布）的颜色 - 我会查看服务器端解决方案，因为它会减少跨浏览器问题和规模更好。

【参考方案5】：

这是我从 GitHub 获得的另一种方法，它们应用于问题标签的颜色。它实际上依赖于带有一些计算的 CSS 自定义属性。

.hx_IssueLabel 
    --label-r:0;
    --label-g:0;
    --label-b:0;

    --lightness-threshold:0.453;
    --perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
    --lightness-switch:max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));

    background:rgb(var(--label-r), var(--label-g), var(--label-b));
    color:hsl(0, 0%, calc(var(--lightness-switch) * 100%));

您需要在自定义属性中单独设置背景颜色的 RGB 通道，然后通过更改 HSL 颜色中的亮度通道，文本颜色将从黑色变为白色。亮度是通过接收 RGB 作为输入的算法计算的。

【参考方案6】：

只用一行就解决了问题：

function getContrast50($hexcolor)
 
  return (hexdec($hexcolor) > 0xffffff/2) ? 'white':'black'; 

如果需要反转对比度，只需将白色与黑色切换即可。在php中。

【讨论】：

正如之前的评论所说，这是 PHP 代码，而不是 Javascript。 hexdec函数存在于PHP中，而不存在于JS中