WCAG 색상 대비율 계산기

계산 입력

전경(텍스트) 색상 HEX

배경 색상 HEX

결과

대비율

21.00:1

WCAG 2.x 대비율

WCAG 등급	요구 기준	결과
AA — 일반 텍스트	≥ 4.5:1	통과
AA — 큰 텍스트	≥ 3:1	통과
AAA — 일반 텍스트	≥ 7:1	통과
AAA — 큰 텍스트	≥ 4.5:1	통과

전경 휘도	0
배경 휘도	1

WCAG 색상 대비율이란?

대비율은 두 색상이 서로 얼마나 잘 구분되는지를 나타내는 수치로, 보통 배경 위의 텍스트 색상을 비교할 때 사용됩니다. 웹 콘텐츠 접근성 지침(WCAG 2.x)은 이 대비율을 기준으로 최소 기준값을 정해, 저시력자나 색각 이상이 있는 사용자도 콘텐츠를 무리 없이 읽을 수 있도록 합니다. 대비율은 두 색이 완전히 같은 1:1부터 순수 검정과 순수 흰색 조합인 21:1까지의 범위를 가집니다.

Contrast ratio compares the relative luminance of a foreground and background color.

계산기 사용 방법

전경(텍스트) 색상과 배경 색상을 #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으로 나누는 오류를 막고, 화면에서 발생하는 주변광 반사(플레어)를 반영하기 위한 것입니다.

Each color's relative luminance (L) is computed, then combined as (L1 + 0.05) / (L2 + 0.05).

계산 예시

흰색 배경(#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을 요구합니다.

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

단순한 밝기 비교로는 왜 안 되나요? 사람의 색 인식은 비선형적이며 특히 녹색에 더 민감하게 가중되어 있습니다. 그래서 단순 평균이 아니라 감마 보정과 채널별 계수를 적용한 휘도를 사용하는 것입니다.