웹 색상 대비와 접근성: WCAG 기준·법적 요건·색약 친화 디자인
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
목차
흰 배경에 연노란 텍스트, 회색 버튼에 진회색 글자는 디자인상 예쁠 수 있지만
저시력자나 색약이 있는 사용자에게는 읽기 불가능한 화면이 됩니다. 색상 대비 기준을 지키면 모든 사용자가 콘텐츠를 동등하게 이용할 수 있을 뿐만 아니라,
한국 장애인차별금지법에 따라 일정 규모 이상 웹사이트는 법적 요건이기도 합니다.
이 글은 WCAG 색상 대비 기준, 명암비 계산 원리, 한국 법적 요구사항(장애인차별금지법·KWCAG),
색약 친화 색상 선택, 다크모드 처리, 실무 적용 방법까지 한 번에 정리합니다.
WCAG 색상 대비 기준이란?#
WCAG(Web Content Accessibility Guidelines)는 W3C가 제정한 웹 접근성 국제 표준입니다. 현재 WCAG 2.2(2023년)가 최신이며,
색상 대비에 관해서는 명암비(Contrast Ratio)로 기준을 정합니다.
명암비 계산 방식#
명암비는 두 색상의 상대적 휘도(Relative Luminance) 차이로 계산합니다. 단순한 RGB 차이가 아니라 인간 눈의 색 인지에 가중치를 둔 계산식입니다.
명암비 = (밝은 색상의 휘도 + 0.05) / (어두운 색상의 휘도 + 0.05)
상대 휘도 계산:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(각 채널은 sRGB 변환 후 정규화)
결과는 1:1(차이 없음)에서 21:1(흰색 vs 검정)까지 나옵니다.
등급별 기준#
| 등급 | 일반 텍스트 | 큰 텍스트(18pt+ 또는 14pt+ 굵게) | UI 컴포넌트·그래픽 | 용도 |
|---|---|---|---|---|
| WCAG AA(권장) | 4.5:1 이상 | 3:1 이상 | 3:1 이상 | 대부분의 웹 서비스 |
| WCAG AAA(최고) | 7:1 이상 | 4.5:1 이상 | 3:1 이상 | 의료·공공·고접근성 |
AA가 사실상 표준입니다. 한국 전자정부 웹 접근성 지침과 K-WCAG 2.2도 AA를 요구합니다.
한국 법적 요구사항#
장애인차별금지법#
2008년 시행된 장애인차별금지 및 권리구제 등에 관한 법률(약칭: 장애인차별금지법)에 따라
다음 기관·기업은 웹 접근성 준수 의무가 있습니다.
| 대상 | 적용 시점 | 요건 |
|---|---|---|
| 공공기관·정부 웹사이트 | 2009년 4월 | K-WCAG 2.2 AA |
| 교육기관(초·중·고·대학) | 2010년 | 동일 |
| 병원·의료기관 | 2011년 | 동일 |
| 종업원 100인 이상 사기업 | 2013년 | 동일 |
| 모바일 앱 | 2024년~ | 모바일 접근성 지침 |
위반 시 한국정보화진흥원의 시정 권고, 미시정 시 과태료 또는 손해배상 청구 가능. 미국 ADA(Americans with Disabilities Act) 위반 소송과 유사한 사례가 한국에서도 증가하고 있습니다.
K-WCAG 2.2#
한국형 웹 콘텐츠 접근성 지침입니다. WCAG 2.2 기반에 한국어 가독성·문화적 맥락을 반영합니다. 색상 대비 기준은 WCAG와 동일(AA 4.5:1).
인증 마크#
- WA(웹 접근성) 인증마크: 한국웹접근성평가센터 발급
- WA-PLUS 마크: 더 높은 수준 충족
공공기관·대형 사이트는 인증마크 획득이 일반적입니다.
자주 쓰는 색상 조합의 명암비#
| 배경 | 텍스트 | 명암비 | 등급 |
|---|---|---|---|
| #FFFFFF(흰색) | #000000(검정) | 21:1 | AAA |
| #FFFFFF(흰색) | #767676(회색) | 4.54:1 | AA |
| #FFFFFF(흰색) | #595959(진회색) | 7.00:1 | AAA |
| #FFFFFF(흰색) | #949494(연회색) | 2.85:1 | 실패 |
| #2563EB(파랑) | #FFFFFF(흰색) | 5.05:1 | AA |
| #DC2626(빨강) | #FFFFFF(흰색) | 4.83:1 | AA |
| #16A34A(초록) | #FFFFFF(흰색) | 3.01:1 | AA Large only |
| #F3F4F6(연회색) | #6B7280(보조) | 3.02:1 | AA Large only |
| #0F172A(검정에 가까운) | #FFFFFF | 17.85:1 | AAA |
연회색 보조 텍스트(#6B7280)는 본문에 사용 시 AA 미달입니다. 18pt 이상 큰 텍스트에만 사용하세요.
WebAIM Million Report: 현실 통계#
WebAIM이 매년 상위 100만 개 웹사이트를 자동 검사하는 보고서에 따르면(2024년 기준):
- 96%의 홈페이지에서 WCAG 위반 발견
- 그중 83%가 저대비 텍스트 문제
- 평균 위반 수: 페이지당 약 50개
색상 대비 위반은 모든 접근성 문제 중 가장 흔한 항목입니다. 디자인 단계에서 도구로 검증하는 것이 표준 워크플로가 되어야 합니다.
색상 대비 도구 사용법#
- 전경색(텍스트·아이콘 색상) HEX 코드 입력
- 배경색 HEX 코드 입력
- 명암비와 WCAG 등급(AA/AAA 통과 여부) 즉시 확인
- 미통과 시 도구가 권장 색상을 제안
색약 사용자를 위한 색상 선택#
전 세계 인구의 약 8%(남성 기준), 0.5%(여성 기준)가 색각 이상을 가지고 있습니다. 한국 남성의 약 5.9%, 여성의 약 0.4%(질병관리청 통계)가 색각 이상입니다. 색상만으로 정보를 구분하지 않는 것이 핵심입니다.
색약 유형#
| 유형 | 비율(남성 기준) | 특징 |
|---|---|---|
| 적록 색약(Deuteranomaly) | 약 4.5% | 가장 흔함, 빨강↔초록 구분 어려움 |
| 적록 색약(Protanomaly) | 약 1.0% | 빨강 인지 약화 |
| 청황 색약(Tritanomaly) | 약 0.01% | 매우 드묾 |
| 전색맹(Achromatopsia) | 약 0.003% | 색 자체를 못 봄(흑백) |
피해야 할 패턴#
- 빨강/초록만으로 성공/실패 구분: 적록색약에서 동일하게 보임
- 색상 없이 패턴·텍스트·아이콘 보조 없음
- 차트에 6가지 비슷한 색: 구분 어려움
권장 패턴#
- 색상 + 아이콘(체크마크/X) 병행
- 색상 + 텍스트 레이블 병행
- 색상 + 패턴(실선/점선) 병행
- 빨강↔초록 대신 빨강↔파랑 또는 주황↔파랑 사용
색약 친화적 팔레트#
배색 이론(보색·유사색·트라이아드)을 기반으로 접근성을 고려한 팔레트를 만들려면 색상 팔레트 완전 가이드를 함께 참고하세요.
색약 사용자에게도 구분되는 색상 조합:
| 용도 | 권장 색상 | HEX |
|---|---|---|
| 성공/긍정 | 파랑 계열 | #2563EB |
| 경고 | 주황 | #F59E0B |
| 오류 | 빨강 + 굵은 텍스트 | #DC2626 |
| 정보 | 남색 | #1D4ED8 |
| 중립 | 회색 | #6B7280 |
색약 시뮬레이션 도구#
- Chrome DevTools: Rendering 탭 → "Emulate vision deficiencies"(Achromatopsia·Deuteranopia·Protanopia·Tritanopia)
- Firefox 접근성 검사기: 페이지 자동 분석
- Stark(Figma 플러그인): 디자인 단계 시뮬레이션
- Coblis(웹): 이미지 시뮬레이션
다크모드와 색상 대비#
라이트모드와 다크모드는 별도로 검사해야 합니다.
다크모드 흔한 실수#
| 실수 | 명암비 |
|---|---|
| 다크 배경(#0F172A) + 채도 높은 파랑(#2563EB) | 4.55:1(겨우 통과) |
| 다크 배경 + 같은 명도 색 | 1.5:1(실패) |
| 다크 배경 + 회색 텍스트(#6B7280) | 4.0:1(실패) |
다크모드에서는 명도를 끌어올리고 채도를 약간 낮추는 것이 일반 원칙입니다.
/* 라이트모드 */
:root {
--primary: #2563EB; /* 파랑 */
--bg: #FFFFFF;
--text: #111827;
/* 명암비: 17.7:1 ✅ AAA */
}
/* 다크모드 */
[data-theme="dark"] {
--primary: #60A5FA; /* 파랑 명도 +12 */
--bg: #0F172A;
--text: #F1F5F9;
/* 명암비: 16.0:1 ✅ AAA */
}
실무에서 쉽게 적용하는 방법#
디자인 시스템에 명암비 기록#
버튼·카드·폼 등 컴포넌트별로 사용하는 색상 조합의 명암비를 문서화해 두면
신규 디자이너도 기준을 유지할 수 있습니다.
브라우저 개발자 도구 활용#
Chrome DevTools → Elements 패널에서 텍스트 요소 선택 → Styles 탭 color 속성 옆에 색상 미리보기 클릭 → 명암비 자동 표시. 권장 색상까지 제안합니다.
피그마 플러그인#
Figma에서는 다음 플러그인으로 디자인 단계에서 실시간 검사가 가능합니다.
- Stark (가장 인기, 무료/유료)
- A11y - Color Contrast Checker
- Able
- Contrast
CSS color-contrast() 함수#
CSS Color Module Level 5(2023+)는 자동으로 충분한 대비 색상을 선택하는 함수를 제공합니다.
.btn {
background: var(--brand);
color: color-contrast(var(--brand) vs white, black);
}
브랜드 색상의 명도에 따라 흰색 또는 검정 텍스트를 자동 선택합니다. 모던 브라우저(Chrome 119+) 지원.
자동 검사 도구#
- Lighthouse(Chrome DevTools): 페이지 전체 자동 검사
- axe DevTools(브라우저 확장): 더 정밀한 검사
- WAVE(WebAIM): 웹 기반 검사
- Pa11y: CI/CD 파이프라인 통합 가능
빌드 단계에서 자동 검사를 추가하면 회귀 방지에 효과적입니다.
자주 묻는 질문#
Q. 로고, 장식용 이미지도 대비 기준을 지켜야 하나요?
A. WCAG는 순수 장식 목적의 요소(role="presentation" 또는 aria-hidden="true")는 제외합니다. 단, 텍스트가 포함된 이미지(버튼 이미지·인포그래픽 등)는 기준이 적용됩니다.
Q. 플레이스홀더 텍스트도 해당되나요?
A. WCAG 1.4.3 기준상 플레이스홀더도 텍스트이므로 4.5:1 이상을 권장합니다. 많은 사이트가 연한 회색을 쓰지만 접근성상 좋지 않습니다.
Q. 다크모드는 별도로 검사해야 하나요?
A. 네. 라이트·다크 모드 각각 검사해야 합니다. 같은 색상이라도 배경색이 달라지면 명암비가 완전히 바뀝니다.
Q. 한국에서 색상 대비 위반으로 소송이 가능한가요?
A. 가능합니다. 장애인차별금지법 위반으로 시각장애인이 손해배상 청구한 사례(2017년 SK·신세계 등)가 있습니다. 시각장애인 관련 단체의 단체 소송도 증가 추세.
Q. 색상 대비를 지키면서 브랜드 색상도 유지할 수 있나요?
A. 두 가지 전략이 있습니다. ① 브랜드 색상의 명도를 미세 조정해 대비를 확보. ② 텍스트와 직접 접하지 않는 영역(헤더 배경 등)에만 사용하고, 텍스트 위에는 충분한 대비의 보조 색상을 사용.
Q. APCA 새 기준은 언제 적용되나요?
A. APCA(Accessible Perceptual Contrast Algorithm)는 WCAG 3.0의 후보 알고리즘입니다. 2026년 현재 정식 표준이 아니므로 현재는 WCAG 2.2 기준(상대 휘도)을 따라야 합니다.
Q. 큰 텍스트의 정확한 기준은?
A. WCAG는 "18pt 이상" 또는 "14pt 이상 굵게(bold)"를 큰 텍스트로 정의합니다. 한국어 기준 24px(또는 19px bold) 이상이라고 보면 됩니다.
Q. 호버·포커스 상태도 기준이 적용되나요?
A. 네. 호버·포커스 상태에서도 충분한 대비가 유지되어야 합니다. WCAG 2.2의 1.4.11 기준(비텍스트 콘텐츠 대비)이 UI 컴포넌트에 적용됩니다.
색상 대비 도구 활용#
색상 대비 확인 도구에서 전경색·배경색을 입력하면
명암비와 WCAG AA/AAA 통과 여부를 즉시 확인할 수 있습니다. 미통과 시 권장 대체 색상도 제안합니다.
디자인 작업이 더 필요하다면 색상 변환 가이드에서 HEX·RGB·HSL 변환을,
색상 팔레트 완전 가이드에서 배색 이론과 60-30-10 법칙을,
그라디언트 가이드에서 CSS 그라디언트를 확인할 수 있습니다.