13

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

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

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

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

4

6 回答 6

14

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

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/中的一些代码。

于 2012-03-12T09:31:10.590 回答
2

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

于 2011-04-13T14:37:26.310 回答
1

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

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

CodePen 有人放在一起证明了这一点：https ://codepen.io/thebabydino/pen/JNWqLL

于 2017-06-06T15:18:05.857 回答
0

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

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 合规级别。

于 2011-04-13T15:04:55.577 回答
0

这是我从 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 作为输入的算法计算的。

于 2022-01-05T04:26:56.507 回答
-1

仅用一行就解决了问题：

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

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

于 2012-09-19T14:20:36.650 回答