如何检查/选择字体颜色以与网页上的渐变形成鲜明对比?

时间:2015-07-04 18:41:47

标签: javascript html contrast gradients

所以我有一个按钮,其中包含从任意颜色到另一种颜色的渐变。是否有一种系统的方法来使用代码(a)检查当前文本颜色是否有效以及(b)如果当前文本颜色不起作用,是否有办法生成可以工作的文本颜色在渐变?我正在根据用户输入更改某些按钮的渐变,并在必要时更新字体颜色。

注意,我认识到这是纯色背景的一个相当好的解决问题(例如,请参见此处:http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/)。

1 个答案:

答案 0 :(得分:0)

如果您正在寻找自动检测,我可能会从这里开始:

http://khan.github.io/tota11y/

这是一个jQuery插件,用于检查背景/前景色的可访问性,如果单击左下角的图标,然后单击"对比"它会指出您网页上的问题。看起来它适用于渐变,所以也许你可以用一种帮助你选择颜色的方式来修改它。

有关更多手动方法:

此Chrome插件表示它适用于渐变:

https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll

波:

http://wave.webaim.org