WCAG 색상 대비 완전 가이드
업데이트 2026-07-11 · 참고 정보 · WCAG 2.1/2.2 권고안 기준.
1. 왜 대비가 중요한가
색상 대비는 텍스트(또는 UI 요소)와 그 배경 사이의 밝기 차이입니다. 대비가 낮으면 누구에게나 읽기 어렵고, 특히 저시력·색각이상 사용자나 밝은 야외에서 화면을 보는 사람에게 큰 장벽이 됩니다. 웹 콘텐츠 접근성 지침 (WCAG)은 이를 측정 가능한 요구사항으로 바꿉니다. 텍스트 크기와 준수 수준에 따라 만족해야 하는 수치화된 대비비율(contrast ratio)이 그것입니다.
2. 대비비율 계산, 단계별로
WCAG 2.x는 대비를 두 색의 상대 휘도(relative luminance) 비율로 정의합니다. 각 채널을 선형화하고, 휘도로 합산한 뒤, 비율을 만드는 세 단계입니다.
2.1 sRGB 채널 선형화
화면 색은 감마 인코딩된 sRGB 공간에 저장됩니다. 지각 밝기를 재려면 먼저 각 8비트 채널(0~255)을 c = 채널 / 255로 바꾼 뒤 선형화합니다.
c ≤ 0.03928이면:c_linear = c / 12.92- 그 외:
c_linear = ((c + 0.055) / 1.055) ^ 2.4
2.2 상대 휘도로 합산
사람 눈은 초록에 가장 민감하고 파랑에 가장 둔감하므로, 선형 채널에 Rec. 709 가중치를 적용합니다.
L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear
순수 검정은 L = 0, 순수 흰색은 L = 1입니다.
2.3 비율 만들기
두 휘도 값으로 대비비율을 만듭니다.
ratio = (밝은쪽 L + 0.05) / (어두운쪽 L + 0.05)
+ 0.05는 화면에 반사되는 주변광을 모델링하며 비율이 발산하지 않게 합니다. 결과는 1:1(같은 색)부터 21:1(흰 배경의 검정 글자)까지입니다.
3. 기준: AA와 AAA
WCAG는 텍스트 대비에 두 준수 수준을, 비텍스트 요소에 하나의 수준을 정의합니다.
| 적용 대상 | AA | AAA | SC |
|---|---|---|---|
| 일반 텍스트 | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| 대형 텍스트 | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| UI·그래픽 | 3:1 | — | 1.4.11 |
비율이 기준값 이상이면 해당 수준을 통과합니다. 즉 측정값 4.5:1은 일반 텍스트 AA를 통과하고, 6.9:1은 AAA에 도달하지 못합니다.
4. "대형 텍스트"란
큰 글자는 낮은 대비에서도 읽히므로 기준이 완화됩니다. WCAG는 대형 텍스트를 일반 굵기 18pt(약 24px) 이상, 또는 굵게(bold) 14pt(약 18.66px) 이상으로 정의합니다. 그보다 작으면 "일반 텍스트"이며 더 엄격한 4.5:1(AA)·7:1(AAA)을 만족해야 합니다. pt↔px 환산은 플랫폼에 따라 다르므로 px는 안내값으로 보고, 애매하면 pt 정의를 우선하세요.
5. 비텍스트 대비 (SC 1.4.11)
사용자가 봐야 하는 것은 텍스트만이 아닙니다. SC 1.4.11은 활성 UI 컴포넌트의 시각적 경계(입력창 테두리, 버튼 외곽선)와 의미 있는 그래픽(아이콘, 차트 선, 포커스 표시)에 3:1 대비를 요구합니다. 비텍스트 대비에는 AAA 수준이 없으므로 3:1이 기준선입니다. 본 도구의 UI 열은 이 3:1 기준으로 판정합니다.
6. 실패한 조합 고치기
조합이 실패하면 보통 통과하는 가장 작은 변화를 원합니다. 가장 예측 가능한 방법은 명도만 조정하여 색상(hue)과 채도(saturation)를 유지하는 것입니다. 그러면 브랜드 색의 인상이 그대로 남습니다. 배경이 밝으면 전경을 어둡게, 배경이 어두우면 전경을 밝게 합니다. 본 도구가 바로 이 방식으로, 전경의 색상·채도를 고정한 채 HSL 명도를 목표 비율에 도달할 때까지 조정해 가장 가까운 통과 색을 제안합니다.
명도만으로는 안 되는 경우도 있습니다. 채도 높은 노랑은 색상을 바꾸지 않는 한 흰 배경에서 7:1에 절대 도달하지 못합니다. 이때는 색상을 바꾸거나, 채도를 낮추거나, 배경을 바꿔야 합니다. 제안은 목표가 불가능함을 알리기 위해 검정·흰색 중 대비가 큰 쪽으로 대체됩니다.
7. 실전 팁
- 기본은 AA(4.5:1)로 설계하고, 가능하면 본문에 AAA(7:1)를 노려보세요.
- 의미 전달을 색에만 의존하지 마세요 — 텍스트·아이콘·패턴을 함께 쓰세요.
- 기본 상태뿐 아니라 hover·focus·disabled·placeholder 상태도 확인하세요.
- 플레이스홀더도 실제 텍스트입니다 — 대비 기준을 지켜야 합니다.
- 디자인 토큰 값이 아니라 투명도까지 반영된 실제 렌더 색으로 검사하세요.