JavaScript检查颜色冲突 html5javascript

注意：本文非原创，而是翻译国外大师文章，布赖恩苏达。布赖恩苏达是一位信息大师，每天都在努力使网络变得更加美好。自从90年代中期发现互联网以来，Brian Suda已经花了很多时间与之相关联。他自己的一小部分互联网是 http://suda.co.uk，他的许多过去的项目和疯狂的想法都可以找到。

原文题目是：计算颜色对比度，但是我想业余的说法比较通俗易懂，也方便搜索引擎收录。
废话少说，进入正题。
问题出现的背景某些网站和服务允许您通过上传图片，更改背景颜色或设计的其他方面来自定义您的个人资料。作为客户，此个性化将Web应用程序转换为您存储数据的小窝。作为设计师，让您的客户自由地控制布局和设计是一个可怕的前景。那么设计用于漂亮的白色背景的所有股票文本和图像会发生什么？即便是Mac也只允许您选择OS，蓝色或石墨两种颜色！除非您灵活并了解如何找到最大色彩对比，否则开放自定义网站配色方案的能力可能会导致灾难。
在本文中，我将向您介绍两个简单的公式，以确定您是否应该使用白色或黑色文本，具体取决于背景的颜色。方程式易于实现并产生类似的结果。这不是一个更好的问题，而是你使用一个更好的事实！这样，即使您的客户选择了最疯狂的Geocities配色方案，至少您的文本仍然可读。
让我们来看看各种可能的颜色。也许这些是预先制作的配色方案，公司颜色或从图像中提取。

文章图片

现在我们有了这些潜在的背景颜色及其十六进制值，我们需要找出相应的文本是白色还是黑色，基于哪个具有更高的对比度，因此提供最佳的可读性。这可以在运行时使用JavaScript完成，也可以在HTML服务之前在后端完成。
我想要比较两个函数。首先，我称之为“50％”。它取十六进制值并将其与纯黑色和纯白色之间的值进行比较。如果十六进制值小于一半，意味着它位于光谱的较暗侧，则返回白色作为文本颜色。如果结果大于一半，则它位于光谱较轻的一侧，并返回黑色作为文本值。
在PHP中：

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

在JavaScript中：

function getContrast50(hexcolor){ return (parseInt(hexcolor, 16) > 0xffffff/2) ? 'black':'white'; }

它没有那么简单！该函数将六字符十六进制颜色转换为整数，并将其与纯白色的整数值的一半进行比较。该功能易于记忆，但在理解我们如何感知频谱的某些部分时却很幼稚。不同的波长对对比度有更大或更小的影响。
第二个等式称为' YIQ '，因为它将RGB颜色空间转换为YIQ，这考虑了其组成部分的不同影响。同样，等式返回白色或黑色，并且它也很容易实现。
在PHP中：

function getContrastYIQ($hexcolor){ $r = hexdec(substr($hexcolor,0,2)); $g = hexdec(substr($hexcolor,2,2)); $b = hexdec(substr($hexcolor,4,2)); $yiq = (($r*299)+($g*587)+($b*114))/1000; return ($yiq >= 128) ? 'black' : 'white'; }

在JavaScript中：

function getContrastYIQ(hexcolor){ var r = parseInt(hexcolor.substr(0,2),16); var g = parseInt(hexcolor.substr(2,2),16); var b = parseInt(hexcolor.substr(4,2),16); var yiq = ((r*299)+(g*587)+(b*114))/1000; return (yiq >= 128) ? 'black' : 'white'; }

您首先会注意到我们已将十六进制值分解为单独的RGB值。这很重要，因为这些通道中的每一个都根据其视觉影响进行缩放。一旦所有内容都被缩放和标准化，它将在0到255之间的范围内。就像之前的“50％”函数一样，我们现在需要检查输入是在中途还是在中途。根据该值的位置，我们将返回相应的最高对比色。
就是这样：两个简单的对比度方程式，可以很好地确定最佳可读性。
如果您有兴趣了解更多，W3C有一些关于颜色对比的文档，以及如何确定任何两种颜色之间是否有足够的对比度。这对于可访问性非常重要，以确保文本和链接颜色与背景之间有足够的对比度。
Kevin Hale在Particletree上也有一篇很棒的文章，讲述了他选择光明或黑暗主题的经历。为了完善它，Jonathan Snook创建了一个颜色对比度选择器，允许您使用RGB滑块来获取YIQ，对比度和其他值。这样你就可以快速摆弄旋钮，找到合适的平衡点。
比较结果让我们重温一下我们的颜色方案，看看基于这两个方程推荐哪种文本颜色可以获得最大对比度。

文章图片

如果我们使用简单的'50％'对比度函数，我们可以看到它建议黑色除了第二行上的深绿色和紫色之外的所有颜色。一般来说，等式感觉颜色很浅，黑色是文本的更好选择。

文章图片

更复杂的' YIQ '功能，加权颜色，建议略有不同。对于非常暗的颜色，仍然建议使用白色文字，但有一些惊喜。红色和粉红色值显示白色文本而不是黑色。该等式考虑了红色值的权重，并确定色调足够暗以使白色文本显示最大对比度。
如您所见，两种对比度算法在大多数情况下都是一致的。在某些情况下，它们会发生冲突，但总的来说，您可以使用您喜欢的等式。我不认为这是一个主要问题，如果一些边缘情况颜色与另一种颜色形成对比，它们仍然非常易读。
现在让我们看一些常见的颜色，然后看看这两个函数如何比较。您可以很快发现它们在整个范围内都做得非常好。

文章图片

在前几种灰色阴影中，白色和黑色的对比是有意义的，但是当我们测试光谱中的其他颜色时，我们确实会出现意想不到的偏差。纯红色#FF0000有一个触发器。这是由于' YIQ '功能如何对RGB部分进行加权。虽然你可能个人喜欢一种风格而不是另一种风格，但两者都是合理的。

文章图片

在第二轮的颜色中，我们更深入地了解光谱，走出人迹罕至的轨道。同样，大多数情况下，对比算法是同步的，但每隔一段时间他们就不同意了。您可以选择自己喜欢的内容，但两者都不可读。
结论颜色对比很重要，特别是如果你放弃所有控制并采取不干涉的设计方法。通过使颜色之间的对比度尽可能高来选择智能默认值非常重要。这使您的客户更容易阅读，增加可访问性，通常只是更容易看到。
当然，还有很多其他的方程来确定对比度; 最重要的是你选择一个并将其实施到你的系统中。
【JavaScript检查颜色冲突】所以，继续在你的设计中试验颜色。您现在知道保证您的文本在任何情况下都是最易读的是多么容易。