선택을 색 말고 형태로도

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

0. 들어가며 — 어느 게 선택됐는지

이번 405편은 라디오 버튼 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하라는 규칙 입니다.

라디오 버튼에서 — 선택된 옵션을 색만으로 표시하면(선택된 버튼만 색이 바뀜), 색을 못 보는 사용자는 어느 게 선택됐는지 모르죠. CP-285는 선택 상태를 색 외 단서(채워진 점 등)로도 구분하라고 규정합니다. 달력 CP-165, 배지 CP-186, 탭 CP-234, 링크 CP-256에서 반복된 ’색 무관 인식’의 라디오 버전이죠. 이번 편을 풀어냅니다.

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

CP-285 (컴포넌트 > 라디오 버튼) “버튼 양식의 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하고 있다.”

라디오 버튼의 선택/미선택 상태를 색뿐 아니라 형태(채워진 점 등) 같은 색 외 단서로도 구분되게 해, 색을 못 보는 사용자도 선택 상태를 알게 하라는 뜻입니다.

정리: 라디오 버튼 선택 상태를 색 외 단서(형태)로도 구분하라. 이게 CP-285입니다.

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

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

선택 상태를 색만으로 표시하는 문제. 라디오 버튼에서 ’어느 옵션이 선택됐는가’는 — 사용자가 자기 선택을 확인하는 핵심 정보입니다. 그런데 이를 색만으로 표시하면(예: 선택된 버튼만 동그라미가 파란색):

색각 이상 사용자 — 선택된 파란 버튼과 미선택 회색 버튼의 색 차이를 못 구별해, 어느 게 선택됐는지 모르죠.

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

선택 상태를 모르면 — 사용자는 자기가 무엇을 선택했는지 확인 못 하고, 잘못 선택하거나 혼란스럽죠.

그래서 CP-285는 — 선택 상태를 색 외 단서로도 구분하라고 합니다. 다행히 — 라디오 버튼의 표준 시각 형태가 이미 색 외 단서를 가집니다:

채워진 점(●) vs 빈 동그라미(○) — 선택된 라디오 버튼은 동그라미 안에 채워진 점(●) 이 있고, 미선택은 빈 동그라미(○) 죠. 이 ’채움/빔’의 형태 차이 가 — 색을 못 봐도 ’점이 있는 게 선택됨’을 알게 합니다. 이것이 라디오 버튼의 기본 색 외 단서입니다.

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

포커스 상태도. 선택 상태에 더해 — 키보드 포커스 상태(CP-286)도 색 외 단서로 구분돼야 하죠. 선택(채움)과 포커스(외곽선)를 다른 형태로 표현해 구별합니다(탭 초점-선택 구별 CP-236, 달력 CP-168 정신).

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

이 규칙은 라디오 버튼의 ’선택 상태 인지’를 담당합니다 — 선택을 색만이 아닌 형태로 구분해, 색을 못 보는 사용 자도 자기 선택을 확인하게 하죠.

정리하면 — 라디오 버튼 선택 상태를 색만으로 표시하면 색맹·흑백 환경 사용자가 못 구별하므로, 채워진 점/빈 동그라미 같은 형태 차이(색 외 단서)로 선택 상태를 구분해야 합니다.

3. 점검 / 개선

무엇을 점검하나

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

표준 형태 유지 — 커스텀 디자인에서 ‘채움/빔’ 형태 차이가 없어지지 않았는가.

포커스 구분 — 선택과 포커스가 다른 형태로 구별되는가(CP-286).

개선 방향

선택은 채워진 점(●), 미선택은 빈 동그라미(○)로 형태 구분 유지. 색은 보조.

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

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

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

기관 유형	CP-285 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (라디오 버튼 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택 상태가 색뿐 아니라 형태(채움/빔) 로 구분되나요(회색조로 봐도 구별)?

□ 커스텀 디자인에서 ‘채움/빔’ 형태 차이가 없어지지 않았나요?

□ 선택과 포커스가 다른 형태로 구별되나요?

❓ FAQ

Q1. 선택된 버튼만 색을 바꾸면 안 되나요? 색만으론 색각 이상 사용자가 구별 못 합니다. 채움/빈 동그라미 형태 차이를 유지해야 하죠. Q2. 표준 라디오 버튼은 자동으로 되나요? 네. 표준 라디오는 채움(●)/빔(○) 형태 차이가 기본입니다. 커스텀할 때 이를 없애지 않도록 주의하죠. Q3. CP-284와 뭐가 다른가요? CP-284는 버튼이 보이는가(대비), CP-285는 선택 상태를 색 외로 구분입니다. 함께 적용하죠.

6. 마무리

CP-285의 메시지:

선택을 색 말고 형태로도 — 선택 상태를 색 외 단서(채움/빔)로 구분하라.

선택 상태를 색만으로 표시하면 색맹·흑백 환경 사용자가 못 구별합니다. 채워진 점/빈 동그라미 형태 차이로 선택을 구분하면 색을 못 봐도 알죠. 표준 라디오의 형태 차이를 유지하는 게 핵심입니다. 다음 편은 키보드 탐색·초점입니다.

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

ViewCheck는 라디오 버튼 선택 상태가 색 외 단서로 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 라디오 버튼(Radio button) 가이드 — https://www.krds.go.kr/html/site/component/component_26.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컴포넌트,웹표준