체크를 색 말고 형태로도

KRDS CP-294 — 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하고 있다.

0. 들어가며 — 체크됐는지 색으로만 알면

이번 414편은 체크박스 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하라는 규칙입니다.

체크박스에서 — 체크된 상태를 색만으로 표시하면(체크된 박스만 색이 바뀜, ✓ 없이), 색을 못 보는 사용자는 어느 게 체크됐는지 모르죠. CP-294는 선택 상태를 색 외 단서(체크 표시 ✓ 등)로도 구분하라고 규정합니다. 라디오 CP-285와 평행하며, ‘색 무관 인식’(WCAG 1.4.1)의 체크박스 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 선택 상태 색 외 단서

CP-294 (컴포넌트 > 체크박스) “선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하고 있다.”

체크박스의 선택/미선택 상태를 색뿐 아니라 형태(체크 표시 등) 같은 색 외 단서로도 구분되게 해, 색을 못 보는 사용자도 선택 상태를 알게 하라는 뜻입니다.

정리: 체크박스 선택 상태를 색 외 단서(체크 표시)로도 구분하라. 이게 CP-294입니다.

2. 왜 색 외 단서가 필요한가

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

선택 상태를 색만으로 표시하는 문제. 체크박스에서 ’어느 옵션이 선택(체크)됐는가’는 — 사용자가 자기 선택을 확인하는 핵심 정보입니다. 그런데 이를 색만으로 표시하면(예: 체크된 박스만 파란색, ✓ 표시 없이):

색각 이상 사용자 — 체크된 파란 박스와 미체크 회색 박스의 색 차이를 못 구별해, 어느 게 체크됐는지 모르죠.

저시력·흑백 환경 — 색 차이가 안 보여 선택 상태를 인지 못 합니다.

선택 상태를 모르면 — 자기가 무엇을 켰는지 확인 못 하고, 잘못 선택하거나 혼란스럽죠. 다중 선택(CP-289)이라 여러 개의 상태를 봐야 해서 더 중요합니다.

그래서 CP-294는 — 선택 상태를 색 외 단서로도 구분하라고 합니다. 다행히 — 체크박스의 표준 시각 형태가 이미 색 외 단서를 가집니다:

체크 표시(✓) vs 빈 네모(☐) — 체크된 체크박스는 네모 안에 체크 표시(✓) 가 있고, 미체크는 빈 네모(☐) 죠. 이 ‘✓ 유무’의 형태 차이 가 — 색을 못 봐도’✓ 있는 게 체크됨’을 알게 합니다. 이것이 체크박스의 기본 색 외 단서입니다.

중간 상태(−) — ’전체 선택’의 중간 상태(CP-292)도 가로 줄(−)이라는 형태로 구분되죠. 체크(✓)/중간(−)/빈 것(☐) 세 형태가 색 없이도 구별됩니다.

핵심은 — 이 형태 차이를 없애거나 약화하지 않는 것입니다. 디자인을 커스텀하면서 — 선택 상태를 ’색만 바뀌고 ✓ 표시는 없음’으로 만들면 색 외 단서가 사라지죠. 표준 체크박스의 ✓ 표시를 유지하거나, 커스텀이면 그에 준하는 명확한 형태 차이(✓·채움 등)를 줘야 합니다. 색은 보조로 더하되, 형태가 주된 구분이어야 하죠.

포커스 상태도. 선택 상태에 더해 — 키보드 포커스 상태(CP-295)도 색 외 단서로 구분돼야 하죠. 선택(✓)과 포커스 (외곽선)를 다른 형태로 표현해 구별합니다(라디오 CP-285, 탭 CP-236 정신).

CP-293과의 관계. CP-293(양식·아이콘 대비 3:1)은 ‘체크박스가 보이는가’, CP-294(색 외 선택 구분)는 ’선택 상태가 색 무관하게 구분되는가’입니다. 함께 — 체크박스가 또렷이 보이고(293), 선택 상태가 색맹에게도 구분(294) 되어, 모든 사용자가 컨트롤을 인지·사용하죠. 그리고 시각 구분에 더해 — 스크린 리더에도 선택 상태가 전달돼야 합니다(표준 체크박스 + 레이블, CP-296). 색맹(294)·전맹(296) 모두 배려하죠.

이 규칙은 체크박스의 ’선택 상태 인지’를 담당합니다 — 선택을 색만이 아닌 형태(✓)로 구분해, 색을 못 보는 사용자도 자기 선택을 확인하게 하죠.

정리하면 — 체크박스 선택 상태를 색만으로 표시하면 색맹·흑백 환경 사용자가 못 구별하므로, 체크 표시(✓)/빈 네모 같은 형태 차이(색 외 단서)로 선택 상태를 구분해야 합니다.

3. 점검 / 개선

무엇을 점검하나

색 외 단서 — 선택 상태가 색뿐 아니라 형태(✓ 유무)로 구분되는가(회색조로 봐도 구별).

표준 형태 유지 — 커스텀 디자인에서 ✓ 표시가 없어지지 않았는가.

3상태·포커스 — 체크/중간/빈 것, 선택/포커스가 형태로 구별되는가.

개선 방향

체크는 ✓ 표시, 미체크는 빈 네모로 형태 구분 유지. 색은 보조.

커스텀이면 명확한 형태 차이(✓·채움). 회색조 검증.

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

역할	책임
디자이너	선택 상태 색 외 단서(형태) 정의
퍼블리셔/개발	형태 차이 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택 상태가 색뿐 아니라 형태(✓ 유무) 로 구분되나요(회색조로 봐도 구별)?

□ 커스텀 디자인에서 ✓ 표시가 없어지지 않았나요?

□ 체크/중간/빈 것, 선택/포커스가 형태로 구별되나요?

❓ FAQ

Q1. 체크된 박스만 색을 바꾸면 안 되나요? 색만으론 색각 이상 사용자가 구별 못 합니다. ✓ 표시 형태 차이를 유지해야 하죠. Q2. 표준 체크박스는 자동으로 되나요? 네. 표준 체크박스는 ✓ 유무 형태 차이가 기본입니다. 커스텀할 때 이를 없애지 않도록 주의하죠. Q3. CP-293과 뭐가 다른가요? CP-293은 체크박스가 보이는가(대비), CP-294는 선택 상태를 색 외로 구분입니다. 함께 적용하죠.

6. 마무리

CP-294의 메시지:

체크를 색 말고 형태로도 — 선택 상태를 색 외 단서(✓ 유무)로 구분하라.

선택 상태를 색만으로 표시하면 색맹·흑백 환경 사용자가 못 구별합니다. 체크 표시(✓)/빈 네모 형태 차이로 선택을 구분하면 색을 못 봐도 알죠. 표준 체크박스의 ✓ 표시를 유지하는 게 핵심입니다. 다음 편은 키보드 탐색·초점입니다.

다음 편 예고 ▶ 「415. (CP-295) 체크박스를 키보드로 탐색하고 실행할 수 있으며, 키보드 초점이 명확하게 표시되게 구현하고 있다.」

ViewCheck는 체크박스 선택 상태가 색 외 단서로 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 체크박스(Checkbox) 가이드 — https://www.krds.go.kr/html/site/component/component_27.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컴포넌트,웹표준