JavaScript检查颜色冲突

注意：本文非原创，而是翻译国外大师文章，布赖恩苏达。布赖恩苏达是一位信息大师，天天都在努力使网络变得更加美好。自从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部分进行加权。虽然你可能我的喜欢一种风格而不是另外一种风格，但二者都是合理的。

在第二轮的颜色中，咱们更深刻地了解光谱，走出人迹罕至的轨道。一样，大多数状况下，对比算法是同步的，但每隔一段时间他们就不一样意了。您能够选择本身喜欢的内容，但二者都不可读。

结论

颜色对比很重要，特别是若是你放弃全部控制并采起不干涉的设计方法。经过使颜色之间的对比度尽量高来选择智能默认值很是重要。这使您的客户更容易阅读，增长可访问性，一般只是更容易看到。

固然，还有不少其余的方程来肯定对比度; 最重要的是你选择一个并将其实施到你的系统中。

因此，继续在你的设计中试验颜色。您如今知道保证您的文本在任何状况下都是最易读的是多么容易。

原文连接： https://24ways.org/2010/calcu...