JavaScript 颜色对比器
我正在寻找一种技术,我们可以通过编程方式选择最佳的颜色对比度,应用于不同(不可预测)背景颜色的 HTML 元素上的文本。
由于 HTML 元素将具有不同的颜色,因此我们正在寻找一种技术,能够确定文本后面内容的颜色,然后调整文本的颜色以使用对比度最佳的颜色。
我很确定这不仅仅是 CSS,我已经寻找了 Jquery 解决方案,但找不到任何...有人有线索吗?
[更新]: 根据第一条回复,我想我需要重新措辞。想象一下,我正在构建一个图像共享服务,并且我希望允许人们自己在照片上添加标签。图片可以是任何颜色。如何为每张不同的图片选择正确的标签颜色?
I'm looking for a technique where we could programmatically pick the best color contrast to apply on text over HTML elements of different (unpredictable) background colors.
Since the HTML elements will have different colors, we're looking for a technique that will be able to determine what is the color of the content behind the text, and then adapt the text's color to use the one with the best contrast.
I'm quite sure this can't be CSS only, I've looked for Jquery solutions but couldn't find any... anyone has a clue?
[UPDATE] :
Based on the first replies, I guess I need to rephrase. Imagine that I'm building a image sharing service and I want to allow people to tag on the pictures themselves. The pictures can be of any color. How can I pick up the right color of the tags, for each different picture?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
我认为这可能会为未来的研究人员节省一点时间,这对我来说非常有效。将红绿和蓝色值代入函数中,它会输出“深色文本”或“浅色文本”。
使用 http://articletree.com/notebook/calculate-color-contrast-for 中的一些代码-legible-text/ 来自@David 的回答。
I think this might save any future researchers a little time, this works perfectly for me. Plug in the red green and blue values into the function and it outputs "dark-text" or "light-text".
Using some code from http://particletree.com/notebook/calculating-color-contrast-for-legible-text/ from @David's answer.
查看 http://www.0to255.com 。只需浏览一下该网站呈现的渐变效果,您就会立即眼前一亮。你必须解谜,但只持续大约 20 秒。这是解决此类问题的绝佳网站,也是程序化解决方案的绝佳创意来源。并且不涉及数学:只需为 RGB 值插入一些字节即可。
Take a look at http://www.0to255.com . Just a moment's glance at the gradients the site presents will light you right up. You'll have to puzzle, but only for about 20 seconds. It's a great site for such problems and a terrific source of ideas for programmatic solutions. And there's no math involved: just plug in some bytes for rgb vals and go.
CSS 中现在有一个名为
mix-blend-mode
的属性(目前只是草稿),可用于实现与您想要的类似的效果。CodePen 有人整理了这一点:https://codepen.io/thebabydino/pen/JNWqLL
There is now a property called
mix-blend-mode
in CSS (currently just in draft) that can be used to achieve something similar to what you want.CodePen someone has put together demonstrating this: https://codepen.io/thebabydino/pen/JNWqLL
这是我最喜欢的计算“可读性”的资源(对比两种颜色的比例)。
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 合规性级别。
This is my fav resource to calculate the "readability" (contrast ratio) of two colors.
the W3C suggests a contrast ratio of at least 5:1 exists between text and background behind the text http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18
From the page:
The compliance rate shown above is the highest compliance rate met. The WCAG 2.0 level AA and proposed Section 508 refresh compliance level is based on achieving a contrast ratio of 3:1 for text with a size of 18 points (14 points if bolded) or larger or 4.5:1 for text with a size less than 18 points. The WCAG 2.0 level AAA compliance level is meet when a contrast ration of 7:1 is achieved for text less than 18 points and 4.5:1 for text 18 points (14 points if bolded) or larger.
这是我从 GitHub 获得的另一种方法,它们应用于问题标签的颜色。它实际上依赖于 CSS 自定义属性和一些计算。
您需要在背景颜色的自定义属性中单独设置 RGB 通道,然后通过更改 HSL 颜色中的亮度通道,文本颜色将从黑色变为白色。亮度是通过接收 RGB 作为输入的算法来计算的。
Here's another approach I got from GitHub where they apply on the color of issue's labels. It actually relies on CSS custom properties with some calculations.
You will need to set the RGB channel separately in custom properties for the background color, then the text color will run from black to white by changing the lightness channel in HSL color. The lightness is calculated by an algorithm that receives RGB as inputs.
只需一行就可以解决问题:
如果需要反转对比度,只需将白色与黑色交换即可。在 PHP 中。
In just one line this solves the problem:
If the contrast need to be reversed just swicth white with black and it does the trick. In php.