접근성 및 미학을 위해 배경 밝기에 텍스트 모양 조정

오늘날의 디지털 환경에서는 접근성과 시각적 매력을 보장하는 것이 가장 중요합니다. 여기서 중요한 요소는 특히 저시력 사용자의 경우 텍스트와 배경 간의 대비입니다. 이 문제를 해결하기 위해 디자이너는 배경의 밝기에 따라 텍스트 모양을 조정하는 기술을 사용하는 경우가 많습니다.

한 가지 접근 방식은 텍스트 색상을 동적으로 변경하거나 미리 정의된 이미지/아이콘을 바꾸는 플러그인이나 스크립트를 사용하는 것입니다. 이러한 도구는 일반적으로 상위 요소의 배경에서 가려진 픽셀의 평균 밝기를 계산하고 이에 따라 텍스트를 조정합니다. 예를 들어 배경이 어두우면 텍스트가 흰색으로 바뀌거나 아이콘이 더 밝은 버전으로 전환됩니다.

또한 이러한 스크립트는 상위 요소에 정의된 배경이 없을 수 있는 경우를 고려하여 재귀적으로 검색합니다. 정의된 배경을 가진 가장 가까운 부모를 위해.

사용 가능한 리소스

W3C(World Wide Web Consortium) 및 기타 업계 전문가는 색상 대비에 대한 귀중한 리소스와 권장 사항을 제공합니다. 접근성:

• W3C - 전경색과 배경색 조합이 충분한 대비를 제공하는지 확인하세요.
• 색상 인지 밝기 계산

실용적인 구현

W3C 알고리즘은 RGB 색상 값을 기반으로 전경 및 배경 대비를 계산하는 간단한 접근 방식을 제공합니다. 색상의 밝기는 다음 공식을 사용하여 결정됩니다.

brightness = (0.299 * R   0.587 * G   0.114 * B) / 1000

여기서 R, G 및 B는 빨간색을 나타내고, 각각 녹색 및 파란색 구성 요소입니다.

구현 예

다음 JavaScript 코드는 배경 밝기에 따라 텍스트 색상을 조정하는 W3C 알고리즘의 구현을 보여줍니다. :

const rgb = [255, 0, 0];

// Randomly update colors for demonstration
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update RGB values
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // Calculate brightness using the W3C formula
  const brightness = Math.round(((parseInt(rgb[0]) * 299)  
                       (parseInt(rgb[1]) * 587)  
                       (parseInt(rgb[2]) * 114)) / 1000);

  // Set text and background colors based on brightness
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb('   rgb[0]   ','   rgb[1]   ','   rgb[2]   ')';
  $('#bg').css('color', textColour);
  $('#bg').css('background-color', backgroundColour);
}

결론

플러그인, 스크립트 및 업계 모범 사례를 활용하여 디자이너는 배경 밝기에 따라 텍스트 색상 및 아이콘 모양 조정을 자동화할 수 있습니다. 이 접근 방식은 접근성을 향상하고 시각적 매력을 향상하며 WCAG(웹 콘텐츠 접근성 지침)를 준수합니다.