如果您希望人们发现您的网站有用，那么他们需要能够阅读它。您为文本选择的颜色会影响网站的可读性。不幸的是，网页设计中的一个流行趋势是在打印输出文本中使用低对比度颜色，例如白色背景上的灰色文本。这对于网页设计师来说可能看起来很酷，但对于许多阅读它的人来说真的很难。W3C提供《Web 内容可访问性指南Web Content Accessibility Guidelines》，其中包括帮助网页设计人员选择易于区分的文本和背景颜色的指南。z这就是所谓的“对比度”。W3C定义的对比度需要一些计算：给定两种颜色，首先计算每种颜色的相对亮度，然后计算对比度。对比度范围从1到21（通常写为1:1到21:1）。对比度越高，文本越从背景中脱颖而出。例如，白色背景上的黑色文本以21:1的对比度突出。对比度为1:1的白色背景上的白色文本不可读。W3C规定文本的对比度至少应为4.5:1，标题的对比度至少应为3:1。但这似乎是最低限度的。W3C还建议文本至少为7:1，标题至少为4.5:1。计算对比度可能很麻烦，因此最好将其自动化。我已经用这个方便的Bash脚本做到了这一点。通常，该脚本执行以下操作：获取文本颜色和背景颜色计算相对亮度计算对比度获取颜色您可能知道监视器上的每种颜色都可以用红色、绿色和蓝色（R、G和B）表示。要计算颜色的相对亮度，脚本需要知道颜色的红色、绿色和蓝色分量。理想情况下，脚本会将此信息读取为单独的R、G和B值。网页设计者可能知道自己喜欢的颜色的具体RGB代码，但大多数不知道不同颜色的RGB值。作为替代方案，大多数人用“红色”、“金色”或“栗色”等名称来指代颜色。幸运的是，GNOME的Zenity工具有一个颜色选择器应用程序，可以让您使用不同的方法选择颜色，并以可预测的格式rgb(R,G,B)返回RGB值。使用Zenity可以轻松获得颜色值：color=$(zenity--title'Settextcolor'--color-selection--color='black')如果用户（不小心）点击了“取消”按钮，脚本将Assumeacolor:if[$?-ne0];thenecho'**colorcanceled..assumeblack'color='rgb(0,0,0)'fi脚本对背景颜色值做类似的事情，将其设置为$背景。计算相对亮度一旦您在$color中设置了前景色，在$background中设置了背景色，下一步就是计算每种颜色的相对亮度。W3C提供了一种计算颜色相对亮度的算法。对于sRGB色彩空间，一种颜色的相对亮度定义为：L=0.2126*R+0.7152*G+0.0722*BR、G、B定义为：ifRsRGB<=0.03928thenR=RsRGB/12.92elseR=((RsRGB+0.055)/1.055)2.4ifGsRGB<=0.03928thenG=GsRGB/12.92elseG=((GsRGB+0.055)/1.055)2.4ifBsRGB<=0.03928thenB=BsRGB/12.92elseB=((BsRGB+0.055)/1.055)2.4RsRGB、GsRGB和BsRGB定义为：RsRGB=R8bit/255GsRGB=G8bit/255BsRGB=B8bit/255由于Zenity以rgb(R,G,B)格式化颜色值，因此脚本可以轻松拉出分离的R、B和G值来计算相对亮度。AWK可以使用逗号作为字段分隔符（-F,），并使用substr()字符串函数从rgb(R,G,B)中提取需要的颜色值：R=$(echo$color|awk-F,'{printsubstr($1,5)}')G=$(echo$color|awk-F,'{print$2}')B=$(echo$color|awk-F,'{n=length($3);printsubstr($3,1,n-1)}')有关使用AWK提取和显示数据的更多信息，请参阅AWK备忘单最好使用BC计算器来计算最终的相对亮度。BC支持计算中所需的简单if-then-else，这使得这很容易。但由于BC不能使用非整数指数直接计算幂，它需要使用自然对数来代替做一些额外的数学运算：echo"scale=4rsrgb=$R/255gsrgb=$G/255bsrgb=$B/255if(rsrgb<=0.03928)r=rsrgb/12.92elser=e(2.4*l((rsrgb+0.055)/1.055))if(gsrgb<=0.03928)g=gsrgb/12.92elseg=e(2.4*l((gsrgb+0.055)/1.055))if(bsrgb<=0.03928)b=bsrgb/12.92elseb=e(2.4*l((bsrgb+0.055)/1.055))0.2126*r+0.7152*g+0.0722*b"|bc-l这个将一些指令传递给BC，包括作为相对亮度公式一部分的if-then-else语句。NextBC打印出最终值。计算对比度使用文本颜色和背景颜色的相对亮度，脚本可以计算对比度。W3C使用以下公式确定对比度：(L1+0.05)/(L2+0.05)，其中L1是较浅颜色的相对亮度，L2是较暗颜色的相对亮度。给定两个相对亮度值$r1和$r2，使用BC计算器很容易计算出对比度：echo"scale=2if($r1>$r2){l1=$r1;l2=$r2}else{l1=$r2;l2=$r1}(l1+0.05)/(l2+0.05)"|bc使用if-then-else语句来确定哪个值（$r1或$r2）是较浅或较深的颜色。BC执行结果计算并打印结果，脚本可以将结果存储在变量中。最终脚本有了上面的内容，我们就可以将所有内容组合成一个最终脚本。我使用Zenity在文档中显示最终结果：#!/bin/sh#scripttocalculatecontrastratiofcolors#readcolorandbackgroundcolor:#zenityreturnsvalueslike'rgb(255,140,??0)'and'rgb(255,255,255)'color=$(zenity--title'Settextcolor'--color-selection--color='black')if[$?-ne0];thenecho'**colorcanceled..assumeblack'color='rgb(0,0,0)'fibackground=$(zenity--title'Setbackgroundcolor'--color-selection--color='white')if[$?-ne0];thenecho'**backgroundcanceled..assumewhite'background='rgb(255,255,255)'fi#computerelativeluminance:functionluminance(){R=$(echo$1|awk-F,'{printsubstr($1,5)}')G=$(echo$1|awk-F,'{print$2}')B=$(echo$1|awk-F,'{n=length($3);printsubstr($3,1,n-1)}')echo"scale=4rsrgb=$R/255gsrgb=$G/255bsrgb=$B/255if(rsrgb<=0.03928)r=rsrgb/12.92elser=e(2.4*l((rsrgb+0.055)/1.055))if(gsrgb<=0.03928)g=gsrgb/12.92elseg=e(2.4*l((gsrgb+0.055)/1.055))if(bsrgb<=0.03928)b=bsrgb/12.92elseb=e(2.4*l((bsrgb+0.055)/1.055))0.2126*r+0.7152*g+0.0722*b"|bc-l}lum1=$(亮度$颜色）lum2=$(luminance$background)#computecontrastfunctioncontrast(){echo"scale=2if($1>$2){l1=$1;l2=$2}else{l1=$2;l2=$1}(l1+0.05)/(l2+0.05)“|bc}rel=$(contrast$lum1$lum2)#printresults(cat<
