5.4.3 콘텐츠의 명도대비

요구 사항

• 텍스트 콘텐츠 — 콘텐츠와 배경 간 명도대비 4.5:1 이상.
• 텍스트 콘텐츠(큰 글자) — 3:1 이상. 큰 글자는 14pt 이상 굵은 글자 또는 18pt 이상인 글자를 말합니다.
• 텍스트 아닌 콘텐츠 — 화면의 모든 사용자 인터페이스 컴포넌트(버튼 테두리, 입력창 경계, 아이콘 등)와 의미 있는 그래픽은 전경색과 배경색 간 명도대비 3:1 이상.

개정 내역: 강화 — 2016판 「5.4 명도 대비」

2016판은 UI 컴포넌트와 텍스트의 전경·배경 구분을 요구했고, 2025판은 텍스트와 텍스트 아닌 콘텐츠의 수치 기준을 WCAG 1.4.3·1.4.11에 맞춰 명시했습니다.

왜 필요한가요

저시력 시각장애인과 고령자, 밝은 야외에서 화면을 보는 사용자가 정보를 쉽게 인식할 수 있습니다.

도움받는 사용자

• 저시력인
• 고령자
• 색각이상 사용자
• 햇빛 아래 등 열악한 환경의 사용자

적용 방법

디자인 단계에서 색 조합의 대비를 계산해 토큰으로 관리하고, 다크 모드에서도 같은 기준을 지킵니다. 비활성(disabled) 컴포넌트와 순수 장식은 기준에서 흔히 제외되지만, 플레이스홀더나 보조 문구는 텍스트이므로 기준이 적용됩니다.

<!-- colors.xml: 대비를 검증한 색 토큰 -->
<color name="text_primary">#1F1F1F</color>   <!-- 흰 배경 대비 약 16:1 -->
<color name="text_secondary">#5F6368</color> <!-- 흰 배경 대비 약 6.0:1 -->
<color name="outline">#79747E</color>        <!-- 흰 배경 대비 약 4.6:1 (UI 3:1 충족) -->

// 사용자가 '대비 증가'를 켰을 때 더 진한 색을 제공
let color = UIAccessibility.isDarkerSystemColorsEnabled ? UIColor.label : brandGray
// 에셋 카탈로그에서 High Contrast 변형 색을 지정할 수도 있습니다.

사례

텍스트 #AAAAAA / 배경 #FFFFFF → 약 2.3:1 (기준 4.5:1 미달)

텍스트 #595959 / 배경 #FFFFFF → 약 7.0:1

자주 하는 실수

• 플레이스홀더, 안내 문구, 비활성처럼 보이는 일반 텍스트의 대비가 4.5:1에 못 미칩니다.
• 입력창 테두리나 아이콘 버튼의 대비가 3:1 미만이라 위치를 알 수 없습니다.
• 이미지 위에 올린 글자가 배경에 따라 대비가 낮아집니다.

검사 방법

• 주요 화면을 캡처해 색상 대비 분석 도구로 텍스트(4.5:1, 큰 글자 3:1)와 UI 컴포넌트·그래픽(3:1)을 측정합니다.
• Android Accessibility Scanner의 대비 검사 결과를 확인하고, 이미지 위 텍스트는 직접 측정합니다.
• 다크 모드와 고대비 설정에서도 기준을 충족하는지 확인합니다.

다른 지침의 대응 항목