Алгоритм проверки, если два значения цвета HSL будут иметь плохой контраст?
В javascript/jquery, если у меня есть два цвета в формате HSL (или hex или rgb), есть ли алгоритм, который может проверить, плох ли контраст? Один цвет - это текст, а другой - фон текста. Мне нужно следовать стандартным правилам доступности и убедиться, что текст хорошо читается. Поэтому я думаю, что мне нужно проверить, достаточно ли контраст между двумя значениями.
Спасибо
1 ответ
В этом примере возвращается массив с относительной яркостью и цветовым контрастом двух цветов (передаваемый в виде строк rgb или массивов из трех элементов).
Формула от: http://www.w3.org/TR/AERT.
Решение о том, какие значения достаточно контрастны, субъективно, статья 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]