我试图找到适合给定背景颜色的正确匹配对比色，这些颜色将通过WCAG AA指南（文字较小14px）。
我见过的算法是......
function getContrastYIQ(hexcolor){
var r = parseInt(hexcolor.substr(1,2),16);
var g = parseInt(hexcolor.substr(3,2),16);
var b = parseInt(hexcolor.substr(5,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'dark-color' : 'light-color'; }
参考：http://optional.is/required/2011/01/12/maximum-color-contrast/
然而，对于这些颜色，如＃e8540a和＃ff4249这些颜色在没有通过颜色对比准则时会返回浅色。
我可以使用JS中的另一个算法/函数，它会返回一个有效的对比色，而不会通过这些指南吗？
http://squizlabs.github.io/HTML_CodeSniffer/似乎有正确的算法...但似乎无法找到转换为JS的相关代码。有人有什么建议吗？
答案 0 :(得分：3)
有一些概念需要澄清才能回答你的问题。
#000080）背景，您可以放置白色（#000000）文本（对比度16.0），但它也适用于黄色（#ffff00，对比度14.9），粉红色（{{1对比率10.4）等。请参阅以下示例：
#ffc0cb
您引用的算法与relative luminance和contrast ratio的WCAG 2.0规范定义不匹配。您应该坚持使用后面的算法。其他人可能会提供有时工作的近似值，有时甚至不会（或者他们甚至可能提供错误的结果，无论如何）。也就是说，WCAG 2.0推荐的算法既不是特别难以实现也不是计算密集型，因此不值得尝试寻找替代方案，甚至可能表现不佳。
WCAG 2.0对比度算法解决了决策问题，即这两种颜色之间的对比是否足够（对于大多数用户来说，相互区分）？但是，您似乎对解决（约束）优化问题更感兴趣，即哪些（某些预设文本颜色）与此背景颜色形成最大对比？你应该记住这是两个相关但不同的问题 - 差异是不容忽视的。我们稍后会再谈。
关于 squizlabs HTML code sniffer ，您声明无法找到相关代码。那么，他们可以很容易地找到他们对WCAG 2.0对比度算法的实现来搜索对比度＆＃39;在他们的github回购：见contrastRatio, relativeLum and colourStrToRGB functions。有趣的是，它们还提供了recommendation algorithm，它提供了移动前景色或背景色（或两者）的建议，以便遵守指定的对比度，同时将更改保持在必要的最小值。
好的，那就是说，一旦我们的问题范围更加明确，让我们试着回答这个问题：
问：如何根据对比度了解黑色或白色文字在特定背景上是否更合适？
A：您一方面可以简单地计算背景颜色与黑色之间的颜色对比度;然后在你的背景颜色和白色之间，另一个;然后保持达到最佳对比度的那个。在伪js：
<p style="background:navy; color:white">white on navy</p>
<p style="background:navy; color:yellow">yellow on navy</p>
<p style="background:navy; color:pink">pink on navy</p>您可以使用squizlabs或您自己的对比度提供的对比度（如果您遵循WCAG 2.0说明，那就不那么难了。）
请注意，在任何情况下，function(yourColor) {
var black = "#000000";
var white = "#ffffff";
return contrastRatio(yourColor, black) > contrastRatio(yourColor, white) ? 'black' : 'white';
}
函数始终提供大于或等于1.0的值，因为它始终提供较亮颜色与较暗颜色的比率。因此，该函数是可交换的（您不需要注意参数的顺序）。
另请注意，squizlabs contrastRatio函数对您没用，因为它们提供了最接近的推荐颜色以匹配对比度规则，通常情况下，对比度规则不需要是黑色或白色。
问：为什么有时这个或那个算法建议使用黑色（或白色）文本，尽管颜色不符合对比率规则？
A：因为有时候，对于某些背景颜色和对比度级别，根本没有符合对比度规则的文字颜色。
你还记得优化和决定之间的区别吗？有一件事是说＆＃34; 黑色是提供与背景颜色最大对比的文本颜色＆＃34;另一种，不同的是说＆＃34; 黑色文本与背景颜色的对比度大于7比1 ＆＃34;。
有时，即使可达到的最大对比度也不足以形成足以达到所需水平的对比度。这意味着您需要（a）选择不同的背景颜色，或（b）采用其他允许不太严格的对比度（即大文本）的样式，或（c）在您的级别上使用WCAG 2.0选择了。
让我们举几个例子说明：
+-----------------------+-----------+---------------+---------+--------+ | Case | Target C | Text Lum | white? | black? | +-----------------------+-----------+---------------+---------+--------+ | AA large text | 3:1 | 0.000 - 0.100 | OK | NO | | AA large text | 3:1 | 0.100 - 0.300 | OK | OK | | AA large text | 3:1 | 0.300 - 1.000 | NO | OK | | AA small, AAA large | 4.5:1 | 0.000 - 0.175 | OK | NO | | AA small, AAA large | 4.5:1 | 0.175 - 0.183 | OK | OK | | AA small, AAA large | 4.5:1 | 0.183 - 1.000 | NO | OK | | AAA small text | 7:1 | 0.000 - 0.100 | OK | NO | | AAA small text | 7:1 | 0.100 - 0.300 | NO | NO | | AAA small text | 7:1 | 0.300 - 1.000 | OK | OK | +-----------------------+-----------+---------------+---------+--------+
您可能会注意到，有一系列颜色，其亮度介于0.1和0.3之间，对比度介于3：1和7：1之间， 黑色和白色。这意味着这些背景颜色与黑色和白色都有足够的对比度，使用大白色或大黑色文本并符合WCAG SC 1.4.3（AA级别）（尽管只有一个）在每种情况下都是最佳选择：白色背景亮度在0.100和0.179之间，黑色在0.179和0.300之间。但是，另一方面，这些相同的颜色没有足够的对比度可以与任何小文本一起使用，无论其颜色如何，同时仍然符合WCAG SC 1.4.6（AAA级别）。最后，关于小文本和WCAG SC 1.4.3（AA级别），总有一种颜色（黑色或白色）可以提供足够的对比度（两者都有一个很小的范围）申请）。
您引用的optional.is的初始算法受informative draft suggestion by WCAG 1.0的启发。但是，请注意这是非正式的（因为它从未从草案状态中提前），已过时（因为它早已被WCAG 2.0取代），并且实现可能不正确（因为整个算法需要考虑两个变量：亮度差异和色差，而你所指的实现只考虑前者。
我已经包含了一个无法访问的表，这是由于SO标记限制，不允许任意HTML，为此道歉;无论如何，我认为没有必要理解答案。
答案 1 :(得分：1)
您的算法与官方WCAG公式不符。
您可以在下一页上看到WCAG公式以获得对比度： http://www.w3.org/TR/WCAG20-TECHS/G17.html 这要复杂得多。
我不知道他们在哪里发现了这个......