JavaScript 颜色对比器

Question

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

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

我很确定这不仅仅是 CSS，我已经寻找了 Jquery 解决方案，但找不到任何...有人有线索吗？

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

Answer 1

我认为这可能会为未来的研究人员节省一点时间，这对我来说非常有效。将红绿和蓝色值代入函数中，它会输出“深色文本”或“浅色文本”。

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";
  }
}

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

Answer 2

查看 http://www.0to255.com 。只需浏览一下该网站呈现的渐变效果，您就会立即眼前一亮。你必须解谜，但只持续大约 20 秒。这是解决此类问题的绝佳网站，也是程序化解决方案的绝佳创意来源。并且不涉及数学：只需为 RGB 值插入一些字节即可。

Answer 3

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

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

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

Answer 4

这是我最喜欢的计算“可读性”的资源（对比两种颜色的比例）。

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

来自页面：

上图所示的合规率是最高的合规率率达到。 WCAG 2.0 AA 级和提议的第 508 节刷新合规性级别基于以下条件：对于 18 点（如果加粗，则为 14 点）或更大的文本，实现 3:1 的对比度；对于小于 18 点（如果加粗，则为 14 点）的文本，实现 4.5:1 的对比度。 18分。当小于 18 点的文本达到 7:1 的对比度以及 18 点（如果加粗则为 14 点）或更大的文本达到 4.5:1 的对比度时，就满足 WCAG 2.0 级 AAA 合规性级别。

Answer 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 作为输入的算法来计算的。

Answer 6

只需一行就可以解决问题：

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

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