网站内容可访问性——关于背景与前景颜色的对比标准
这星期在工作上碰到一个关于颜色对比度的测试问题:即在网页上文字的前景色与该文字的背景色对比,应该达到WCAG(Web内容可访问性指南)中的要求。该文档对Web内容进行了一些规范要求,能让你的网站内容的可访问性达到最佳。
其中就有一条(G18)关于颜色对比度的规范,应该按照它的公式至少达到4.5:1的要求,这样对于人的肉眼就比较容易区分开背景色与前景色。
以下是我个人的C#实现:
/// <summary>
/// 将十六进制颜色值转换为RGB数组
/// </summary>
/// <param name="hexadecimal">颜色十六进制值 eg:#FF1A2B</param>
/// <returns>RGB数组</returns>
public byte[] convertHex(string hexadecimal)
{
byte[] resultByte = new byte[3];
int num = 0;
hexadecimal = hexadecimal.Trim('#');
//有可能传入的是个argb值
if (hexadecimal.Length>6)
{
hexadecimal = hexadecimal.Remove(0, 2);
}
for (int i = 0; i < 6 ; i++)
{
if (i%2==0)
{
StringBuilder sb = new StringBuilder();
sb.Append(hexadecimal[i]);
sb.Append(hexadecimal[i + 1]);
resultByte[num++] = Convert.ToByte(sb.ToString(), 16);
}
}
return resultByte;
}
/// <summary>
/// 比较两颜色对比度
/// </summary>
/// <param name="rgb1"></param>
/// <param name="rgb2"></param>
/// <returns>对比值</returns>
public double colorCompare(byte[] rgb1, byte[] rgb2)
{
double L1 = relativeLuminance(rgb1);
double L2 = relativeLuminance(rgb2);
double result = (Math.Max(L1, L2) + 0.05) / (Math.Min(L1, L2) + 0.05);
return Math.Round(result, 2);
}
private double relativeLuminance(byte[] RGB)
{
double Rs = RGB[0] * 1.0 / 255;
double Gs = RGB[1] * 1.0 / 255;
double Bs = RGB[2] * 1.0 / 255;
double R, G, B;
R = Rs <= 0.03928 ? Rs / 12.92 : Math.Pow((Rs + 0.055) / 1.055, 2.4);
G = Gs <= 0.03928 ? Gs / 12.92 : Math.Pow((Gs + 0.055) / 1.055, 2.4);
B = Bs <= 0.03928 ? Bs / 12.92 : Math.Pow((Bs + 0.055) / 1.055, 2.4);
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
}