Алгоритм проверки, если два значения цвета 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]

Другие вопросы по тегам