UI와 데이터 시각화의 색

색은 측정 가능한 신호 채널이다

그래프에서 색은 값(연속량)이나 범주(이산량)를 부호화한다. 이 부호화가 제대로 전달되는지는 세 가지 물리·지각량으로 판정할 수 있다. 첫째, 휘도 대비(luminance contrast) — 글자와 얇은 선이 배경에서 분리되는가. 둘째, 지각 색차(perceptual color difference) — 인접한 두 값 또는 두 범주의 색이 얼마나 다르게 보이는가(7장의 ΔE00). 셋째, 관측자 강건성(observer robustness) — 색각이 다른 관측자에게도 그 차이가 남는가.

세 기준이 모두 필요한 이유는 사람의 시각 채널이 대칭적이지 않기 때문이다. 2장에서 본 반대색 처리에서 무채색(명도) 채널은 공간 해상도가 가장 높고, 적–녹·황–청 채널은 해상도가 낮다. 따라서 가는 글자·얇은 선·작은 마커의 판독성은 거의 명도 차이로 결정되고, 색상 차이만으로 구분한 정보는 작은 크기에서 쉽게 사라진다. 또 남성의 약 8%가 적–녹 채널이 약하거나 없다. 그 사람들에게 남는 정보도 주로 명도와 청–황 방향의 차이다.

이 장의 계산은 모두 sRGB(IEC 61966-2-1) 디스플레이를 가정하고, 색차는 D65 백색 기준 CIELAB의 CIEDE2000(CIE 015:2018, ISO/CIE 11664-6)으로 잰다. 즉 화면의 8비트 코드값 \(\to\) 디코딩 \(\to\) 선형 RGB \(\to\) XYZ \(\to\) L*a*b*라는 6장·7장의 파이프라인이 그대로 쓰인다.

유병률은 북유럽계 집단의 조사 수치로, 적–녹 색각 이상 전체가 남성 약 8%, 여성 약 0.5%다. 집단마다 다르지만 "사용자 열 명 중 한 명 가까이"라는 규모는 설계 기준으로 삼기에 충분하다.

텍스트 대비: WCAG 2.x 대비비

WCAG 2.x(Web Content Accessibility Guidelines, W3C)는 텍스트 판독성을 상대 휘도(relative luminance)의 비로 정의한다. 상대 휘도는 sRGB 코드값을 디코딩한 선형 값의 가중합, 즉 BT.709/sRGB 원색의 \(Y\) 행이다.

대비비는 플레어를 더한 휘도의 비이므로 로그 휘도 축 위의 거리다. 흑(Y=0)과 백(Y=1)이 1.05/0.05 = 21:1을 만든다. 기준값은 다음과 같다.

아래 검사기는 CB.relLum, CB.contrast로 대비비를 계산하고, 같은 쌍의 APCA Lc 값(다음 절)도 함께 보여 준다. 아래쪽 두 그래프는 글자색을 고정하고 배경을 회색 0→255로 훑었을 때 두 지표가 어떻게 변하는지를 그린다.

대비비의 한계와 APCA

WCAG 2.x 공식은 단순하고 재현 가능하다는 큰 장점이 있지만, 지각과 어긋나는 세 가지 구조적 한계가 있다.

• 극성 무시(polarity): CR은 두 휘도의 비이므로 글자/배경을 바꿔도 같다. 그러나 밝은 배경의 어두운 글자와 어두운 배경의 밝은 글자는 같은 비에서도 판독성이 다르다(빛 번짐, 순응 상태 차이).
• 어두운 영역의 과대평가: 고정된 +0.05 플레어와 하나의 대칭적인 휘도비로 모든 순응 수준·극성·획 두께를 표현하기 어렵다. 따라서 대비비가 같아도 다크 모드의 가는 글자는 다르게 읽힐 수 있다. +0.05 자체는 양의 두 휘도의 원래 비를 줄이는 항이며, 그 항이 언제나 어두운 색의 대비를 부풀린다는 뜻은 아니다.
• 공간 주파수 무시: 폰트 크기와 굵기는 "대형 텍스트" 하나의 이진 구분으로만 반영된다. 실제 필요한 대비는 획 두께에 따라 연속적으로 변한다.

WCAG 3의 후보로 개발 중인 APCA(Accessible Perceptual Contrast Algorithm)는 휘도에 극성별로 다른 지수를 적용한 차이로 명도 대비 Lc(lightness contrast)를 정의한다. 아래는 공개 구현 0.0.98G-4g의 상수 그대로다.

검증 수치: 흰 배경의 검정 글자는 Lc 106.04, 검정 배경의 흰 글자는 Lc −107.88이다. #888888 글자/흰 배경은 Lc 63.1, 흰 글자/#888888 배경은 Lc −68.5로, WCAG가 둘 다 3.54:1로 같게 보는 쌍을 APCA는 구별한다.

APCA의 실제 권장값은 폰트 크기·굵기별 조회표로 주어지며 버전에 따라 바뀌어 왔다. 위 표는 개념 이해용 요약이고, 규정 준수 판단은 여전히 WCAG 2.x(현재 법령·조달 기준이 참조하는 문서)로 해야 한다.

색각 이상 시뮬레이션

2색각자는 원추세포 한 종류가 없어 색 공간이 3차원에서 2차원으로 줄어든다. LMS 공간에서 결손된 원추 축 방향으로 놓인 색들은 모두 같게 보이며, 이 직선들을 혼동선(confusion lines)이라 한다(2장). 시뮬레이션은 각 색을 혼동선을 따라 "2색각자가 보는 2차원 면" 위로 사영해, 정상 3색각자에게 같은 인상을 주는 색을 찾는 문제다.

• Brettel–Viénot–Mollon(1997): LMS 공간에서 결손 축을 따라, 2색각자도 정상으로 지각한다고 알려진 단색광(1형·2형은 475/575 nm, 3형은 485/660 nm)과 무채색 축이 이루는 두 개의 반평면 위로 사영한다. 가장 근거가 탄탄한 고전 방법이다.
• Viénot–Brettel–Mollon(1999): 1형·2형에 대해 위 두 반평면을 하나의 평면으로 근사해 3×3 행렬 하나로 만든 빠른 판(디스플레이 RGB용).
• Machado–Oliveira–Fernandes(2009): 원추 감도 곡선의 이동(이상 3색각)을 단계적 severity로 모델링한 생리학 기반 모델. severity 1.0이 2색각에 해당하며, 결과는 선형 RGB에 곱하는 3×3 행렬이다.

이 장은 Machado 2009의 severity 1.0 행렬을 쓴다.

컬러맵의 네 가지 유형과 품질 지표

컬러맵(colormap)은 스칼라 \(t\in[0,1]\)을 색으로 보내는 곡선 \(\mathbf{c}(t)\)다. 데이터의 구조에 따라 곡선이 가져야 할 모양이 다르다.

• 순차형(sequential): 크기에 순서만 있는 양(밀도, 온도, 강도). 명도가 단조 증가(또는 감소)해야 한다.
• 발산형(diverging): 의미 있는 중심값(0, 기준값)이 있는 양(오차, 상관계수, 편차). 중심에서 명도가 극값이고 양쪽 팔은 서로 다른 색상이며, 양쪽 팔의 명도 프로파일이 대칭이어야 한다.
• 순환형(cyclic): 위상, 각도, 풍향, 시각. 양 끝이 같은 색으로 이어져야 한다. 명도 대칭이 필요하고 순서 판단은 색상에 의존하게 된다.
• 범주형(qualitative): 순서 없는 이산 범주. 연속 곡선이 아니라 서로 최대한 먼 점들의 집합이다(7절).

연속 컬러맵의 품질은 두 곡선으로 진단한다. 하나는 명도 프로파일 \(L^*(t)\), 다른 하나는 \(t\)를 \(N\)등분했을 때 인접 견본 사이의 색차 \(\Delta E_{00}(t_i, t_{i+1})\)다.

jet의 ΣΔE00(234)가 viridis(120)의 두 배라는 점은 흥미롭다. "jet가 더 많은 색을 쓰니 더 많은 단계를 구별한다"는 주장은 숫자로 보면 일부 맞다. 문제는 그 길이가 고르게 분배되지 않고(CV 0.49), 명도가 데이터 순서와 무관하게 오르내린다는 데 있다. 판독자는 명도 변화를 값의 변화로, 색상 경계를 데이터의 경계로 읽는다.

같은 데이터, 다른 그림: 가짜 경계와 숨은 구조

컬러맵의 결함은 실제 2차원 데이터에서 가장 잘 드러난다. 아래 시뮬레이터는 매끄러운 합성 필드(두 개의 넓은 가우시안 언덕 + 선형 경사)에 진폭이 작은 좁은 봉우리 하나를 더한 것을 두 컬러맵으로 나란히 그린다. 데이터는 어디에도 불연속이 없다.

국소 가시성은 컬러맵의 기울기 \(\|d\mathbf{c}/dt\|\)(지각 단위)와 데이터 진폭의 곱이다. 균일 컬러맵은 이 기울기가 어디서나 같아 "어느 값 근처의 구조든 같은 크기로 보인다"는 보장을 준다. 반대로 jet는 특정 값 대역(청록 0.3–0.4, 주황 0.7–0.8)을 확대하고 녹–황 대역을 압축하는 비선형 확대경과 같다. 의도적으로 특정 대역을 강조하고 싶다면 그것은 컬러맵이 아니라 데이터 변환(예: 로그, 히스토그램 평활화)으로 하고, 그 사실을 범례에 밝혀야 한다.

지각 균일 컬러맵 설계: OKLCh 경로

지각 균일 컬러맵을 직접 만드는 가장 간단한 방법은 균등 색공간 안에서 곡선을 그리는 것이다. OKLab(7장)의 극좌표 OKLCh에서 명도 \(L\)을 \(t\)에 선형으로, 색상 \(h\)를 일정 속도로 돌리고, 채도 \(C\)는 양 끝에서 줄인다(아주 어둡거나 밝은 영역에서는 sRGB 가멋이 좁기 때문).

ΔE 등간격 재매개화: 곡선을 촘촘히(256점) 샘플링하고 누적 지각 길이 \(s(t)=\sum_{j\le i}\Delta E_{00,j}\)를 구한 뒤, \(s\)가 등간격이 되도록 \(t\)를 다시 정한다. 결과 맵은 인접 ΔE00가 거의 일정해진다. 다만 ΔE00 자체가 작은 색차용 공식이므로, 재매개화는 "같은 거리 = 같은 지각 차이"의 1차 근사다.

범주형 팔레트 설계와 진단

범주형 팔레트는 \(n\)개의 색 \(\{\mathbf{c}_k\}\)로, 목표는 가장 비슷한 두 색의 차이를 최대화하는 것이다. 평균 색차가 아니라 최솟값이 판독 오류를 결정하기 때문이다. 관측자 집합 \(\mathcal{V}\)=\{정상, 1형, 2형\}에 대해 강건하게 쓰면 다음과 같다.

설계 원칙은 계산 결과에서 바로 나온다. (1) 명도를 다양화하라. CVD 시뮬레이션 후 남는 차이의 대부분은 명도와 청–황 방향이므로, 모든 색을 같은 명도에 두면(HSL에서 L만 고정한 팔레트처럼) 2형에서 붕괴한다. (2) 빨강과 초록을 같은 명도로 짝짓지 마라. (3) 색 수를 줄여라. sRGB 가멋 안에서 세 관측자 모두에 대해 최소 ΔE00 ≥ 15를 유지할 수 있는 색은 대략 8개 안팎이다(아래 최적화기로 직접 확인할 수 있다). 그 이상은 모양·선 종류·직접 레이블과 결합해야 한다.

"ΔE00가 얼마면 범주로 구별되는가"에 대한 표준값은 없다. ΔE00 1–3은 인쇄·디스플레이 허용차 영역이고(7장), 범주 판독은 훨씬 큰 차이를 요구하며 마커 크기에 강하게 의존한다. 이 장에서는 작은 마커·얇은 선 기준으로 ΔE00 ≥ 10을 경고 문턱, ≥ 15를 목표로 쓰는 경험적 기준을 채택한다.

색에만 의존하지 말 것: 중복 부호화

WCAG 1.4.1은 색을 정보 전달의 유일한 수단으로 쓰지 말라고 요구한다. 그래프에서는 계열마다 마커 모양·선 종류를 다르게 하고, 범례 대신 선 끝에 직접 레이블을 다는 것이 가장 효과적이다. 범례 대조는 작업 기억을 쓰지만 직접 레이블은 색 구별 자체가 필요 없다.

UI 상태 색과 다크 모드

오류/경고/성공/정보의 관습적 색인 빨강/주황/초록/파랑은 색각 이상의 최악 축 위에 놓여 있다. 흔히 쓰이는 상태색 예 #d32f2f(오류)와 #2e7d32(성공)는 정상 관측자에게 ΔE00 70 이상 떨어져 있지만, L*가 47.1과 46.3으로 거의 같아 2형 시뮬레이션 후 ΔE00 9.1, 1형 후 10.7로 줄어든다. 작은 아이콘이나 얇은 테두리라면 구별이 어렵다.

다크 모드에서는 같은 색이 다른 대비를 갖는다. 흰 배경에서 대비를 확보하려고 어둡게 만든 색은 어두운 배경(#121212, Y=0.006)에서 대비가 떨어진다. 위 상태색은 흰 배경에서 3.1–5.1:1이지만 #121212 위에서는 오류 3.76, 성공 3.65로 본문 기준(4.5)을 밑돈다. 반대로 흰 배경에서 3.11인 주황은 다크에서 6.02다. 대비비는 배경을 기준으로 한 명도 거리이므로, 배경 명도가 뒤집히면 팔레트의 명도 배치도 뒤집어야 한다.

표준적인 처방은 OKLCh에서 색상각 \(h\)는 유지하고 명도를 올리며 채도를 낮추는 것이다. 어두운 주변에서는 밝은 고채도 색이 눈부시게 보이고(9장의 주변 효과), 밝은 영역의 sRGB 가멋은 채도 여유가 적어 어차피 채도를 줄여야 한다.