注重：本文非原创，而是翻译外洋巨匠文章，布赖恩苏达。布赖恩苏达是一名信息巨匠，天天都在努力使收集变得越发优美。自从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部份举行加权。虽然你能够个人喜好一种作风而不是另一种作风，但二者都是合理的。
在第二轮的颜色中，我们更深切地相识光谱，走出人迹罕至的轨道。一样，大多数状况下，对照算法是同步的，但每隔一段时候他们就差别意了。您能够挑选本身喜好的内容，但二者都不可读。
结论
颜色对照很重要，特别是假如你摒弃一切掌握并采用不干涉的设想要领。经由过程使颜色之间的对照度尽量高来挑选智能默认值异常重要。这使您的客户更轻易浏览，增添可接见性，一般只是更轻易看到。
固然，另有很多其他的方程来肯定对照度; 最重要的是你挑选一个并将其实行到你的体系中。
所以，继承在你的设想中实验颜色。您如今晓得保证您的文本在任何状况下都是最易读的是何等轻易。
