비율이 측정하는 것
WCAG 대비는 두 색이 얼마나 달라 보이는지가 아니라 얼마나 많은 빛을 내는지를 비교합니다. 각 색은 0(검정)에서 1(흰색) 사이의 숫자 하나, 즉 상대 휘도로 환산됩니다. 대비 비율은 밝은 색의 휘도를 어두운 색의 휘도로 나눈 값이며, 주변광과 화면 번짐을 반영하려고 양쪽에 0.05를 더합니다.
비율은 1:1(같은 색)에서 21:1(흰색 위 검정)까지입니다. 휘도만으로 계산하므로 색상(hue)은 아무 역할이 없습니다. 휘도가 같은 채도 높은 빨강과 회색은 색상환에서는 달라 보여도 대비가 정확히 1:1이어서 많은 사용자에게 구분하기 어렵습니다.
상대 휘도를 단계별로 계산하기
8비트 sRGB 채널 R, G, B(0~255)에서 시작합니다. 각각을 255로 나누어 0~1 사이의 값 c를 얻습니다. 그다음 sRGB 감마 곡선을 되돌려 선형 값으로 바꿉니다. c가 0.04045 이하이면 12.92로 나누고, 그보다 크면 ((c + 0.055) / 1.055)^2.4를 계산합니다. 마지막으로 눈의 민감도에 따라 세 채널에 가중치를 줍니다. 초록이 가장 크고 파랑이 가장 작습니다.
WCAG 2.x 문서에는 작은 값의 경계가 0.03928로 적혀 있는데, 이는 sRGB 규격의 예전 판에서 온 값입니다(현재 규격은 0.04045). 8비트 채널 값 중 두 숫자 사이에 들어가는 값이 없어서 결과는 같습니다.
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
비율 = (L_밝은색 + 0.05) / (L_어두운색 + 0.05)
예: 흰색 위의 #4a90e2 (74, 144, 226)
R_lin = 0.0685 G_lin = 0.2789 B_lin = 0.7605
L = 0.2126*0.0685 + 0.7152*0.2789 + 0.0722*0.7605 = 0.2689
비율 = (1.0 + 0.05) / (0.2689 + 0.05) = 3.29기준값: 1.4.3, 1.4.6, 1.4.11
WCAG 2.2에서 색 선택과 관련된 대비 기준은 세 가지입니다. 성공 기준 1.4.3 대비(최소)는 AA 수준으로, 일반 텍스트 4.5:1, 큰 텍스트 3:1을 요구합니다. 1.4.6 대비(향상)는 AAA 수준으로 이를 7:1과 4.5:1로 올립니다. 1.4.11 비텍스트 대비는 AA 수준으로, 사용자 인터페이스 구성요소와 콘텐츠 이해에 필요한 그래픽 객체에 3:1을 요구합니다.
큰 텍스트는 보통 굵기에서 18pt(24 CSS 픽셀) 이상, 또는 굵은 글씨 14pt(약 18.67 CSS 픽셀) 이상입니다. 그보다 작으면 일반 텍스트입니다. 로고타입, 순수 장식 텍스트, 비활성(disabled) 컨트롤은 예외입니다. 1.4.11에서 대상이 되는 것은 입력창 테두리나 체크박스처럼 컨트롤을 식별하게 해 주는 경계·채움, 포커스 링이나 선택 상태 같은 상태 표시, 차트와 아이콘의 의미 있는 부분입니다.
| 대상 | AA | AAA | 성공 기준 |
|---|---|---|---|
| 일반 텍스트(18pt 미만, 굵은 글씨는 14pt 미만) | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| 큰 텍스트(18pt 이상, 굵은 글씨는 14pt 이상) | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| UI 구성요소 경계·상태(입력창 테두리, 포커스 링, 체크 상태) | 3:1 | AAA 기준 없음 | 1.4.11 |
| 콘텐츠 이해에 필요한 그래픽(차트 선, 의미 있는 아이콘) | 3:1 | AAA 기준 없음 | 1.4.11 |
| 비활성 컨트롤, 로고타입, 장식 | 예외 | 예외 | 1.4.3 / 1.4.11 |
검산한 색 조합 예시
아래 표는 위 공식으로 계산한 실제 색 조합의 비율입니다. 감각을 맞춰 보는 데 쓰세요. 중간 회색과 흔한 브랜드 파랑은 기준선 바로 근처에 있습니다.
- #767676은 흰 배경에서 4.5:1을 통과하는 가장 밝은 순수 회색이고, 눈으로는 같아 보이는 #777777은 실패합니다.
- 어두운 #111827 위의 #9ca3af는 6.987:1입니다. AA는 통과하고 AAA에는 아슬아슬하게 못 미치는, 반올림 전 값을 봐야 하는 좋은 사례입니다.
- 흰 배경에서 실패하는 같은 노랑(#f5c518, 1.63:1)이 검정 위에서는 12.88:1이 됩니다. 대비는 색 조합의 속성입니다.
| 글자색 / 배경색 | 비율 | 일반 텍스트 AA (4.5) | 큰 텍스트 AA (3) | UI 1.4.11 (3) |
|---|---|---|---|---|
| #000000 / #ffffff | 21.00:1 | 통과 | 통과 | 통과 |
| #595959 / #ffffff | 7.01:1 | 통과 (AAA도 통과) | 통과 | 통과 |
| #767676 / #ffffff | 4.54:1 | 통과 | 통과 | 통과 |
| #777777 / #ffffff | 4.48:1 | 실패 | 통과 | 통과 |
| #949494 / #ffffff | 3.03:1 | 실패 | 통과 | 통과 |
| #9ca3af / #ffffff | 2.54:1 | 실패 | 실패 | 실패 |
| #4a90e2 / #ffffff | 3.29:1 | 실패 | 통과 | 통과 |
| #ffffff / #0066cc | 5.57:1 | 통과 | 통과 | 통과 |
| #9ca3af / #111827 | 6.99:1 | 통과 (AAA 7:1에는 미달) | 통과 | 통과 |
| #f5c518 / #ffffff | 1.63:1 | 실패 | 실패 | 실패 |
기준 미달 색 고치기
브랜드 파랑 #4a90e2는 흰 배경에서 3.29:1입니다. 큰 제목(3:1)에는 괜찮지만 본문 글자에는 실패합니다. 보통의 해결법은 색상과 채도는 두고 명도만 비율이 통과할 때까지 낮추는 것입니다. HSL로 #4a90e2는 대략 hsl(212, 72%, 59%)입니다. 명도를 1%포인트씩 내리면 일반 텍스트 AA를 처음 통과하는 단계인 #2275d7(명도 49%)에서 4.57:1이 되고, AAA는 #1a59a2(명도 37%)에서 7.01:1이 됩니다.
바꾸기 가장 쉬운 쪽을 고치세요. 브랜드 버튼은 흰 글자를 두고 배경을 어둡게 하는 편이 쉬운 경우가 많습니다. #0066cc 위의 흰색은 5.57:1, #2f6fb8 위의 흰색은 5.14:1입니다. 오류 문구의 경우 흰 배경에서 #e53935는 4.23:1로 실패하고, 조금 더 어두운 #c62828은 5.62:1에 이릅니다.
브랜드 색을 바꿀 수 없다면 쓰임새를 바꾸세요. 큰 텍스트·아이콘·채움에만 쓰고 그 위의 글자는 더 어두운 색으로 하거나, 더 어두운 테두리나 밑줄을 더해서 채움이 아니라 표시자가 3:1을 담당하게 합니다.
공식만으로는 해결되지 않는 경우
투명도: 대비는 최종적으로 섞인 색으로 계산합니다. 반투명한 색을 실제 배경 위에 먼저 합성한 뒤 공식을 적용하세요. 사진 위의 60% 검정 오버레이는 픽셀마다 비율이 다릅니다. 글자 아래에서 가장 밝고 복잡한 영역을 시험하거나 단색 스크림을 깔아 주세요.
그라데이션과 이미지: 글자는 실제로 놓인 배경 부분에 대해 기준을 충족해야 하므로 최악의 지점을 확인합니다. 글자 크기도 중요합니다. 라벨은 보통 굵기 24px 이상이거나 굵은 글씨 18.67px 이상일 때만 큰 텍스트로 취급하세요. 17px 라벨을 올림해서 기준에 끼워 맞추면 안 됩니다.
플레이스홀더, 링크, 포커스 표시: 플레이스홀더도 텍스트이므로 4.5:1이 필요합니다. 주변 글자와 색으로만 구분되는 링크는 배경 대비를 충족하는 것에 더해 주변 글자와도 3:1 대비가 있어야 하고(SC 1.4.1 색의 사용에 대한 기법 G183의 방식), 아니면 밑줄 같은 추가 단서가 있어야 합니다. 포커스 링은 1.4.11에 따라 인접한 색과 3:1에 도달해야 합니다.
APCA의 위치 (앞으로의 선택지)
WCAG 2.x 비율은 밝은 배경의 어두운 글자와 어두운 배경의 밝은 글자를 대칭으로 다루고, 글자 굵기와 크기는 큰 텍스트 여부라는 단일 스위치 외에는 반영하지 않습니다. APCA(Accessible Perceptual Contrast Algorithm)는 향후 WCAG 3의 후보 방식으로, 극성과 글자 크기·굵기에 따라 달라지는 Lc 값을 보고합니다. WCAG 2.2의 일부가 아니며 WCAG 3은 아직 초안이라, 현재의 법적 요건과 조달 기준은 여전히 WCAG 2.x 비율을 가리킵니다. APCA를 보조 의견으로 참고하는 것은 좋지만, 보고와 시험은 4.5:1과 3:1 기준으로 하세요.
실제 UI 팔레트 점검하기
대비 검토는 디자인 시스템의 모든 텍스트·컴포넌트 조합을 표로 만들고, 각 조합의 계산된 비율과 충족해야 할 기준을 나란히 적을 때 가장 잘 됩니다. 아래 조합은 흔한 Tailwind 스타일 팔레트에서 가져온 것이고, 비율은 위의 공식으로 계산했습니다. 눈여겨볼 행은 입력창 테두리입니다. 많은 디자인이 테두리에 쓰는 연한 회색은 비텍스트 3:1 요건에 크게 못 미치며, 해결책은 선을 굵게 하는 것이 아니라 더 어두운 회색을 쓰는 것입니다.
채워진 버튼도 보세요. #16a34a 위의 흰 글자는 3.30:1에 불과해 일반 텍스트 기준에서 실패하고, 더 어두운 #15803d는 5.02:1입니다. 두 초록은 시안에서는 비슷해 보이는데, 그래서 시각적 인상보다 숫자가 중요합니다.
| 조합 | 비율 | 요구 기준 | 결과 |
|---|---|---|---|
| 본문 #1f2937 / #ffffff | 14.68:1 | 4.5:1 (1.4.3) | 통과 |
| 링크 #1d4ed8 / #ffffff | 6.70:1 | 4.5:1 (1.4.3) | 통과 |
| 버튼 글자 #ffffff / #2563eb | 5.17:1 | 4.5:1 (1.4.3) | 통과 |
| 플레이스홀더 #6b7280 / #ffffff | 4.83:1 | 4.5:1 (1.4.3) | 통과 |
| 오류 문구 #b91c1c / #fef2f2 | 5.91:1 | 4.5:1 (1.4.3) | 통과 |
| 버튼 글자 #ffffff / #16a34a | 3.30:1 | 4.5:1 (1.4.3) | 실패 |
| 버튼 글자 #ffffff / #15803d | 5.02:1 | 4.5:1 (1.4.3) | 통과 (수정안) |
| 입력창 테두리 #d1d5db / #ffffff | 1.47:1 | 3:1 (1.4.11) | 실패 |
| 입력창 테두리 #9ca3af / #ffffff | 2.54:1 | 3:1 (1.4.11) | 실패 |
| 입력창 테두리 #6b7280 / #ffffff | 4.83:1 | 3:1 (1.4.11) | 통과 (수정안) |
흔한 누락을 잡아내는 검토 순서
자동 검사를 통과하고도 감사에서 실패하는 팀은 대개 같은 부분을 빼먹습니다. 디자인이나 페이지를 검토할 때 이 목록을 따라가 보세요.
- 기본 상태만이 아니라 상태를 모두 나열하세요. hover, active, focus, visited, selected, error는 각각 따로 검사해야 합니다.
- 두 테마를 모두 검사하세요. 흰 배경에서 통과한 색이 어두운 표면에서 실패하는 경우가 많고, 명도를 뒤집어 만든 다크 모드 팔레트는 기준선 바로 아래에 떨어질 수 있습니다.
- 페이지 배경만이 아니라 카드, 줄무늬 표, 배너, 토스트 등 글자가 놓이는 모든 표면에서 확인하세요.
- 큰 텍스트는 정직하게 판정하세요. 24px 이상인 제목은 3:1이면 되지만, 눈에 띄어도 캡션, 라벨, 메타데이터는 일반 텍스트입니다.
- '통과'만이 아니라 비율을 기록해 두세요. 브랜드 색이 바뀌었을 때 어떤 조합이 기준선에 가장 가까워졌는지 한눈에 볼 수 있습니다.
- 의미를 색에만 의존해 전달하지 마세요(WCAG 1.4.1). 빨강·초록 상태 색 옆에 아이콘, 라벨, 패턴을 함께 두세요.