두 색상이 서로 호환되는 방법을 반환하는 알고리즘

Question

<div> 안에 <p> 요소가 있습니다. 단락 텍스트에는 흰색 또는 검은 색의 두 가지 색상이 있습니다. 이 색상은 런타임에 임의로 선택됩니다. 배경 div의 색상은 1600 만 색상 사이에서 런타임에 무작위로 선택됩니다. 이 두 프로세스가 무작위이기 때문에 때로는 유사한 색상이 함께 끝나고 단락 텍스트는보기가 어렵거나 전혀 볼 수 없습니다.

두 가지 색상을 서로 비교하여 백분율 표기법으로 다른 알고리즘을 비교하는 알고리즘이 있습니까? 나는 서로 적층 할 때 하나의 모양을 알고 싶어 Color Logic Algorithm

:이 질문은 두 가지 색상이 얼마나 유사한 요구했다

. 예를 들어, 위의 게시물에서 정의 된 함수에 따라 노란색과 흰색은 비슷한 색상이 아니지만 노란색으로 흰색을 쓰면 텍스트를 쉽게 볼 수 없습니다.

Answer 1

이 웹 사이트는 도움이 될해야합니다

http://24ways.org/2010/calculating-color-contrast

가에 따르면, BG 색상에 검은 색 또는 흰색의 사용 여부를 결정하기 위해이 기능을 사용 : 물론

function getContrastYIQ(hexcolor){ 
    var r = parseInt(hexcolor.substr(0,2),16); 
    var g = parseInt(hexcolor.substr(2,2),16); 
    var b = parseInt(hexcolor.substr(4,2),16); 
    var yiq = ((r*299)+(g*587)+(b*114))/1000; 
    return (yiq >= 128) ? 'black' : 'white'; 
} 

, 색상을 사용하려면 색상을 16 진수 값으로 변환해야합니다.

Answer 2

sc-color library (공개 : 저자 :)에는 contrastWhiteBlack()이라는 유사한 내장 함수가 있습니다.

여기에 임의의 배경색에 텍스트 색상을 생성하는 JsFiddle demo이 있습니다. 당신이 대비를 결정하기 위해 노력하고있다처럼

// Parse, generate a contrast color, convert back to a color string 
var textColor = sc_color([color string to parse]).contrastWhiteBlack().html();