JavaScript颜色对比器

JavaScript color contraster

本文关键字：颜色 JavaScript      更新时间：2023-09-26

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

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

我很确定这不能只有CSS，我已经寻找了Jquery的解决方案，但找不到任何…有人知道吗?

(更新):根据第一个回复，我想我需要重新措辞。想象一下，我正在构建一个图像共享服务，我想让人们自己在图片上标记。这些画可以是任何颜色。我如何为每张不同的图片选择正确的标签颜色?

我认为这可能会节省任何未来的研究人员一点时间，这对我来说是完美的。将红、绿、蓝值输入函数，输出"暗文本"或"亮文本"。

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/

看看http://www.0to255.com。只需瞥一眼网站呈现的渐变，就会让你眼前一亮。你需要猜字谜，但只有20秒。这是解决这类问题的好地方，也是提供程序化解决方案的好主意来源。这里不涉及数学:只需要为rgb值插入一些字节，然后go。

现在在CSS中有一个名为mix-blend-mode的属性(目前只是草案)，可以用来实现类似于你想要的东西。

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

CodePen有人把它放在一起演示:https://codepen.io/thebabydino/pen/JNWqLL

这是我最喜欢的计算两种颜色的"可读性"(对比度)的资源。

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

From the page:

上面显示的遵从率是所能达到的最高遵从率。WCAG 2.0 AA级和建议的Section 508刷新遵从性级别是基于实现3:1的对比度，尺寸为18点或更大的文本(如果加粗则为14点)或4.5:1的对比度，尺寸小于18点的文本。当小于18点的文本对比度达到7:1，大于或等于18点的文本对比度达到4.5:1时，符合WCAG 2.0级AAA合规级别。

这是我从GitHub获得的另一种方法，它们应用于issue标签的颜色。它实际上依赖于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作为输入的算法计算。

只用一行就解决了这个问题:

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

如果需要扭转对比度，只需将白色换成黑色就可以了。在php中。

相关文章：