명도 대비 계산기란?

이 도구는 공식 WCAG 2.x 공식을 사용해 전경색(텍스트 색)과 배경색 사이의 색상 대비 비율을 계산합니다. 대비 비율은 접근성을 가늠하는 핵심 지표로, 저시력자나 색각 이상이 있는 사용자에게 텍스트가 얼마나 잘 읽히는지를 알려줍니다. 값은 1:1(완전히 같은 색으로 글자가 보이지 않는 상태)부터 21:1(순수한 검정 글자에 순백 배경)까지 분포합니다.

고대비와 저대비를 비교한 배경 위 텍스트 견본 두 개 — 고대비(왼쪽)는 읽기 쉽고, 저대비(오른쪽)는 접근성 검사를 통과하지 못합니다.

사용 방법

전경색(텍스트)과 배경색의 빨강·초록·파랑 값(0~255)을 각각 입력하세요. 계산기는 각 채널을 선형화한 뒤 두 색의 상대 휘도를 구하고, 주변광 보정 상수 0.05를 더한 다음 밝은 쪽을 어두운 쪽으로 나눕니다. 그 결과로 해당 색 조합이 일반 텍스트와 큰 텍스트에 대해 WCAG AA·AAA 기준을 통과하는지 알려줍니다.

공식 자세히 보기

대비 비율은 $\dfrac{L_1 + 0.05}{L_2 + 0.05}$로 계산하며, 여기서 $L_1$은 더 밝은 색의 상대 휘도, $L_2$는 더 어두운 색의 상대 휘도입니다. 상대 휘도는 먼저 각 채널을 0~1 범위로 환산한 뒤 감마 변환을 적용해 구합니다. 환산값이 0.03928 이하이면 12.92로 나누고, 그렇지 않으면 $\left(\dfrac{c+0.055}{1.055}\right)^{2.4}$를 적용합니다. 선형화된 채널은 $0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B$로 합산되는데, 이는 사람 눈이 초록색에 더 민감하다는 점을 반영한 가중치입니다.

$$\begin{gathered} \text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{fg},\, L_{bg}) \\ L_2 &= \min(L_{fg},\, L_{bg}) \\ L &= 0.2126\,R_{\ell} + 0.7152\,G_{\ell} + 0.0722\,B_{\ell} \\ C_{\ell} &= \begin{cases} \dfrac{C/255}{12.92} & C/255 \le 0.03928 \\[0.6em] \left(\dfrac{C/255 + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases} \end{aligned} \right. \end{gathered}$$

두 휘도 값을 사용한 명암비 공식 다이어그램 — 이 비율은 밝은 휘도 $L_1$과 어두운 휘도 $L_2$를 비교하며, 각각에 0.05를 더합니다.

계산 예시

흰색(255,255,255) 배경 위의 검정 글자(0,0,0): 검정의 휘도 $= 0$, 흰색의 휘도 $= 1$. 비율 $$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$ 21:1 — 가능한 최대 대비로, 모든 WCAG 등급을 손쉽게 통과합니다.

자주 묻는 질문

어느 정도 비율이 필요한가요? WCAG AA는 일반 텍스트에 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게 이상)에 3:1을 요구합니다. AAA는 각각 7:1과 4.5:1을 요구합니다.

색의 순서가 결과에 영향을 주나요? 아니요. 공식은 항상 밝은 쪽 휘도를 어두운 쪽 휘도로 나누므로, 전경색과 배경색을 바꿔도 비율은 동일합니다.

왜 0.05를 더하나요? 화면의 주변광 반사(플레어)를 모델링하기 위해서입니다. 덕분에 검정 위 검정처럼 극단적인 경우에도 무한대가 아닌 정해진 값이 나옵니다.

전경색 휘도	0
배경색 휘도	1
WCAG AA — 일반 텍스트 (≥ 4.5)	Pass
WCAG AA — 큰 텍스트 (≥ 3.0)	Pass
WCAG AAA — 일반 텍스트 (≥ 7.0)	Pass
WCAG AAA — 큰 텍스트 (≥ 4.5)	Pass

명도 대비 계산기

계산 입력

공식

결과