배경 밝기에 따라 텍스트 색상 조정

가독성을 높이려면 배경과 대비되도록 텍스트 색상을 조정해야 하는 경우가 많습니다. 이 경우 원하는 효과는 배경 픽셀의 밝기 수준에 따라 텍스트 색상이나 이미지를 동적으로 전환하는 것입니다.

대비 조정 방법

• 광도 계산: 색상 채널(RGB)의 가중 평균을 계산하여 밝기를 결정합니다. 수준.
• 명암비: 텍스트와 배경의 밝기를 비교하여 시각적 접근성을 위한 충분한 대비를 보장합니다.

사용 가능한 리소스

• W3C 대비 검사기: 월드 와이드 웹 컨소시엄 (W3C)는 색상의 밝기를 계산하고 적절한 대비를 보장하기 위한 표준화된 알고리즘을 제공합니다.
• 색상 밝기 계산: 특정 색상의 밝기를 정량화하는 기능을 제공하는 온라인 리소스를 탐색하세요.

W3C 대비 알고리즘

const rgb = [255, 0, 0];

function setContrast() {
  // Calculate brightness
  const brightness = Math.round(((parseInt(rgb[0]) * 299)  
                      (parseInt(rgb[1]) * 587)  
                      (parseInt(rgb[2]) * 114)) / 1000);
  // Set text color
  const textColour = (brightness > 125) ? 'black' : 'white';
  // Set background color
  const backgroundColour = 'rgb('   rgb[0]   ','   rgb[1]   ','   rgb[2]   ')';

  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

이 알고리즘은 배경 밝기에 따라 시각적으로 최적의 텍스트 색상 선택을 보장합니다.