두 HSL 색상 값의 대비가 나쁜지 확인하기위한 알고리즘?

Question

javascript/jquery에서 HSL (또는 16 진수 또는 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]