디자인을 멋지게 만들어도 텍스트가 안 읽히면 의미가 없다. WCAG (Web Content Accessibility Guidelines) 의 색상 대비 기준은 저시력 사용자·직사광선 모니터·콘트라스트 낮은 디스플레이 에서도 본문이 읽히도록 정한 최저선이다. 이 가이드는 비율이 어떻게 계산되는지, AA 와 AAA 가 어떻게 다른지, 그리고 실제 UI 에서 자주 빠뜨리는 지점을 정리한다.
비율 계산 — sRGB luminance
WCAG 2.x 대비 비율은 상대 휘도 (relative luminance) 두 값의 비. 값은 항상 1 : 1 ~ 21 : 1 범위. 검정 글자/흰 배경이 최대 21:1.
L1 = 더 밝은 색의 relative luminance
L2 = 더 어두운 색의 relative luminance
ratio = (L1 + 0.05) / (L2 + 0.05)relative luminance 는 sRGB 채널 (R, G, B) 을 0~1 로 정규화한 뒤 감마 보정 (sRGB → linear) 후 가중치 0.2126 / 0.7152 / 0.0722 로 합산한다. 녹색 가중치가 가장 큰 이유는 인간 망막의 녹색 감도 때문.
직접 계산을 안 해도 두 색을 넣으면 비율이 나오는 색 대비 검사기 가 가장 빠르다 — AA/AAA Normal/Large 4 등급을 동시에 표시.
AA vs AAA — 두 등급
| 등급 | 일반 텍스트 | Large 텍스트 | UI 컴포넌트 |
|---|---|---|---|
| AA (실무 기준) | ≥ 4.5 : 1 | ≥ 3 : 1 | ≥ 3 : 1 |
| AAA (고수준) | ≥ 7 : 1 | ≥ 4.5 : 1 | ≥ 3 : 1 (별도 기준 없음) |
AA 가 사실상 업계 표준. 정부 시스템·공공 서비스에 법적 의무로 박혀 있는 경우가 많다 (미국 Section 508, EU EAA, 한국 KWCAG). AAA 는 모든 페이지에 강제하기엔 너무 빡빡 — WCAG 도 AAA 는 "전체 페이지에 강제할 수 없다" 고 명시.
"Large 텍스트" 의 정의
- 일반 굵기: 18.66 px (14 pt) 이상.
- bold: 14 px (≈11 pt) 이상.
디스플레이 픽셀 기준이므로 실제 사용자가 보는 size 가 기준. 작은 텍스트일수록 더 높은 대비가 필요한 이유는 글자 획이 가늘면 안티앨리어싱 픽셀 비중이 커져 가독성이 떨어지기 때문.
UI 컴포넌트 대비 (WCAG 2.1 추가)
WCAG 2.1 (2018) 부터 1.4.11 Non-text Contrast 가 추가됐다. 텍스트 외의 UI 요소도 3:1 이상의 대비가 필요하다.
- 입력 필드 테두리, 버튼 외곽, 체크박스 윤곽선, 토글 스위치 등.
- 포커스 인디케이터 (focus ring) — 키보드 사용자에 필수.
- 차트 데이터 시리즈를 색상만으로 구분할 때 — 패턴/라벨 병기 권장.
흰 배경 위 "회색 입력 필드 테두리 (#E5E5E5)" 같은 디자인은 약 1.2:1 로 크게 미달. #C0C0C0 정도까지 진해야 3:1 근방.
흔히 빠지는 UI 회귀
1. placeholder 텍스트
"회색 위 더 옅은 회색" 패턴이 가장 자주 깨진다. placeholder 가 입력 안내 역할을 하면 4.5:1 필요. 단순 시각적 prompt 라면 3:1 도 허용된다는 해석 있지만, 일관되게 4.5 권장.
2. 다크 모드의 accent 색
라이트 모드에서 통과한 accent (예: #5b21b6 Iris) 가 다크 배경 (#1a1a1a) 에서는 2:1 수준으로 떨어진다. 다크 모드용으로 명도를 올려야 한다 (HSL lightness 55% 정도).
3. 비활성 상태
disabled 버튼이 너무 흐려서 안 보이는 경우. WCAG 는 비활성 UI 컴포넌트는 대비 요구에서 제외되지만, 사용성 관점에서 3:1 이상 권장.
4. 이미지 위 텍스트
OG 이미지·히어로 배너 위 텍스트는 배경이 균일하지 않아 측정이 어렵다. 텍스트 뒤에 반투명 어두운 박스를 까는 게 일반적. 그라데이션 오버레이가 충분히 진해야 함.
5. 링크 구분
본문 안 인라인 링크가 같은 색의 다른 명도로만 구분되면 색맹 사용자에게 보이지 않는다. 밑줄 + 색 조합이 표준. 밑줄을 제거하려면 링크 색의 대비가 본문 색 대비 3:1 이상 + 호버/포커스에 다른 시각 변화 필수.
APCA — 차세대 공식
WCAG 2.x 공식은 sRGB 만 가정해 P3·HDR 색공간에서 부정확하고, 흰 배경에 파스텔 색이 부당하게 통과하는 등 한계가 있다. WCAG 3 에서는 APCA (Advanced Perceptual Contrast Algorithm) 를 도입할 예정.
- 대비를 비율 (1:1 ~ 21:1) 이 아닌 Lc (Lightness contrast) 값 (-108 ~ 106) 으로 표시.
- 텍스트 크기·굵기에 따라 다른 최소 Lc 권장. 작은 텍스트일수록 더 큰 Lc.
- 현재 (2026) WCAG 3 는 Working Draft. AA/AAA 정식 대체까지 시간 더 필요. 신규 디자인 시스템은 양쪽 모두 통과 권장.
실무 워크플로우
가장 안전한 패턴:
- 디자인 시스템 정의 단계에서 모든 색 페어에 대비 측정 — fg/bg, accent/ bg, border/bg, focus-ring/bg.
- AA Normal (4.5:1) 통과한 페어만 토큰화. 미달은 명도 조정 후 재측정.
- 다크 모드는 별도 토큰 — 단순 색 반전 X. accent 만 보존하고 fg/bg 는 재설계.
- CI 가드 — 토큰 파일 변경 시 자동 검증. 회귀 차단.
도구 활용:
- 색 대비 검사기 — 두 색 입력, 즉시 AA/ AAA 등급 + 실시간 샘플 텍스트.
- 컬러 변환 — HEX·RGB·HSL·CMYK 간 변환. 다크 모드 명도 조정 시 HSL 이 직관적.
- 색 팔레트 생성기 — 기준 색에서 shades/ tints + 보색·유사색 자동. 토큰 시드 만들 때 유용.
요약
- WCAG 2.x 대비 비율 = (밝은 휘도 + 0.05) / (어두운 휘도 + 0.05). 1:1 ~ 21:1.
- AA: 일반 4.5, Large 3, UI 3. AAA: 일반 7, Large 4.5.
- Large = 18.66 px / bold 14 px 이상. 단위 px 기준.
- WCAG 2.1 의 1.4.11 — 텍스트 외 UI (border/focus ring) 도 3:1 필요.
- 자주 실패: placeholder, 다크 모드 accent, disabled, 이미지 위 텍스트, 링크 색 단독 구분.
- APCA 는 WCAG 3 의 새 공식. 정식 시점은 미정 — 당분간 양쪽 통과 권장.