웹 접근성 준수, HCT 색공간으로 해결하기
WCAG 기준을 쉽게 충족할 수 있도록 도와주는 컬러 시스템
UI/UX 디자인에서 색상 대비(Color Contrast)는 사용자 경험의 핵심 요소입니다. 저시력자, 고령자뿐 아니라 다양한 환경에서 서비스를 이용하는 모든 사용자를 위해 적절한 대비는 필수적입니다.
이러한 색상 대비의 중요성을 반영하여 웹 표준 기구인 W3C는 웹 콘텐츠 접근성 지침(WCAG)을 통해 구체적인 기준을 제시하고 있습니다. WCAG는 텍스트와 배경색 간의 최소 대비율을 정하고 있는데, 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상의 대비가 필요합니다. 이는 다양한 환경과 조건에서도 텍스트가 잘 보이도록 하기 위한 최소한의 기준입니다.
하지만 실제 디자인 작업에서 이 기준을 충족하기가 생각보다 까다롭습니다. 대개 HSB, HSL, RGB 값으로 디자인을 진행하지만, 이 값들은 대비율과 직접적인 연관성이 없어 별도의 검사 도구로 확인이 필요합니다. 디자인 완료 후 대비율 부족이 발견되면 다시 수정하고 검증하는 과정을 반복해야 하는 것입니다.
이러한 문제를 해결하기 위해 구글이 새로운 접근 방식을 제안했습니다. 바로 HCT 색공간입니다. HCT는 색상(Hue), 채도(Chroma), 톤(Tone)의 조합으로, 특히 톤(Tone) 값을 통해 대비율을 쉽게 예측할 수 있도록 설계되었습니다.
1. HCT의 차별점
HCT의 핵심은 인간의 시각적 특성을 반영했다는 점입니다. 예를 들어 우리는 같은 밝기값을 가진 노란색과 파란색을 다르게 인식합니다.
같은 밝기값을 가진 노란색과 파란색. 하지만 인간은 노란색은 밝고, 파란색은 어둡다고 인지합니다.HCT는 이러한 인간의 지각 방식을 고려하여 톤 값을 설계했습니다. 덕분에 디자이너는 톤 값의 차이만으로도 실제 대비 정도를 파악할 수 있게 되었습니다.
HCT 에서는 노란색이 97로 훨씬 밝은 톤(Tone)값을 가집니다.HCT 색공간에서 배경색과 텍스트 색의 톤 차이가 40이면 WCAG 3.0 기준을, 50이면 4.5 기준을 충족합니다. 이는 디자인 작업 중에 즉각적으로 대비율을 확인하고 조정할 수 있다는 것을 의미합니다.
2. HCT 색공간의 구성
HCT는 RGB, HSB와 같은 색공간으로서 세 가지 값의 조합으로 색상을 표현합니다.
녹색을 RGB, HSB, HCT로 표현하면 다음과 같이 다른 값으로 표현됩니다.
동일 컬러에 대한 RGB, HSB, HCT 컬러값 HCT에서
H는 색상(Hue)를,
C는 채도(Chroma)를,
T는 톤(Tone)을
의미합니다.
색상(Hue)은 HSB의 Hue와 동일한 개념으로, 색상환에서의 위치를 나타냅니다. 0도부터 360도 사이의 각도 값을 가지며, 빨강은 0도, 녹색은 120도, 파랑은 240도에 위치합니다.
색상(Hue) : https://m3.material.io/styles/color/system/how-the-system-works채도(Chroma)는 색의 순도를 의미하며, 0에서 120 사이의 값을 가집니다. HSB의 채도(Saturation)와 비슷해 보이지만 중요한 차이가 있습니다. Saturation이 밝기와 밀접한 관계를 가지는 반면, Chroma는 먼셀 색체계에서 정의된 개념으로 밝기와 상대적으로 독립적입니다. Chroma를 활용하면 더 정확한 색상 제어가 가능합니다.
채도(Chroma) : https://m3.material.io/styles/color/system/how-the-system-works톤(Tone)은 HCT의 가장 핵심적인 요소입니다. 일반적인 밝기값과 달리, 인간이 실제로 지각하는 밝기 차이를 반영했습니다. 예를 들어 같은 밝기값을 가진 노란색과 파란색이라도 우리는 노란색을 더 밝게 느끼는데, 톤 값은 이러한 차이를 보정하여 표현합니다.
톤(Tone) : https://m3.material.io/styles/color/system/how-the-system-works3. HCT 실무 적용하기
톤(Tone)의 차이가 40이면 WCAG 대비율 3.0 이상 보장
톤(Tone)의 차이가 50이면 WCAG 대비율 4.5 이상 보장
실제 디자인 작업에서 HCT는 매우 실용적입니다. 예를 들어 카드 컴포넌트를 디자인한다고 가정해 보겠습니다. 카드의 배경 톤 값을 90으로 설정했다면, 제목은 톤 값 50 이하로, 본문은 40 이하로 설정하는 것만으로도 충분한 대비를 확보할 수 있습니다. 더 이상 별도의 대비 검사 도구로 확인하고 수정하는 번거로움이 없습니다.
HCT를 활용하면 디자인 과정에서 색상 대비 문제를 훨씬 직관적으로 해결할 수 있습니다. 아직은 많은 디자인 툴에서 기본 기능으로 지원하지 않지만, 온라인 변환 도구나 플러그인을 통해 적용해 볼 만한 가치가 충분합니다. 특히 디자인 시스템을 구축할 때, 컬러 시스템의 기초를 HCT로 설정해 두면 이후 모든 컴포넌트에서 접근성 기준을 자연스럽게 충족할 수 있습니다.
더 자세한 내용은 아래 W3C WCAG와 Material Design 관련 자료를 참고하시면, HCT의 이론적 배경과 구체적 활용 사례를 살펴볼 수 있습니다.
*참고글
https://m3.material.io/blog/science-of-color-design
https://m3.material.io/styles/color/system/how-the-system-works
