스피너가 보이고, 도는 게 보여야

KRDS CP-333 — 인접 배경과 경로 간 명도 대비, 경로와 식별자 간 명도 대비를 3:1 이상으로 표현하고 있다.

0. 들어가며 — 스피너가 흐릿해 안 보이면

이번 453편은 인접 배경과 경로 간 명도 대비, 경로와 식별자 간 명도 대비를 3:1 이상으로 표현하라는 규칙입니다.

스피너는 — 배경에 깔린 경로(트랙) 위에서, 도는 부분인 식별자(인디케이터) 가 회전합니다. 이 둘이 각각 배경 및 서로와 대비가 낮으면 — 스피너가 안 보이거나, 도는 게 안 보이죠. CP-333은 ①배경↔경로와 ②경로↔식별자 두 대비를 3:1 이상으로 요구합니다. 토글 경로·핸들 대비(CP-316)와 닮은 스피너 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 이중 명도 대비 3:1 이상

CP-333 (컴포넌트 > 스피너) “인접 배경과 경로 간 명도 대비, 경로와 식별자 간 명도 대비를 3:1 이상으로 표현하고 있다.”

스피너의 경로(트랙)가 인접 배경과 3:1 이상, 도는 식별자가 경로와 3:1 이상 명도 대비가 되게 해, 스피너와 그 회전이 또렷이 보이게 하라는 뜻입니다.

정리: 배경↔경로, 경로↔식별자 둘 다 3:1 이상 대비로. 이게 CP-333입니다.

2. 왜 두 가지 대비인가

스피너의 시각 구성은 — 두 부분입니다:

경로(트랙) — 스피너의 바탕이 되는 원형 띠(보통 연한 색의 완전한 원). 스피너의 ’틀’이죠.

식별자(인디케이터) — 그 경로 위에서 도는 부분(보통 진한 색의 호(arc) 또는 점). 회전하며 ’진행 중’을 표현하죠.

사용자가 — ’여기 스피너가 있고(경로), 돌고 있다(식별자)’를 보려면, 두 가지 대비가 필요합니다. 그래서 CP-333은 두 대비를 따로 명시하죠.

① 배경 ↔ 경로 대비 (스피너가 보이는가). 경로(트랙)가 — 인접 배경과 명도 대비 3:1 이상이어야 합니다.

경로가 안 보일 때 — 경로가 — 배경과 거의 같은 밝기(연한 회색 경로가 흰 배경에)면, 스피너 영역 자체가 안 보입니다. 사용자는 ’여기 뭔가 로딩 중’인지 모르죠.

3:1 확보 — 경로가 배경과 충분히 구별돼 — 스피너가 거기 있음을 알게요.

② 경로 ↔ 식별자 대비 (도는 게 보이는가). 도는 식별자가 — 경로와 명도 대비 3:1 이상이어야 합니다.

회전이 안 보일 때 식별자(도는 부분)가 경로와 비슷한 밝기면, ‘무엇이 도는지’ 구별이 안 됩니다. 회전이 안 보이면 스피너가 멈춘 것처럼 보여 ’작동 중’을 못 전하죠(CP-331의 정신과 연결).

3:1 확보 — 식별자가 경로보다 충분히 진해(또는 달라) — 도는 부분이 또렷이 구별되게요. 그래야 회전이 보입니다.

이는 — 비텍스트 대비(Non-text Contrast) 의 적용입니다(WCAG SC 1.4.11). 스피너는 UI 상태(처리 중)를 나타내는 그래픽이라 — 그 시각 요소들이 인접 요소와 3:1 이상 대비여야 하죠. 토글이 경로·핸들 대비(CP-316)를 본 것과 같은 구조인데, 스피너는 ’배경↔경로’와 ’경로↔식별자’라는 두 층의 대비를 요구하는 게 특징입니다.

작은 스피너 주의. 작은 스피너(버튼 안, CP-329)는 — 면적이 작아 대비가 부족하면 더 안 보이죠. 작을수록 대비를 확실히 확보합니다. 또 — 다양한 배경(흰색·색상·이미지 위)에서 쓰일 수 있으니, 각 배경에서 대비가 유지되는지 봅니다.

저시력·환경. 저시력 사용자·밝은 환경에서도 — 두 대비가 충분해야 스피너와 회전이 보이죠.

이 규칙은 스피너의 ’시각적 가시성’을 담당합니다 — 경로(배경 대비)로 스피너가 보이고, 식별자(경로 대비)로 회전이 보이게(333) 해, 사용자가 ’로딩 중’을 확실히 인지하게 하죠. 두 층의 대비가 핵심입니다.

정리하면 — 스피너 경로가 배경과 대비가 낮으면 스피너가 안 보이고 식별자가 경로와 대비가 낮으면 회전이 안 보이 므로, 배경↔경로와 경로↔식별자 두 대비를 모두 3:1 이상으로 확보해야 합니다.

3. 점검 / 개선

무엇을 점검하나

배경↔경로 3:1 — 경로(트랙)가 인접 배경과 명도 대비 3:1 이상인가.

경로↔식별자 3:1 — 도는 식별자가 경로와 명도 대비 3:1 이상인가(회전 가시).

작은 스피너·다양 배경 — 작은 크기, 다양한 배경에서도 두 대비가 유지되는가.

개선 방향

경로 색을 배경과 3:1 이상, 식별자 색을 경로와 3:1 이상으로. 대비 측정 검증.

작은 스피너·여러 배경에서 대비 확인.

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

역할	책임
디자이너	스피너 경로·식별자 색·대비 정의
퍼블리셔/개발	대비 구현·검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 경로(트랙)가 인접 배경과 3:1 이상 대비인가요?

□ 도는 식별자가 경로와 3:1 이상 대비인가요(회전 가시)?

□ 작은 크기·다양한 배경에서도 두 대비가 유지되나요?

❓ FAQ

Q1. 왜 대비가 두 개인가요? 스피너는 경로(틀)와 식별자(도는 부분)로 됩니다. 경로는 배경과(스피너가 보이게), 식별자는 경로와(회전이 보이게) 각각 대비가 필요하죠. Q2. 경로 없이 식별자만 있어도 되나요? 식별자만 있으면 배경과의 대비만 챙기면 됩니다. 다만 경로가 있으면 두 대비를 모두 확보해야 하죠. Q3. 왜 3:1인가요? 스피너는 텍스트가 아니라 UI 상태 그래픽이라 비텍스트 대비(3:1)가 적용됩니다.

6. 마무리

CP-333의 메시지:

스피너가 보이고, 도는 게 보여야 — 배경↔경로, 경로↔식별자 둘 다 3:1 이상.

경로가 배경과 대비가 낮으면 스피너가 안 보이고, 식별자가 경로와 대비가 낮으면 회전이 안 보입니다. 두 층의 대비를 모두 3:1 이상으로 확보하는 게 핵심이죠. 다음 편은 스피너의 스크린 리더 설명입니다.

다음 편 예고 ▶ 「454. (CP-334) 스피너 상태에 대한 설명을 스크린 리더에서 확인할 수 있도록 하고 있다.」

ViewCheck는 스피너 경로·식별자의 이중 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 스피너(Spinner) 가이드 — https://www.krds.go.kr/html/site/component/component_32.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컴포넌트,웹표준