如果您希望人们发现您的网站有用，那么他们需要能够阅读它。 您为文本选择的颜色可能会影响网站的可读性。 不幸的是，网页设计的一种流行趋势是在打印文本（例如，白色背景上的灰色文本）时使用低对比度的颜色。 对于Web设计人员来说，这看起来也许很酷，但是对于我们许多人来说，这确实很难阅读。
W3C提供了“ Web内容可访问性指南”，其中包括帮助Web设计人员选择易于区分的文本和背景色的指南。 这称为“对比度”。 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值。 Web设计人员可能知道他们喜欢的颜色的特定RGB代码，但是大多数人不知道不同颜色的RGB值。 相反，大多数人通过“红色”或“金色”或“栗色”之类的名称来引用颜色。
幸运的是，GNOME Zenity工具具有一个颜色选择器应用程序，可让您使用不同的方法选择颜色，然后以可预测的格式“ rgb（ R ， G ， B ）”返回RGB值。 使用Zenity可以轻松获得颜色值：
color =$ ( zenity --title 'Set text color' --color-selection --color = 'black' )
如果用户（偶然）单击“取消”按钮，脚本将采用一种颜色：
if
[
$?
-ne
0
] ;
then
echo
'** color canceled .. assume black'
color =
'rgb(0,0,0)'
fi
我的脚本执行了类似的操作，将背景色值设置为$ background 。
计算相对亮度
一旦在$ color中使用了前景色，在$ background中使用了背景色，则下一步是计算每个颜色的相对亮度。 W3C在其网站上提供了一种算法来计算颜色的相对亮度。
对于sRGB色彩空间，颜色的相对亮度定义为
L = 0.2126 * R + 0.7152 * G + 0.0722 * B其中R，G和B定义为：如果R sRGB <= 0.03928，则R = R sRGB /12.92
否则R =（（R sRGB +0.055）/1.055）^ 2.4如果G sRGB <= 0.03928，则G = G sRGB /12.92
否则G =（（G sRGB +0.055）/1.055）^ 2.4如果B sRGB <= 0.03928，则B = B sRGB /12.92
否则B =（（B sRGB +0.055）/1.055）^ 2.4R sRGB ，G sRGB和B sRGB定义为：
R sRGB = R 8位 / 255
G sRGB = G 8位 / 255
B sRGB = B 8位 / 255
由于Zenity以“ rgb（ R ， G ， B ）”格式返回颜色值，因此脚本可以轻松地将R，B和G值分开以计算相对亮度。 AWK使用逗号作为字段分隔符（ -F， ）并使用AWK的substr（）字符串函数从“ rgb（ R ， G ， B ）”颜色值中仅选择我们想要的文本，从而使这项工作变得简单。
R =$
(
echo
$color
|
awk -F,
'{print substr($1,5)}'
)
G =$
(
echo
$color
|
awk -F,
'{print $2}'
)
B =$
(
echo
$color
|
awk -F,
'{n=length($3); print substr($3,1,n-1)}'
)
（有关使用AWK提取和显示数据的更多信息，请获取我们的AWK备忘单 。）
最好使用BC计算器来计算最终的相对亮度。 BC支持计算中所需的简单if-then-else ，这使得这一部分变得简单。 但是由于BC无法使用非整数指数直接计算指数，因此我们需要使用自然对数做一些额外的数学运算：
echo
"scale=4
rsrgb= $R /255
gsrgb= $G /255
bsrgb= $B /255
if ( rsrgb <= 0.03928 ) r = rsrgb/12.92 else r = e( 2.4 * l((rsrgb+0.055)/1.055) )
if ( gsrgb <= 0.03928 ) g = gsrgb/12.92 else g = e( 2.4 * l((gsrgb+0.055)/1.055) )
if ( bsrgb <= 0.03928 ) b = bsrgb/12.92 else b = e( 2.4 * l((bsrgb+0.055)/1.055) )
0.2126 * r + 0.7152 * g + 0.0722 * b"
|
bc
-l
这会将一些指令传递给BC，包括作为相对亮度公式一部分的if-then-else语句。 BC然后打印最终值。
计算对比度
利用文本颜色和背景颜色的相对亮度，现在脚本可以计算对比度。 W3C使用以下公式确定对比度 ：
（L1 + 0.05）/（L2 + 0.05），其中
L1是颜色较浅的相对亮度，并且
L2是颜色较深的相对亮度
给定两个相对亮度值$ r1和$ r2 ，使用BC计算器很容易计算出对比度：
echo
"scale=2
if ( $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
# script to calculate contrast ratio of colors
# read color and background color:
# zenity returns values like 'rgb(255,140,0)' and 'rgb(255,255,255)'
color =$
( zenity
--title
'Set text color'
--color-selection
--color =
'black'
)
if
[
$?
-ne
0
] ;
then
echo
'** color canceled .. assume black'
color =
'rgb(0,0,0)'
fi
background =$
( zenity
--title
'Set background color'
--color-selection
--color =
'white'
)
if
[
$?
-ne
0
] ;
then
echo
'** background canceled .. assume white'
background =
'rgb(255,255,255)'
fi
# compute relative luminance:
function luminance
(
)
{
R =$
(
echo
$1
|
awk -F,
'{print substr($1,5)}'
)
G =$
(
echo
$1
|
awk -F,
'{print $2}'
)
B =$
(
echo
$1
|
awk -F,
'{n=length($3); print substr($3,1,n-1)}'
)
echo
"scale=4
rsrgb= $R /255
gsrgb= $G /255
bsrgb= $B /255
if ( rsrgb <= 0.03928 ) r = rsrgb/12.92 else r = e( 2.4 * l((rsrgb+0.055)/1.055) )
if ( gsrgb <= 0.03928 ) g = gsrgb/12.92 else g = e( 2.4 * l((gsrgb+0.055)/1.055) )
if ( bsrgb <= 0.03928 ) b = bsrgb/12.92 else b = e( 2.4 * l((bsrgb+0.055)/1.055) )
0.2126 * r + 0.7152 * g + 0.0722 * b"
|
bc
-l
}
lum1 =$
( luminance
$color
)
lum2 =$
( luminance
$background
)
# compute contrast
function contrast
(
)
{
echo
"scale=2
if ( $1 > $2 ) { l1=$1; l2=$2 } else { l1=$2; l2=$1 }
(l1 + 0.05) / (l2 + 0.05)"
|
bc
}
rel =$
( contrast
$lum1
$lum2
)
# print results
(
cat
<<EOF
Color is $color on $background
Contrast ratio is $rel
Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).
EOF
if
[
${rel%.*}
-ge
4
] ;
then
echo
"Ok for body text"
else
echo
"Not good for body text"
fi
if
[
${rel%.*}
-ge
3
] ;
then
echo
"Ok for title text"
else
echo
"Not good for title text"
fi
cat
<<EOF
The W3C says this:
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
and:
1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
EOF
)
| zenity
--text-info
--title =
'Relative Luminance'
--width =
800
--height =
600
最后，我希望提供有关W3C建议的参考信息，以提醒自己。
Zenity颜色选择器完成了所有解释颜色的工作，用户可以通过单击色轮或输入值来选择颜色。 Zenity接受网站上使用的标准十六进制颜色值，例如＃000000或＃000或rgb（0,0,0）（所有这些均为黑色）。 这是白色背景上的黑色文本的示例计算：
Zenity还了解标准的颜色名称，如深蓝色，橙色或金色。 在Zenity中输入颜色名称，然后点击Tab键，Zenity会将颜色名称转换为十六进制颜色值，如以下示例中对金色背景上的黑色文本的计算：
翻译自: https://opensource.com/article/19/2/make-websites-more-readable-shell-script
扫一扫
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
