웹 색상 대비와 접근성 (WCAG 대비비·색맹 고려 완전정리)
마지막 업데이트: 2026-06-25
웹 접근성의 핵심은 글자와 배경의 명도 대비입니다. WCAG 2.1 기준 본문 텍스트는 4.5:1, 큰 글자는 3:1 이상을 충족해야 하며, 더 엄격한 AAA는 각각 7:1, 4.5:1입니다.
여기에 더해 색에만 의존하지 않고 색맹(색각이상) 사용자까지 고려하면 더 많은 사람이 편하게 읽을 수 있습니다.
색상 대비는 왜 중요한가
웹사이트에서 가장 흔한 접근성 문제는 "글자가 잘 안 보인다"는 것입니다. 연한 회색 글씨를 흰 배경에 올리면 디자인은 세련돼 보일지 몰라도, 저시력 사용자나 햇빛 아래에서 화면을 보는 사람, 오래된 모니터를 쓰는 사람에게는 읽기 힘든 글자가 됩니다. 색상 대비는 단순한 미감의 문제가 아니라, 콘텐츠를 누구나 읽을 수 있게 만드는 가독성의 토대입니다.
국제 표준인 WCAG(Web Content Accessibility Guidelines)는 이 가독성을 측정 가능한 숫자로 정의합니다. 바로 글자색과 배경색의 명도 대비비(contrast ratio)입니다. 한국의 웹 접근성 인증(KWCAG)도 동일한 대비 기준을 따르므로, 공공·민간을 막론하고 알아두면 유용합니다.
대비비란 무엇이고 어떻게 계산하나
대비비는 두 색의 밝기 차이를 1:1부터 21:1 사이의 비율로 나타낸 값입니다. 같은 색끼리는 1:1이고, 순수한 검정과 순수한 흰색이 최대인 21:1입니다. 계산은 다음 두 단계로 이뤄집니다.
- 상대 휘도(relative luminance) — 각 색의 R·G·B 값을 sRGB 감마에서 선형 값으로 변환한 뒤, 사람 눈의 민감도에 맞춰 가중합(0.2126·R + 0.7152·G + 0.0722·B)합니다. 사람 눈은 초록에 가장 민감하므로 G의 가중치가 가장 큽니다.
- 대비비 공식 — 두 색의 휘도를 구한 뒤
(밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05)로 나눕니다. 0.05를 더하는 것은 화면의 주변광 반사를 보정하기 위한 값입니다.
직접 계산하기는 번거롭습니다. 색 대비 검사기에 전경색과 배경색을 넣으면 대비비와 등급 통과 여부를 즉시 알 수 있습니다.
WCAG 2.1 대비 기준 정리
WCAG는 준수 수준을 A, AA, AAA로 나눕니다. 대비와 관련해서는 보통 AA를 실무 최소 기준으로 삼고, 더 높은 접근성이 필요하면 AAA를 목표로 합니다. 글자 크기에 따라 기준이 달라지는 점이 중요합니다.
| 대상 | AA (최소) | AAA (강화) |
|---|---|---|
| 일반 본문 텍스트 | 4.5:1 | 7:1 |
| 큰 글자 (18pt+ 또는 14pt 굵게) | 3:1 | 4.5:1 |
| UI 컴포넌트·그래픽 객체(비텍스트) | 3:1 | — |
| 장식용 텍스트·로고 | 요건 없음 | 요건 없음 |
여기서 "큰 글자"는 대략 24px(18pt) 이상이거나, 18.66px(14pt) 이상이면서 굵게(bold) 처리된 텍스트를 말합니다. 큰 글자는 획이 두꺼워 같은 대비에서도 더 잘 읽히기 때문에 기준이 완화됩니다. 버튼 테두리, 입력창 경계선, 아이콘, 차트의 선·막대 같은 비텍스트 요소도 3:1 기준을 충족해야 사용자가 그 존재와 상태를 인지할 수 있습니다.
색에만 의존하지 않기
대비를 맞췄다고 접근성이 끝나는 것은 아닙니다. WCAG의 또 다른 핵심 원칙은 "색만을 정보 전달의 유일한 수단으로 쓰지 말라"는 것입니다. 색각이상(색맹)을 가진 사람은 전 세계 남성의 약 8%, 여성의 약 0.5%에 이릅니다. 이들에게 빨강과 초록만으로 구분되는 정보는 거의 같은 색으로 보일 수 있습니다.
예를 들어 입력 폼에서 오류 항목을 빨간 테두리로만 표시하면 적록색맹 사용자는 어느 항목이 잘못됐는지 알기 어렵습니다. 해결책은 간단합니다. 색과 함께 텍스트 메시지("이메일 형식이 올바르지 않습니다"), 경고 아이콘, 밑줄이나 패턴을 더하면 색을 보지 못해도 정보가 전달됩니다. 그래프에서도 선 색만 다르게 하기보다 점선·실선, 마커 모양, 직접 라벨을 함께 쓰는 것이 좋습니다.
색맹(색각이상) 유형 이해하기
색각이상은 망막의 원추세포 중 일부가 결손되거나 약해 생깁니다. 가장 흔한 적록색맹은 빨강·초록 계열을, 드문 청황색맹은 파랑·노랑 계열을 구분하기 어렵습니다. 디자인이 이들 색 조합에 의존한다면 색맹 시뮬레이터로 변환 결과를 확인해 두는 것이 좋습니다.
| 유형 | 혼동하기 쉬운 색 | 대응 |
|---|---|---|
| 적색맹·녹색맹 (적록색맹) | 빨강 ↔ 초록, 갈색 ↔ 녹색 | 상태 구분에 빨강/초록 단독 사용 금지, 아이콘·텍스트 병행 |
| 청색맹 (청황색맹) | 파랑 ↔ 초록, 노랑 ↔ 분홍 | 파랑·노랑 대비에 의존하지 않기 |
| 전색맹 | 거의 모든 색 (명도만 지각) | 충분한 명도 대비가 결정적 |
모든 유형에 공통으로 효과적인 대비책은 결국 명도 대비를 충분히 확보하는 것입니다. 색상(hue)이 달라도 밝기가 비슷하면 색각이상에서 거의 같게 보이지만, 밝기 차이가 크면 색을 구분하지 못해도 형태와 글자를 읽을 수 있습니다.
실무에서 색을 고르는 순서
접근성을 지키면서도 보기 좋은 색을 고르려면 다음 순서를 권합니다.
- 1. 팔레트 구성 — 컬러 팔레트 생성기로 주조색·보조색·강조색을 정합니다. 보통 주조색 1, 보조색 1~2, 강조색 1로 충분합니다.
- 2. 대비 검증 — 본문·버튼·링크 색을 배경 위에서 색 대비 검사기로 점검해 최소 AA(4.5:1)를 맞춥니다.
- 3. 색맹 점검 — 상태·범주를 색으로 구분하는 화면은 색맹 시뮬레이터로 변환해 구분이 유지되는지 확인합니다.
- 4. 색 외 단서 추가 — 색만으로 의미를 전달하는 부분에 텍스트·아이콘·패턴을 더합니다.
요약
- 대비비는 (밝은 색 + 0.05) ÷ (어두운 색 + 0.05)로 계산하며 1:1~21:1 범위입니다.
- 본문 텍스트는 AA 4.5:1, AAA 7:1 / 큰 글자는 AA 3:1, AAA 4.5:1 / 비텍스트 요소는 3:1을 충족합니다.
- 색만으로 정보를 구분하지 말고 텍스트·아이콘·패턴을 함께 씁니다.
- 색각이상까지 고려하려면 명도 대비를 넉넉히 확보하는 것이 가장 확실합니다.
자주 묻는 질문 (FAQ)
본문 글자의 최소 대비비는 얼마인가요?
WCAG 2.1 AA 기준 일반 본문 텍스트는 4.5:1 이상이어야 합니다. 더 엄격한 AAA는 7:1입니다. 18pt 이상 또는 14pt 굵은 글씨 같은 큰 글자는 AA 3:1, AAA 4.5:1로 완화됩니다.
색에만 의존하면 왜 안 되나요?
색각이상(색맹) 사용자는 색만으로 정보를 구분하기 어렵습니다. 예를 들어 빨강/초록으로만 성공·실패를 표시하면 적록색맹 사용자는 구분이 어렵습니다. 텍스트, 아이콘, 패턴을 함께 써야 합니다.
대비비를 직접 계산할 수 있나요?
각 색을 sRGB에서 선형화해 상대 휘도를 구한 뒤 (밝은 색 + 0.05) ÷ (어두운 색 + 0.05) 공식으로 계산합니다. 직접 계산이 번거롭다면 색 대비 검사기로 즉시 값을 확인할 수 있습니다.
관련 도구·가이드
마지막 업데이트: 2026-06-25