javascript - 检查两个 HSL 颜色值是否对比度差的算法？

Question

在 javascript/jquery 中，如果我有两种 HSL（或十六进制或 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）>>> 返回值：（数组）[179,510]