명도 대비 계산기란?
이 도구는 공식 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}$$
계산 예시
흰색(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를 더하나요? 화면의 주변광 반사(플레어)를 모델링하기 위해서입니다. 덕분에 검정 위 검정처럼 극단적인 경우에도 무한대가 아닌 정해진 값이 나옵니다.
