스위치가 보여야 켜고 끈다

KRDS CP-316 — 경로, 핸들, 상태 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.

0. 들어가며 — 스위치가 안 보이면

이번 436편은 토글의 경로(트랙)·핸들·상태 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하라는 규칙입니다.

토글 스위치의 시각 요소는 — 핸들이 움직이는 길인 경로(트랙), 움직이는 동그란 핸들, 그리고 켜짐/꺼짐을 나타내는 상태 아이콘입니다. 이들이 배경과 대비가 낮아 흐릿하면 — 사용자는 스위치가 있는지, 켜졌는지 모르죠. CP-316은 이 세 요소의 명도 대비를 3:1 이상으로 확보하라고 규정합니다. 라디오 CP-284, 셀렉트 CP-302의 토글 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 경로·핸들·상태 아이콘 대비 3:1 이상

CP-316 (컴포넌트 > 토글 스위치) “경로, 핸들, 상태 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.”

토글 스위치의 경로(트랙)·핸들·상태 아이콘이 인접 배경과 명도 대비 3:1 이상이 되게 해, 스위치와 그 상태가 또렷이 보이게 하라는 뜻입니다.

정리: 토글 경로·핸들·상태 아이콘을 배경과 3:1 이상 대비로 또렷이 보이게 하라. 이게 CP-316입니다.

2. 왜 명도 대비 3:1인가

토글 스위치의 시각 구성은 — ①경로(트랙): 핸들이 좌우로 움직이는 길(알약 모양 배경), ②핸들: 그 위에서 움직이는 동그란 손잡이, ③상태 아이콘: 켜짐/꺼짐을 나타내는 추가 표시(체크/X, I/O 등, 있는 경우)입니다. 사용자가 — ’여기 스위치가 있고, 켜졌는지’를 보려면, 이 요소들이 배경과 충분히 구별돼 또렷이 보여야 하죠.

요소가 흐릿할 때:

스위치 인지 실패 경로(트랙)가 배경과 거의 같은 밝기면, 스위치가 거기 있는지 모릅니다. 핸들도 연하면 컨트롤 자체가 안 보이죠.

상태 판단 어려움 켜짐/꺼짐은 핸들 위치(왼쪽/오른쪽)와 경로 색으로 표현됩니다. 핸들·경로가 흐릿하면 핸들이 어디 있는지, 어느 게 켜진 상태인지 구별이 안 되죠.

상태 아이콘 안 보임 — 상태 아이콘(체크/X 등)이 있으면 — 그것도 대비가 낮으면 안 보여 상태 보조 신호를 잃습니다.

저시력·밝은 환경 — 저시력 사용자·밝은 화면에서 더욱 안 보이죠.

이는 — 비텍스트 대비(Non-text Contrast) 의 문제입니다(WCAG SC 1.4.11). UI 컴포넌트(토글의 트랙·핸들)와 상태를 나타내는 시각 요소(상태 아이콘)가 인접 배경과 최소 3:1의 명도 대비를 가져야 하죠. 토글 요소는 텍스트가 아니라 UI 그래픽이라 비텍스트 대비(3:1)가 적용됩니다(라디오 CP-284, 체크박스 CP-293, 셀렉트 CP-302 정신).

그래서 CP-316은 — 세 요소를 3:1 이상으로 확보하라고 합니다:

경로(트랙) — 트랙이 인접 배경(페이지 배경)과 3:1 이상. 스위치 영역이 또렷이 보이게.

핸들 — 핸들이 트랙·배경과 충분히 구별돼 위치(좌/우)가 보이게.

상태 아이콘 — 있으면 그 배경과 3:1 이상.

켜짐/꺼짐 양쪽 상태. 켜짐(보통 색 트랙 + 핸들 오른쪽)과 꺼짐(보통 회색 트랙 + 핸들 왼쪽) 둘 다에서 요소가 보여야 하죠. 특히 — 꺼짐 상태의 회색 트랙이 너무 연하면 스위치가 안 보이니, 꺼짐 상태 대비도 중요합니다.

색에만 의존 안 됨. 명도 대비(316)는 ’요소가 보이는가’를 다룹니다. 켜짐/꺼짐 상태는 — 색(켜짐=파랑)뿐 아니라 핸들 위치(좌/우)라는 형태로도 구분되므로, 토글은 본래 색 외 단서(위치)를 갖죠. 상태 아이콘(체크/X)을 더하면 색 무관 구분이 더 강해집니다.

이 규칙은 토글 스위치의 ’시각적 가시성’을 담당합니다 — 레이블·레이아웃(312~315)에 더해, 스위치 요소가 또렷이 보이게(316) 해, 사용자가 컨트롤과 상태를 인지하게 하죠. 저시력·밝은 환경 모두에게 이롭습니다.

정리하면 — 토글의 경로·핸들·상태 아이콘이 흐릿하면 스위치와 그 상태를 인지 못 하므로, 인접 배경과 비텍스트 대비 3:1 이상을 확보해 켜짐/꺼짐 양쪽에서 또렷이 보이게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

경로 대비 — 트랙이 인접 배경과 3:1 이상인가(켜짐·꺼짐 양쪽).

핸들 대비 — 핸들이 트랙·배경과 구별돼 위치가 보이는가.

상태 아이콘 — 상태 아이콘(있으면)이 그 배경과 3:1 이상인가.

개선 방향

트랙·핸들·상태 아이콘 색을 인접 배경과 3:1 이상으로(연한 회색 지양).

꺼짐 상태 트랙 대비 확인. 대비 측정으로 검증.

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

역할	책임
디자이너	토글 트랙·핸들·아이콘 색·대비 정의
퍼블리셔/개발	대비 구현·검증

기관 유형	CP-316 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (토글 스위치 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 트랙이 인접 배경과 3:1 이상 대비인가요(켜짐·꺼짐 양쪽)?

□ 핸들이 트랙·배경과 구별돼 위치가 보이나요?

□ 상태 아이콘(있으면)이 그 배경과 3:1 이상인가요?

❓ FAQ

Q1. 왜 3:1인가요? 토글 요소는 텍스트가 아니라 UI 그래픽이라 비텍스트 대비(3:1)가 적용됩니다(텍스트는 4.5:1). Q2. 꺼짐 상태의 회색도 대비가 필요한가요? 네. 꺼짐 트랙이 너무 연하면 스위치가 안 보입니다. 꺼짐 상태 대비도 중요하죠. Q3. 켜짐/꺼짐을 색으로만 구분해도 되나요? 토글은 핸들 위치(좌/우)라는 형태로도 구분됩니다. 색 외 단서가 본래 있고, 상태 아이콘을 더하면 더 명확하죠.

6. 마무리

CP-316의 메시지:

스위치가 보여야 켜고 끈다 — 경로·핸들·상태 아이콘을 배경과 3:1 이상 대비로.

토글의 경로·핸들·상태 아이콘이 흐릿하면 스위치와 상태를 인지 못 합니다. 인접 배경과 비텍스트 대비 3:1을 확보해 켜짐/꺼짐 양쪽에서 또렷이 보이게 하죠. 다음 편은 토글의 키보드 탐색·초점입니다.

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

ViewCheck는 토글 경로·핸들·상태 아이콘의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 토글 스위치(Toggle switch) 가이드 — https://www.krds.go.kr/html/site/component/component_30.html

WCAG 2.1 SC 1.4.11 Non-text Contrast — https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

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

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