명도: 디자인 시스템의 색을 정할 때 가장 중요한 요소
색의 3요소 중 명도가 왜 디자인 시스템에서 가장 중요한지 알아보자
색의 3요소
색을 구성하는 핵심 요소는 색상(Hue), 채도(Saturation), 그리고 명도(Lightness)다.
색상(Hue)은 색을 다른 색과 구별하게 하는 고유한 특질이다. 우리가 알고 있는 빨강, 파랑, 초록처럼 색상환의 색 자체를 나타내며, 빛깔이라고도 한다. 채도(Saturation 또는 Chroma)는 색상의 선명도를 나타내며, 색이 진하거나 엷은 정도를 의미한다. 명도는 그럼 무엇인가. 명도는 색의 밝기를 결정하는 요소로, 같은 색상이라도 명도에 따라 밝거나 어두워진다.
그리고 이는 디자인 시스템에서 가장 중요한 요소이기도 하다.
명도가 가장 중요한 이유
색 그 자체를 나타내는 색상(Hue)이 아니라 왜 명도(Lightness)가 가장 중요할까? 가독성과 접근성, 그리고 사용성을 보장하는 것이 UI의 핵심 목표이기 때문이다.
디지털 제품에서 버튼, 텍스트, 배경 색상 등은 사용자가 쉽게 구별할 수 있어야 한다. 같은 색상을 가지고 있어도 명도가 너무 비슷하면 가독성이 떨어지고 요소 간 구별이 어려워진다. 예를 들어, 파란색(#007BFF) 배경에 어두운 파란색(#0056B3) 텍스트를 사용하면 색상은 다르지만 명도가 유사해 읽기 어렵다.
일반적인 사용자는 색상을 인지할 수 있지만 색각 이상을 가진 사용자는 색상을 구별하지 못할 수 있다. 이러한 사용자에게 토스의 버튼이 파란색이라는 사실은 의미가 없다. 오로지 버튼과 배경 간의 명암비(contrast ratio)만이 사용자에게 이것이 CTA(Call-To-Action)임을 인식시킬 수 있기 때문이다. 즉, UI에서 중요한 것은 "어떤 색이냐"가 아니라 ”색상이 얼마나 밝거나 어두운가”이다.
실제로 UI에서 가장 널리 사용되는 색상은 채도가 높은 컬러가 아니라 명도 차이에 기반한 그레이스케일이다. 텍스트, 배경, 비활성화된 버튼 등 대부분의 UI 요소는 명도를 활용하여 구성된다.
적절한 명암비를 파악하자
그럼 사용자에게 적절한 명도를 어떻게 파악할 수 있을까? WC3에서 웹 콘텐츠의 접근성을 향상시키기 위해 만든 국제 표준 가이드라인인 WCAG(Web Content Accessibility Guidelines)에서는 다음과 같은 명암비 기준을 제시하고 있다.
일반 텍스트(Body text) → 최소 4.5:1 이상
굵은 텍스트(Bold text, 18px 이상) → 최소 3:1 이상
비활성화된 텍스트(Disabled state text) → 3:1 이상을 권장
이는 대부분의 기업이 목표로 하는 AA등급을 만족시키는 조건들이다. 이를 준수하지 않으면 저시력자나 특정 환경에서 UI를 사용하는 사용자들이 콘텐츠를 제대로 인식하기 어렵다. 실제로 Adobe와 Google은 디자인 시스템에서 텍스트에 색상을 정할 때 항상 4.5:1 이상의 명암비를 충족하는 컬러를 기준으로 삼는다.
Adobe Design Spectrum의 컬러 가이드그래서 만약 당신이 컬러스케일을 처음 지정할 때 어떤 기준을 가지고 색상을 선정할지 막막하다면, 아래 기준을 활용해 이정표를 세워보자. 이 기준을 먼저 충족시킨다는 전제로 범위를 좁히고 색상을 선정하면 컬러 팔레트를 구성할 때 수많은 색상 속에서 혼란을 줄일 수 있다.
가장 낮은 비중의 텍스트도 배경과의 명암비가 최소 3:1 이상이어야 할 것
주요 텍스트는 배경과 7:1 이상의 명암비를 가질 것
본문과 배경의 명암비는 15:1을 넘지 않을 것
텍스트 간 명도 차이를 균일하게 분포시킬 것
구글과 어도비가 적절한 명도를 선택하는 방식
HSL 컬러 모델은 RGB에서 밝기와 채도를 독립적으로 조절하기 위해 만들어졌지만 서로 다른 색상들의 명도값이 같더라도 색조에 따라 시각적으로 인지되는 밝기가 다르다는 문제점이 있다. 이는 사람의 색상 인식이 균일하지 않기 때문인데, 명도를 50%로 동일하게 설정해도 휘도가 높은 노란색이 휘도가 가장 낮은 파란색보다 훨씬 밝아 보인다.
이러한 문제를 해결하기 위해 구글과 어도비는 자체적인 방식으로 색상별 밝기를 일정하게 맞춰 위계를 통일한다. 실제로 두 회사의 컬러 팔레트를 보면 서로 다른 컬러스케일에서도 명암비가 오차 범위 내에서 균등하게 적용되는 것을 확인할 수 있다.
기본 배경색이 #f8f8f8이 기본 배경색인 어도비의 명암비
Adobe 컬러 스케일의 명암비를 도식화한 그래프를 보면 명도(Tone) 값이 단순한 직선이 아닌 S자 형태의 곡선처럼 완만하게 변화하는 것을 볼 수 있다.
이러한 곡선 형태는 인간이 색상의 밝기를 인식하는 방식과 직접적인 관련이 있다. 우리의 눈은 밝은 색의 작은 변화에는 민감하게 반응하지만, 어두운 색의 차이는 잘 구별하지 못한다. 따라서 컬러스케일을 지정할 때 단순히 일정한 값의 차이로 명도를 변화시키면 오히려 부자연스럽게 보일 수 있다는 점을 염두에 두어야 한다.
