색 말고 번호·형태로도

KRDS CP-326 — 단계 식별자를 색상으로만 구분하여 표현하지 않고 있다.

0. 들어가며 — 색만으로 완료/현재를 가르면

이번 446편은 단계 식별자를 색상으로만 구분하여 표현하지 않게 하라는 규칙입니다.

단계 표시기에서 — 완료·현재·예정 단계를 색만으로 구분하면(완료=초록, 현재=파랑, 예정=회색), 색을 못 보는 사용자는 어느 게 완료인지 현재인지 모르죠. CP-326은 단계 상태를 색 외 단서(번호·체크·형태)로도 구분하라고 규정합니다. 달력 CP-165, 배지 CP-186, 라디오 CP-285의 단계 표시기 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 색상만으로 구분 금지

CP-326 (컴포넌트 > 단계 표시기) “단계 식별자를 색상으로만 구분하여 표현하지 않고 있다.”

단계의 상태(완료·현재·예정)를 색만으로 구분하지 말고, 번호·형태·아이콘 등 색 외 단서를 함께 제공하라는 뜻입니다.

정리: 단계 상태를 색만으로 구분하지 마라. 이게 CP-326입니다.

2. 왜 색 외 구분인가

이는 웹 접근성의 핵심 원칙 ‘색에 무관한 인식’(KWCAG, WCAG SC 1.4.1) 의 단계 표시기 적용입니다. 정보를 색만으로 전달하면, 색을 구별하기 어려운 사용자에게 전달되지 않죠(달력 CP-165, 배지 CP-186, 라디오 CP-285, 체크박스 CP-294, 태그 CP-311에서 반복).

단계 상태를 색만으로 구분할 때:

단계 표시기는 — 완료·현재·예정 세 상태를 구별해 보여줍니다(CP-322). 이걸 색만으로 표시하면(완료=초록 원, 현재=파란 원, 예정=회색 원, 모두 같은 형태):

색각 이상 사용자 — 초록·파랑·회색의 색 차이를 못 구별해, 어느 단계가 완료고 현재인지 모릅니다. 자기 진행 위치(CP-322)를 색으로만 알리면 — 못 알죠.

저시력·흑백 환경 — 색 차이가 안 보여 단계 상태를 구별 못 합니다.

진행 위치를 모르면 — 단계 표시기의 핵심 정보(어디까지 왔나)를 잃죠.

그래서 CP-326은 — 단계 상태를 색 외 단서로도 구분하라고 합니다. 단계 표시기의 표준 디자인이 이미 여러 색 외 단서를 갖죠:

번호 — 각 단계 원 안에 숫자(1, 2, 3…) 를 넣으면 — 색 없이도 순서를 압니다. 단계 식별자로 번호는 기본 적인 색 외 단서죠.

완료 표시(체크 ✓) 완료한 단계는 번호 대신 체크 표시(✓) 를 넣어 색 없이도 ’완료됨’을 알립니다. 완료(✓)/현재(번호 강조)/예정(번호 흐림)이 형태로 구별되죠.

형태·굵기·테두리 — 현재 단계를 — 더 큰 원·굵은 테두리·채움 등 형태로 강조(CP-322). 색에 더해 형태로요.

현재 위치 표시 — 현재 단계에 — 추가 마커(화살표·강조선)를 둬 색 없이도 ’여기’를 알립니다.

핵심은 — 색을 보조로 쓰되, 번호·체크·형태라는 색 외 단서로 상태를 구별하는 것입니다. 표준 단계 표시기는 번호와 완료 체크를 갖춰 — 대체로 색 외 구분이 되죠. 커스텀하면서 이를 없애지 않게 주의합니다.

CP-322와의 관계. CP-322(현재 단계 명확 표현)와 CP-326(색만 구분 금지)은 함께 갑니다 — 현재 단계를 명확히 하되(322), 그 구별을 색만이 아닌 형태·번호로 하라(326)는 거죠. 둘이 합쳐져 모든 사용자가 진행 위치를 압니다.

스크린 리더는 별도(CP-327). 시각적 색 외 구분(326)에 더해 — 스크린 리더 사용자에겐 aria-current="step"으로 현재를 전합니다(CP-327). 색맹(326)·전맹(327) 모두 배려하죠.

이 규칙은 단계 표시기의 ’색 무관 상태 인지’를 담당합니다 — 단계 상태를 번호·체크·형태로 구분해(326), 색을 못 보는 사용자도 완료·현재·예정을 알게 하죠.

정리하면 — 단계 상태를 색만으로 구분하면 색맹·흑백 환경 사용자가 진행 위치를 모르므로, 번호·완료 체크·형태 같은 색 외 단서로 단계 식별자를 구분해야 합니다.

3. 점검 / 개선

무엇을 점검하나

색 외 단서 — 단계 상태가 색뿐 아니라 번호·체크·형태로 구분되는가(회색조로 봐도 구별).

완료 표시 — 완료 단계가 체크(✓) 등 형태로 표시되는가.

현재 형태 강조 — 현재 단계가 색 외(굵기·크기·마커)로도 강조되는가(CP-322).

개선 방향

단계 원에 번호, 완료는 체크(✓), 현재는 형태 강조. 색은 보조.

회색조로 봐도 완료·현재·예정 구별되게. 스크린 리더는 aria-current(CP-327).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	단계 상태 색 외 단서(번호·체크·형태) 정의
퍼블리셔/개발	색 외 단서 구현

기관 유형	CP-326 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (단계 표시기 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 단계 상태가 색뿐 아니라 번호·체크·형태로 구분되나요(회색조로 봐도 구별)?

□ 완료 단계가 체크(✓) 등 형태로 표시되나요?

□ 현재 단계가 색 외(굵기·크기·마커)로도 강조되나요?

❓ FAQ

Q1. 완료=초록, 현재=파랑으로 하면 안 되나요? 색만으론 색각 이상 사용자가 구별 못 합니다. 번호·체크·형태를 함께 써야 하죠. Q2. 표준 단계 표시기는 자동으로 되나요? 번호와 완료 체크를 갖추면 대체로 색 외 구분이 됩니다. 커스텀할 때 이를 없애지 않도록 주의하죠. Q3. CP-322와 뭐가 다른가요? CP-322는 ‘현재 단계가 명확한가’, CP-326은 ’그 구별이 색만이 아닌가’입니다. 함께 적용하죠.

6. 마무리

CP-326의 메시지:

색 말고 번호·형태로도 — 단계 식별자를 색상만으로 구분하지 마라.

단계 상태를 색만으로 구분하면 색맹·흑백 환경 사용자가 진행 위치를 모릅니다. 번호·완료 체크·형태로 구분하면 색을 못 봐도 알죠. 표준 단계 표시기의 번호·체크를 유지하는 게 핵심입니다. 다음 편은 현재 단계의 스크린 리더 확인입니다.

다음 편 예고 ▶ 「447. (CP-327) 현재 단계를 스크린 리더로 확인할 수 있도록 하고 있다.」

ViewCheck는 단계 식별자가 색 외 단서로 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 단계 표시기(Step indicator) 가이드 — https://www.krds.go.kr/html/site/component/component_31.html

WCAG 2.1 SC 1.4.1 Use of Color — https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준