Contrast Ratio에서 명도 추출하기
WCAG를 고려한 명도대비율만을 가지고 균형 잡힌 컬러 스케일 생성하기
앞서 우리는 디자인 시스템에서 명도가 왜 중요한지 알아보았다. 컬러 스케일에서 WCAG(Web Content Accessibility Guidelines)를 고려해 균등한 명도대비를 정하면 가독성과 접근성, 그리고 사용성을 보장할 수 있을 것이다.
이러한 맥락에서 Adobe Design Spectrum은 WCAG를 고려해 적절한 명도대비율로 컬러 시스템을 구성한 훌륭한 사례다. 어도비의 컬러 팔레트를 참고하여 명도대비율을 활용한 컬러 스케일 구성 방법을 연구해 보았다.
명도대비율과 색상, 채도, 그리고 명도의 관계
먼저 어도비의 그린 스케일의 모든 HEX값의 좌표를 비교해 보았다. 우리가 자주 사용하는 디자인 툴의 RGB 컬러 피커는 색상(Hue)값을 선택하는 컬러 휠과 채도, 명도를 선택하는 컬러 스펙트럼으로 구성되어 있다.
RGB에는 명도값과 채도값이 직접적으로 존재하지 않아 이를 조절하려면 세 가지 RGB 값을 수동으로 변경해야 한다. 컬러 피커에서 명도와 채도를 쉽게 조절할 수 있는 이유는 RGB 색상 모델을 내부적으로 HSV(Hue, Saturation, Value) 모델로 변환하기 때문이다. HSV 모델은 명도나 채도를 독립적으로 변경할 수 있어 색상을 직관적으로 선택할 수 있는 장점이 있다. 물론 단점도 존재하는데, 이에 관련한 자세한 내용은 정희연님의 블로그에 기술되어 있으니 꼭 읽어보길 권장한다.
본론으로 돌아가 그린 스케일의 HEX값을 컬러 피커 상의 좌표로 확인해 보자. 아래와 같이 색상값은 그대로 유지되면서 명도와 채도만 변경되는 것을 볼 수 있다. 이 좌표들을 하나의 컬러 스펙트럼에 모아보면 나름의 규칙을 발견할 수 있다. 낮은 채도와 명도에서 시작해 점차 높은 채도로 증가하다가, 후반부로 갈수록 높은 채도와 명도에서 낮은 명도로 변하는 패턴을 가지고 있다.
하지만 이 그래프를 통해 채도와 명도의 관계성과 경향성은 파악할 수 있지만 값을 특정 지을 수는 없다. 심지어 휘도가 낮은 노란색의 컬러 스케일에서는 그래프의 곡선도 다르게 표현된다. 이렇듯 두 개의 변수로 일관성 있는 컬러 스케일을 만들기에는 그 범위가 너무 넓을 뿐 아니라 명도대비율에 근사한 값을 추출하기도 어렵다. 변수를 두 개가 아닌 하나로 줄일 필요가 있었다.
명도대비율을 이용해 명도 구하기
우리는 색을 구성하는 세 가지 변수를 알고 있다. 여기서 우리에게 주어진 조건은 명도대비율이며, 이 명도대비율을 활용해 세 가지 변수를 하나로 줄일 수 있어야 한다. 명도대비율과 가장 직접적인 연관이 있는 명도를 변수로 두고, 나머지 색상과 채도를 일정하게 고정하는 방법을 찾아보았다.
우선 어도비의 그린 스케일에서 명도대비율을 가져와보자. 어도비 컬러 스케일은 gray-100을 기준으로 명암비를 측정하기 때문에 contrast ratio checker를 이용해 흰색(#FFFFFF) 배경 기준의 명암비로 다시 계산했다. 그리고 이 명암비는 약간의 오차 범위만 존재할 뿐, 어도비 디자인 스펙트럼의 모든 스케일에 적용되어 있다.
WCAG는 색상의 밝기와 대비를 평가하기 위해 몇 가지 기준을 사용한다. 그중 하나는 지금까지 얘기한 명도대비율(Contrast Ratio)이고, 또 다른 하나는 상대 휘도(Relative Luminance)이다. 상대 휘도는 인간이 인식하는 밝기를 수치화한 값으로, WCAG에서 명도 대비 기반으로 텍스트와 배경 사이의 색상 대비를 평가하는 데 사용한다. 아래 계산식을 이용하면 색상이 인간의 눈에 어떻게 비치는지를 수치로 나타낼 수 있다.
Relative Luminance 공식(WCAG 2.1 기준)을 이용해 명도 구하기
1. RGB 값을 정규화한다. (0-255 → 0-1 범위로 변환)
2. RGB 값이 0.03928 이하이면 12.92로 나누고, 그렇지 않으면 감마 보정을 적용한다. 여기서 말하는 감마(Gamma)란 입력 신호(픽셀값)와 출력되는 실제 밝기(휘도) 간의 관계를 나타내는 값이다. 감마값이 1이면 밝기 보정이 없는 상태를 말하는 것이고 감마값이 1보다 높아지면 화면이 더 밝아졌다는 뜻이다. WCAG에서는 2.4의 감마 보정값을 사용한다.
3. 적용한 R′, G′, B′값을 모두 더하면 상대 휘도를 구할 수 있다.
여기서 0.2126, 0.7152, 0.0722는 인간의 눈이 각각 빨강(R), 초록(G), 파랑(B) 색상에 얼마나 민감한지를 나타내는 표준 가중치다. 그리고 각각의 값을 더하면 1.0이 나오게 되는데, 이는 당연하게도 명도가 가장 밝은 흰색을 나타낸다.
Contrast Ratio와 L1을 이용해 L2 구하기
우리가 명도대비율을 구하는 방식은 두 개의 L값을 가지고 두 색상의 상대적 휘도를 비교하여 계산해서 구하는 것이다.
여기서 L1은 더 밝은 색의 상대 휘도를 나타내고, L2는 더 어두운 색의 상대 휘도를 나타낸다. 그래서 흰색(1.0)과 검은색(0.0)의 대비 비율은 최대 명도대비율이 나오게 되고 이 값은 21:1이 된다.
이제 위 공식을 변형하여 L2를 구하는 식을 만들 수 있다. 우리는 그린 스테일의 명도대비율을 알고 있고, L1=1.0이라는 것을 알고 있다.
결과
좌측은 Adobe Design Spectrum의 컬러 스케일에서 추출한 명도대비율, 우측은 해당 명도대비율을 공식에 대입하여 추출한 명도값이다.이 공식에 어도비에서 제시한 그린 스케일의 명도대비율만 대입하면 아래 표와 같이 원하는 L2값을 구할 수 있다. 명도값을 알았다면 컬러 스펙트럼에서 임의의 색상과 채도값을 골라도 균등한 명암비를 가진 컬러 스케일을 만들 수 있을까? 다음에는 공실을 이용해 추출한 명도값을 가지고 어떻게 실제 컬러 스케일을 구상할 수 있는지 실험해 보겠다.
