注：本文非原创，是国外高手BrianSuda文章的翻译。BrianSuda是一位信息大师，他每天都致力于让网络变得更美好。自从90年代中期发现互联网以来，布赖恩·苏达(BrianSuda)花了很多时间与之打交道。他自己的一小块互联网是http://suda.co.uk，在那里可以找到他过去的许多项目和疯狂的想法。原标题是：CalculatingColorContrast，不过我觉得业余版比较容易理解，也方便搜索引擎收录。废话少说，进入正题。问题背景某些网站和服务允许您通过上传图片、更改背景颜色或其他方面的设计来自定义您的个人资料。作为客户，这种个性化将Web应用程序变成了您存储数据的小巢。作为一名设计师，让您的客户自由支配布局和设计是一个可怕的前景。那么所有设计用于漂亮的白色背景的库存文本和图像会发生什么变化？即使是Mac也只允许您选择操作系统，蓝色或石墨！开放自定义网站配色方案的能力可能会导致灾难，除非您很灵活并且了解如何找到最大的颜色对比度。在本文中，我将向您介绍两个简单的公式，用于根据背景颜色确定您应该使用白色还是黑色文本。这些方程很容易实现并产生相似的结果。这不是更好的问题，而是您使用更好的事实！这样，即使您的客户选择了最疯狂的Geocities配色方案，至少您的文本仍然是可读的。让我们来看看各种可能的颜色。也许这些是预制的配色方案、公司颜色或从图像中提取的。现在我们有了这些潜在的背景颜色和它们的十六进制值，我们需要找出相应的文本是白色还是黑色，以此为基础具有更高的对比度，从而提供最佳的可读性。这可以在运行时使用JavaScript完成，或者在提供HTML之前在后端完成。我想比较两个功能。首先，我称之为“50%”。它采用十六进制值并将其与纯黑色和纯白色之间的值进行比较。如果十六进制值小于一半，则返回白色作为文本颜色，这意味着它位于光谱的较暗一侧。如果结果大于一半，则它位于光谱的较亮一侧，并且返回黑色作为文本值。在PHP中：functiongetContrast50($hexcolor){return(hexdec($hexcolor)>0xffffff/2)?'black':'white';}在JavaScript中：functiongetContrast50(hexcolor){return(parseInt(hexcolor,16)>0xffffff/2)?'black':'white';}没那么简单！该函数将一个六字符的十六进制颜色转换为一个整数，并将其与纯白色整数值的一半进行比较。该函数很容易记住，但在理解我们如何感知光谱的某些部分时却很幼稚。不同的波长对对比度有或大或小的影响。第二个方程称为“YIQ”，因为它将RGB颜色空间转换为YIQ，这考虑了其分量的不同影响。同样，方程式返回白色或黑色，而且它也很容易实现。在PHP中：函数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;返回（$yiq>=128）？'黑，白';}在JavaScript中：functiongetContrastYIQ(hexcolor){varr=parseInt(hexcolor.substr(0,2),16);varg=parseInt(hexcolor.substr(2,2),16);varb=parseInt(hexcolor.substr(4,2),16);varyiq=((r*299)+(g*587)+(b*114))/1000;返回（yiq>=128）？'black':'white';}你会首先注意到我们已经将十六进制值分解为单独的RGB值。这很重要，因为这些通道中的每一个都根据其视觉效果进行缩放。一旦一切都被缩放和归一化，它将在0到255的范围内。就像之前的“50%”函数一样，我们现在需要检查输入是否中途。根据该值的位置，我们将返回相应的最高对比度颜色。就是这样：两个简单的对比度方程可以很好地确定最佳可读性。如果您有兴趣了解更多信息，W3C有一些关于颜色对比度的文档，以及如何确定任意两种颜色之间是否有足够的对比度。这对于可访问性非常重要，以确保文本和链接颜色与背景之间有足够的对比度。KevinHale在Particletree上也有一篇很棒的文章，讲述了他选择浅色或深色主题的经历。最后，JonathanSnook创建了一个颜色对比度选择器，它允许您使用RGB滑块来获取YIQ、对比度和其他值。通过这种方式，您可以快速摆弄旋钮以找到合适的平衡点。比较结果让我们重新审视我们的配色方案，看看根据这两个等式推荐使用哪种文本颜色以获得最大对比度。如果我们使用简单的“50%”对比度函数，我们可以看到它建议所有颜色都为黑色，但第二行的深绿色和紫色除外。一般来说，方程式的颜色感觉很浅，黑色是文本的更好选择。更复杂的“YIQ”功能，加权颜色，暗示略有不同。对于非常暗的颜色，仍然建议使用白色文本，但也有一些惊喜。红色和粉色值显示白色文本而不是黑色。该等式考虑了红色值的权重，并确定色调足够暗以让白色文本显示最大对比度。如您所见，这两种对比度算法在大多数情况下是一致的。在某些情况下它们会发生冲突，但通常您可以使用任何您喜欢的方程式。我不认为这是一个主要问题，一些边缘案例的颜色如果与其他颜色形成对比，仍然非常可读。现在让我们看看一些常见的颜色，看看这两个函数如何比较。您可以很快看到他们在整个范围内做得非常好。白色和黑色之间的对比在前几个灰色阴影中是有意义的，但当我们测试光谱中的其他颜色时，我们确实得到了意想不到的偏差。纯红色#FF0000有一个触发器。这是由于“YIQ”函数如何对RGB部分进行加权。虽然您个人可能更喜欢一种风格，但两者都是合理的。在这第二轮颜色中，我们更深入地研究光谱并走出人迹罕至的轨道。此外，大多数时候对比算法是同步的，但偶尔他们会不一致。您可以挑选自己喜欢的内容，但都不可读。结论颜色对比很重要，尤其是当您放弃所有控制并采取不干涉的设计方法时。通过使颜色之间的对比度尽可能高来选择智能默认值很重要。这使您的客户更容易阅读，增加可访问性，并且通常只会使其更容易看到。当然，还有许多其他公式可以确定对比度；最重要的是您选择一个并将其实施到您的系统中。所以，继续在你的设计中尝试颜色。您现在知道确保您的文本在任何情况下都具有最佳可读性是多么容易了。
