Gitsunmin

TIL

TIL
(=Today I Learned)

Optimal Text Contrast Calculation

배경색에 따라 텍스트 가독성을 최적화하는 방법에 대해 배웠습니다. 특히 getBlackAndWhite 함수를 통해 배경색의 밝기를 분석하고 적절한 텍스트 색상(검정 또는 흰색)을 자동으로 선택하는 방법을 알게 되었습니다.

getBlackAndWhite

function getBlackAndWhite(bgColor: string): string {
  if (!bgColor || typeof bgColor !== 'string') {
    return '#000000';
  }

  const hex = bgColor.startsWith('#') ? bgColor.slice(1) : bgColor;

  const r = Number.parseInt(hex.substring(0, 2), 16);
  const g = Number.parseInt(hex.substring(2, 4), 16);
  const b = Number.parseInt(hex.substring(4, 6), 16);

  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
    return '#000000';
  }

  const yiq = (r * 299 + g * 587 + b * 114) / 1000;

  return yiq >= 128 ? '#000000' : '#FFFFFF';
}

이 함수는 다음과 같은 과정으로 작동합니다:

  1. 입력된 HEX 색상 코드를 유효성 검사
  2. HEX 색상 코드를 RGB 값으로 변환
  3. YIQ 공식을 사용하여 색상의 휘도(밝기) 계산
  4. 휘도 값에 따라 검정색 또는 흰색 반환

YIQ 색상 공간

YIQ는 NTSC 컬러 TV 시스템에서 사용되는 색상 인코딩 방식입니다:

  • Y: 휘도(밝기) 성분
  • I: 색상 정보의 첫 번째 성분 (주로 주황-파랑 축)
  • Q: 색상 정보의 두 번째 성분 (주로 자주-녹색 축)

웹 개발에서는 주로 Y 성분만 사용하여 색상의 밝기를 결정합니다.

가중치의 과학적 의미 (299, 587, 114)

const yiq = (r * 299 + g * 587 + b * 114) / 1000;

이 숫자들은 단순한 임의의 값이 아닌 인간 시각의 과학적 연구를 기반으로 합니다:

  • 녹색(G)에 대한 높은 가중치 (587): 인간의 눈은 녹색 파장에 가장 민감합니다. 특히 명암 인식에 있어서 녹색이 가장 중요한 역할을 합니다.

  • 빨간색(R)에 대한 중간 가중치 (299): 녹색 다음으로 빨간색이 밝기 인식에 영향을 줍니다.

  • 파란색(B)에 대한 낮은 가중치 (114): 인간의 눈은 파란색 파장에 상대적으로 덜 민감합니다.

이 가중치의 합은 1000이므로 계산 결과를 1000으로 나누어 정규화합니다. 결과값이 128 이상이면 배경색이 밝다고 판단하여 검정색 텍스트를, 128 미만이면 배경색이 어둡다고 판단하여 흰색 텍스트를 사용합니다.

NTSC TV 시스템의 역사적 맥락

NTSC(National Television System Committee)는 1953년 미국에서 공식 채택된 최초의 컬러 TV 방송 표준입니다. 이 표준은 중요한 문제를 해결해야 했습니다: 기존 흑백 TV와의 호환성.

이 문제를 해결하기 위해 RGB 색상 정보를 YIQ 색상 공간으로 변환했습니다:

  • Y 신호: 흑백 TV에서 볼 수 있는 밝기 정보
  • I와 Q 신호: 컬러 TV에서만 사용되는 색상 정보

Y = 0.299R + 0.587G + 0.114B 공식은 이 표준에서 정의한 정확한 휘도 계산 공식입니다. 디지털 시대에도 이 공식은 여전히 색상 대비와 가독성 계산에 널리 사용됩니다.

실용적 적용

이 지식은 다음과 같은 상황에서 매우 유용합니다:

  1. 다이나믹 테마: 사용자가 배경색을 선택할 수 있는 UI에서 자동으로 가독성 높은 텍스트 색상 제공
  2. 접근성 향상: WCAG(웹 콘텐츠 접근성 지침)에 따른 적절한 색상 대비 보장
  3. 다크/라이트 모드: 자동으로 배경에 맞는 텍스트 색상 조정

결론

getBlackAndWhite 함수와 YIQ 색상 공간에 대한 이해는 단순한 프로그래밍 기술을 넘어 인간의 시각적 인식, 색상 이론, 그리고 TV 방송의 역사까지 연결된 흥미로운 지식입니다. 이러한 알고리즘을 사용함으로써 더 사용자 친화적이고 접근성 높은 웹 인터페이스를 개발할 수 있습니다.

추가 자료