자바스크립트: 배경색에 ‘어두움 정도’ 따라 텍스트의 색상 결정하기

출처: 바로가기

예를 들어, 어두운 배경색에서는 밝은 글자색을 보여주고 싶고, 밝은 배경색은 어두운 글자색을 보여주고 싶다고 하겠습니다. 그런 조건에서 봤을 때 아래 예제는 글씨색이 눈에 잘 들어오지 않습니다.

어두운 배경색에는 아래처럼 밝은 글자색을 보여줘야 합니다.

색상에 16진수(예: #ffffff) 형태로 주어졌을 때 영상의 밝기차에 대한 정보(luma)를 결정하는 함수는 다음과 같습니다.

function getTextColorByBackgroundColor(hexColor) {

    const c = hexColor.substring(1)      // 색상 앞의 # 제거
    const rgb = parseInt(c, 16)   // rrggbb를 10진수로 변환
    const r = (rgb >> 16) & 0xff  // red 추출
    const g = (rgb >>  8) & 0xff  // green 추출
    const b = (rgb >>  0) & 0xff  // blue 추출

    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709

    // 색상 선택
    return luma < 127.5 ? "white" : "black" // 글자색이
}

#000000(검정)색일 때 luma는 0, #FFFFFF(흰색)일 때 luma는 254.99 이므로 0에 가까울 수록 배경색은 어둡고 255에 가까울수록 배경색은 밝은 색입니다. 상황에 따라 결정하면 될 것 같습니다.