Ch.5 60:30:10 법칙
접근성과 WCAG 대비율
전 세계 남성 12명 중 1명은 당신이 보는 색을 다르게 봅니다
빨간 에러 메시지를 넣었는데, 사용자가 못 봤다고 항의합니다. 회색 배경 위 밝은 회색 텍스트가 읽히지 않는다는 민원도 들어옵니다.
예쁜 색상 조합이 왜 특정 사용자에게는 보이지 않을까?
WCAG 대비율 기준과 색각 이상 대응 — 접근 가능한 디자인의 두 가지 핵심 축입니다.
핵심 내용
색상 대비란 '읽힐 수 있는가'의 문제입니다
WCAG(Web Content Accessibility Guidelines)는 웹 접근성의 국제 표준입니다. 색상 대비율은 전경색과 배경색의 밝기 차이를 1:1 ~ 21:1 범위의 숫자로 표현합니다.
대비율 1:1 = 동일한 색 (읽기 불가) / 21:1 = 검정 위 흰색 (최대 대비)
실무 팁: 대비율 체크 도구 • Chrome DevTools → Elements → Styles → 색상 위 hover → 대비율 자동 표시 • WebAIM Contrast Checker (웹) — 두 색상 입력 → 즉시 AA/AAA 판정 • Figma 플러그인: Stark, A11y — 디자인 단계에서 검증
색상만으로 정보를 전달하면 8%의 남성 사용자가 놓칩니다
색각 이상(Color Vision Deficiency)은 특정 색상을 구분하지 못하는 시각 특성입니다. 남성의 약 8%, 여성의 약 0.5%가 해당하며, 정도에 따라 3가지 주요 유형이 있습니다.
색각 이상 3대 유형
핵심 원칙: 색상만으로 정보를 전달하지 마라 (Don't rely on color alone)
시뮬레이션 도구: Chrome DevTools → Rendering → Emulate vision deficiencies 에서 실시간 확인 가능
다크 모드는 '색 반전'이 아니라 '재설계'입니다
단순히 흰색 → 검정, 검정 → 흰색으로 바꾸면 눈이 아프고 계층이 무너집니다. 다크 모드는 별도의 배색 전략이 필요합니다.
색 항상성(Color Constancy) 개념 인간의 뇌는 조명이 바뀌어도 물체의 색이 '같다'고 인식하려 합니다. 이를 색 항상성이라 합니다. 다크 모드에서 브랜드 컬러의 채도·명도를 조절해도, 사용자는 '같은 브랜드'로 인식합니다. 이 인지 특성 덕분에 다크 모드 전용 팔레트가 가능한 것입니다.
WCAG AA 기준에서 일반 본문 텍스트(16px 미만)의 최소 대비율은?
색각 이상 사용자를 위해 에러 메시지는 빨간색 텍스트만으로 충분하다
다크 모드에서 순수 검정(#000000) 배경을 피하는 이유로 가장 적절한 것은?
핵심 용어
AA 일반 텍스트
4.5:1 이상 — 본문 텍스트(16px 미만)의 최소 기준
AA 큰 텍스트
3:1 이상 — 18px 이상 또는 14px Bold 텍스트
AAA 일반 텍스트
7:1 이상 — 강화 기준. 저시력 사용자까지 포괄
AAA 큰 텍스트
4.5:1 이상 — 큰 텍스트의 강화 기준
비텍스트 요소
3:1 이상 — 아이콘, 입력 필드 테두리, 그래프 요소
아이콘 병행
성공(✓ 초록) + 실패(✗ 빨강) → 색 없이도 구분 가능
패턴/텍스처
차트에서 색상 + 빗금/점선 패턴 병행 → 흑백 인쇄에도 구분
텍스트 레이블
그래프 범례를 색상 점 대신 직접 레이블로 표기
명도 차이 확보
색상(Hue)이 같더라도 명도(Lightness) 차이가 크면 구분 가능
비교 정리
| 항목 | 올바른 다크 모드 | 단순 색 반전 |
|---|---|---|
| 배경 | 짙은 회색(#1A1A2E) — 순수 검정 피함 | 순수 검정(#000000) — 눈의 피로 유발 |
| 텍스트 | 밝은 회색(#E0E0E0) — 부드러운 대비 | 순수 흰색(#FFFFFF) — 글자가 번져 보임 |
| 고도(Elevation) | 높은 요소일수록 약간 밝은 배경 → 계층 표현 | 그림자로만 고도 표현 → 다크 배경에서 안 보임 |
| 강조색 | 채도를 낮추고 명도를 올린 pastel 톤 사용 | 라이트 모드와 동일한 채도 → 눈부심 |
다크 모드는 라이트 모드의 반전이 아니라, 별도의 색상 시스템으로 설계해야 한다
핵심 정리
- 1WCAG AA: 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상
- 2WCAG AAA: 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상
- 3색각 이상 3유형: 적색맹, 녹색맹, 청색맹 — 남성 8% 해당
- 4핵심 원칙: 색상만으로 정보 전달 금지 → 아이콘·텍스트·패턴 병행
- 5다크 모드: 단순 반전 X → 짙은 회색 배경 + pastel 강조색 + 고도별 명도 차이
- 6색 항상성: 조명/모드가 바뀌어도 뇌는 같은 색으로 인식하려 함
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작