Question

在javascript / jquery中，如果我有HSL（或hex或rgb）格式的两种颜色，是否有算法可以检查对比度是否差？一种颜色是文本，另一种颜色是文本的背景。我需要遵循标准的可访问性指南，并确保文本具有良好的可读性。所以我想我需要检查这两个值之间的对比度是否足够好。

由于

Answer 1

此示例返回一个数组，其中包含两种颜色的相对亮度和颜色对比度（以rgb字符串或3成员数组的形式传入）。

公式来自：http://www.w3.org/TR/AERT#color-contrast。

确定哪些值足够对比是主观的，W3文章建议将[125,500]作为最小值。

function contrast(F, B){
    F= String(F).match(/\d+/g), 
    B= String(B).match(/\d+/g);
    var abs= Math.abs, 
    BG= (B[0]*299 + B[1]*587 + B[2]*114)/1000, 
    FG= (F[0]*299 + F[1]*587 + F[2]*114)/1000, 
    bright= Math.round(Math.abs(BG - FG)), 
    diff= abs(B[0]-F[0])+abs(B[1]-F[1])+abs(B[2]-F[2]);
    return [bright, diff];
}


var f= 'rgb(255,255,255)', b= 'rgb(255,0,0)';

<强>对比度（F，B）＆GT;＆GT;＆GT;返回值:(数组）[179,510]

检查两个HSL颜色值是否会产生不良对比度的算法？

1 个答案: