WCAG 색상 대비율이란?
대비율은 두 색상이 서로 얼마나 잘 구분되는지를 나타내는 수치로, 보통 배경 위의 텍스트 색상을 비교할 때 사용됩니다. 웹 콘텐츠 접근성 지침(WCAG 2.x)은 이 대비율을 기준으로 최소 기준값을 정해, 저시력자나 색각 이상이 있는 사용자도 콘텐츠를 무리 없이 읽을 수 있도록 합니다. 대비율은 두 색이 완전히 같은 1:1부터 순수 검정과 순수 흰색 조합인 21:1까지의 범위를 가집니다.
계산기 사용 방법
전경(텍스트) 색상과 배경 색상을 #1a73e8처럼 HEX 값으로 입력하거나, #fff와 같은 축약형으로 입력하세요. 계산기는 각 색상을 선형화한 뒤 상대 휘도를 계산하고, 그 결과로 대비율을 산출합니다. 또한 각 WCAG 기준에 대한 통과/실패 여부도 함께 보여줍니다.
계산 공식 풀이
대비율은 (L1 + 0.05) / (L2 + 0.05)로 구합니다.
$$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L_2 &= \min(L_{\text{Foreground}},\, L_{\text{Background}}) \end{aligned} \right.$$여기서 \(L_1\)은 더 밝은 색의 상대 휘도, \(L_2\)는 더 어두운 색의 상대 휘도입니다. 상대 휘도는 각 sRGB 채널을 0~1 값으로 변환한 뒤 선형화하여 계산합니다(값이 0.03928 이하인 채널은 12.92로 나누고, 더 밝은 채널은 \(\left(\frac{c+0.055}{1.055}\right)^{2.4}\)를 적용).
$$c_{lin} = \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases}$$그런 다음 \(0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B\)로 합산합니다.
$$L = 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin}$$0.05라는 보정값은 0으로 나누는 오류를 막고, 화면에서 발생하는 주변광 반사(플레어)를 반영하기 위한 것입니다.
계산 예시
흰색 배경(#FFFFFF) 위의 검은색 텍스트(#000000)를 예로 들어 보겠습니다. 검정의 휘도는 0, 흰색의 휘도는 1입니다. 대비율은 $$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$로, 가능한 최댓값이며 모든 등급을 여유롭게 통과합니다.
자주 묻는 질문
어느 정도의 대비가 필요한가요? WCAG AA 등급은 일반 텍스트에 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게)에 3:1을 요구합니다. AAA 등급은 각각 7:1과 4.5:1을 요구합니다.
색상 순서가 결과에 영향을 주나요? 아니요. 공식은 항상 더 밝은 휘도를 더 어두운 휘도로 나누기 때문에, 전경색과 배경색을 바꿔도 대비율은 동일합니다.
단순한 밝기 비교로는 왜 안 되나요? 사람의 색 인식은 비선형적이며 특히 녹색에 더 민감하게 가중되어 있습니다. 그래서 단순 평균이 아니라 감마 보정과 채널별 계수를 적용한 휘도를 사용하는 것입니다.
