웹 페이지에서 배경색이 동적으로 변하는 경우, 텍스트가 어떤 배경 위에서도 항상 잘 보이도록 만들고 싶다면 배경의 평균 밝기를 계산하여 그 결과에 따라 글자 색을 검정 또는 흰색으로 전환하는 방법을 사용할 수 있습니다. 아래 예제는 jQuery를 활용해 이 기능을 구현한 코드입니다.
핵심 원리: YIQ 밝기 계산 공식
텍스트 색상을 결정하는 핵심은 RGB 값을 하나의 밝기 값으로 변환하는 것입니다. 일반적으로 널리 쓰이는 공식은 다음과 같습니다.
밝기 = (R × 299 + G × 587 + B × 114) / 1000여기서 사용된 가중치는 인간의 눈이 색상마다 다르게 반응한다는 점을 반영한 것입니다. 즉, 사람은 초록(G)에 가장 민감하고, 그다음으로 빨강(R), 파랑(B) 순으로 민감도가 낮습니다. 계산된 밝기 값이 임계값(예제에서는 125)보다 크면 배경이 밝다고 판단하여 검정 텍스트를 적용하고, 작으면 어두운 배경으로 간주하여 흰색 텍스트를 적용합니다.
JavaScript 예제 코드
아래 코드는 1초마다 무작위 RGB 배경색을 생성하고, 계산된 밝기에 따라 텍스트 색상을 자동으로 바꿔줍니다.
var rgb = [255, 0, 0];
setInterval(display, 1000);
function display() {
rgb[0] = Math.round(Math.random() * 255);
rgb[1] = Math.round(Math.random() * 255);
rgb[2] = Math.round(Math.random() * 255);
// 배경의 평균 밝기 계산 (YIQ 공식)
var d = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) +
(parseInt(rgb[2]) * 114)) / 1000);
// 전경(텍스트) 색상 결정
var f = (d > 125) ? 'black' : 'white';
// 배경 색상 지정
var b = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
$('#box').css('color', f);
$('#box').css('background-color', b);
}HTML 마크업
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="box">Demo</div>CSS 스타일
데모 상자의 크기를 지정하는 기본 CSS는 다음과 같습니다.
#box {
width: 300px;
height: 300px;
}동작 과정 요약
- setInterval(display, 1000): 1초마다 display 함수를 반복 실행합니다.
- Math.random(): 0~255 사이의 무작위 RGB 값을 생성해 배경색을 계속 바꿉니다.
- 밝기 계산: YIQ 공식으로 평균 밝기를 구하고, 125를 기준으로 밝음/어두움을 판별합니다.
- 스타일 적용: jQuery의 css() 메서드로 배경색과 텍스트 색상을 동시에 업데이트합니다.
이 방식은 다크 모드·라이트 모드 전환, 동적 차트 라벨, 이미지 위 오버레이 텍스트 등 가독성이 중요한 다양한 UI에서 유용하게 활용할 수 있습니다.