색에 무관한 콘텐츠 인식

무엇을 요구하나요?

정보를 색으로만 구분해서 전달하지 않아야 합니다. 색을 구별하기 어려운 사용자(색각 이상), 흑백으로 인쇄하는 사용자, 화면 낭독기 사용자는 색 차이를 알 수 없습니다.

자주 틀리는 예

1. 본문 속 링크를 색으로만 구분

.article a { color: #1b64da; text-decoration: none; }

.article a { color: #1b64da; text-decoration: underline; text-underline-offset: 3px; }

메뉴처럼 링크라는 것이 위치로 분명한 경우는 괜찮지만, 문장 속 링크는 밑줄 등 색 외의 표시가 있어야 합니다.

2. 오류 칸을 빨간 테두리로만 표시

<input id="email" class="error">

<input id="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err" class="error-msg">✕ 이메일 형식이 올바르지 않습니다.</p>

3. 선택된 탭을 색으로만 표시

.tab.active { background: #1b64da; color: #fff; }

.tab[aria-selected="true"] { background: #1b64da; color: #fff; font-weight: 700; box-shadow: inset 0 -3px 0 #fff; }

굵기·밑줄 같은 색 외의 차이를 주고, aria-selected로 프로그램에도 알려주세요.

4. 그래프를 색 범례로만 구분

선 그래프·원 그래프를 색으로만 구분하면 어떤 선이 어떤 값인지 알 수 없습니다. 선마다 점 모양(●▲■)이나 선 무늬(실선·점선)를 다르게 하고, 선 끝에 이름을 직접 적거나 데이터 표를 함께 제공하세요.

확인하는 방법

1. 화면을 흑백으로 보거나(운영체제의 회색조 설정), 크롬 개발자 도구의 색각 이상 시뮬레이션을 켜고 모든 정보를 구분할 수 있는지 확인하세요.
2. 필수 표시, 오류, 선택 상태, 링크, 그래프를 특히 살펴보세요.
3. 자동 검사(axe)는 본문 속 링크가 밑줄 없이 색으로만 구분되고 주변 글자와 색 차이도 작은 경우를 찾아줍니다. 색 차이가 큰 링크는 통과로 나오므로 밑줄 여부는 직접 확인하고, 나머지는 수동 점검표로 확인하세요.