5.4.1 색에 무관한 콘텐츠 인식

요구 사항

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

• 색에 의한 정보 표현 방지: 고대비 모드에서는 색이 단색(회색조)으로 바뀌므로 색만으로 정보를 전달하지 않습니다. 색은 시각적 강조에만 사용합니다.
• 무늬를 이용한 정보 제공: 서로 다른 정보를 무늬·패턴으로도 구분하면 고대비·흑백 환경에서도 구분할 수 있습니다.

KWCAG 2.1의 해당 항목: 5.3.1 색에 무관한 콘텐츠 인식(5.3 명료성 지침)

왜 필요한가요

색각이상이 있는 사용자는 빨강과 초록처럼 특정 색을 구분하기 어렵고, 저시력 사용자는 고대비 모드에서 원래 색을 볼 수 없습니다. 색 외에 텍스트·모양·무늬를 함께 쓰면 모두가 같은 정보를 얻습니다.

도움받는 사용자

• 색각이상(색맹·색약)이 있는 사용자
• 저시력 사용자(고대비 모드)
• 흑백 디스플레이·흑백 인쇄물 사용자
• 고령자

적용 방법

오류·필수·선택 상태처럼 의미가 있는 색에는 텍스트, 아이콘, 무늬, 밑줄 같은 두 번째 단서를 함께 둡니다. 본문 속 링크는 색만으로 구분하지 말고 밑줄을 유지합니다.

<!-- 오류: 빨간 테두리 + 아이콘 + 문장 -->
<label for="email">이메일</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err" class="error"><span aria-hidden="true">⚠</span> 이메일 형식이 올바르지 않습니다.</p>

<!-- 그래프: 색 + 무늬 + 데이터 레이블 -->
<svg role="img" aria-label="지역별 비율: 서울 40%, 부산 35%, 기타 25%">…</svg>

사례

<button role="tab" aria-selected="true" class="tab is-active">공지</button>

<label for="name" style="color:red">이름</label>

자주 하는 실수

• 그래프·지도 범례를 색으로만 구분합니다.
• 필수 입력이나 오류 항목을 글자색·테두리색으로만 표시합니다.
• 본문 링크의 밑줄을 없애고 글자색으로만 구분합니다.
• 현재 페이지·선택 상태를 배경색만 바꿔 표시합니다.

검사 방법

• 색으로 정보를 구분하는 요소(범례, 상태 표시, 링크, 오류)를 찾습니다.
• 브라우저의 회색조 필터나 Windows 고대비 모드에서 같은 정보를 구분할 수 있는지 확인합니다.
• 색 외에 텍스트·모양·무늬 등 다른 단서가 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목