5.4.1 색에 무관한 콘텐츠

요구 사항

모든 콘텐츠는 특정 색을 구별할 수 없는 사용자, 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자, 고대비 모드 사용자도 인식할 수 있도록 제공해야 합니다.

• 색으로만 정보 표현 금지 — 고대비·회색조 모드에서는 색이 구분되지 않으므로 색만으로 정보를 주지 않습니다. 색은 시각적 강조 용도로만 씁니다.
• 무늬 등을 함께 사용 — 서로 다른 정보를 무늬, 텍스트, 아이콘으로도 구분하면 고대비·단색 환경과 색각장애 사용자도 구분할 수 있습니다.

개정 내역: 유지 — 2016판 「5.3 색에 무관한 인식」

왜 필요한가요

색의 차이가 정보의 차이를 나타내지 않으므로 색각장애 사용자도 혼동하지 않고, 흑백 화면이나 고대비 모드 사용자도 내용과 구조를 이해할 수 있습니다.

도움받는 사용자

• 색각이상(색맹·색약) 사용자
• 저시력인(고대비·색상 반전 사용자)
• 회색조 모드 사용자

적용 방법

상태(오류, 선택, 필수 등)는 색과 함께 텍스트·아이콘·모양으로도 표시하고, 보조기술에는 상태를 텍스트로 전달합니다.

// 오류: 빨간 테두리 + 오류 문구 + 아이콘
textInputLayout.error = "비밀번호는 8자 이상이어야 합니다."
// 선택 상태: 색 + 체크 아이콘 + 상태 노출
tabView.isSelected = true   // TalkBack: "선택됨"

segmentButton.accessibilityTraits.insert(.selected)   // VoiceOver: "선택됨"
errorLabel.text = "⚠ 비밀번호는 8자 이상이어야 합니다."

사례

[이름] ← 레이블이 빨간색이면 필수

[이름 (필수)] 또는 [이름 *] + 화면 상단 "* 표시는 필수 항목입니다"

자주 하는 실수

• 그래프 계열을 색으로만 구분하고 범례 텍스트나 무늬가 없습니다.
• 선택된 탭이나 날짜를 색으로만 표시합니다.
• 입력 오류를 테두리 색 변화로만 알립니다.

검사 방법

• 기기의 회색조(색상 보정·흑백) 모드를 켜고 모든 정보가 구분되는지 확인합니다.
• 색으로 표현한 상태가 TalkBack·VoiceOver에서 텍스트로 낭독되는지 확인합니다.

다른 지침의 대응 항목