비추는 경계가 보여야

KRDS CP-373 — 스포트라이트와 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.

0. 들어가며 — 어디가 강조된 건지 모르면

이번 493편은 스포트라이트와 인접 배경 간 명도 대비를 3:1 이상으로 준수하라는 규칙입니다.

코치마크는 — 대상 요소만 밝게 비추고(스포트라이트) 나머지를 어둡게 해 시선을 집중시킵니다. 이 스포트라이트의 경계가 — 주변과 대비가 낮아 흐릿하면, 사용자는 ‘어디가 강조된 건지’ 모르죠. CP-373은 스포트라이트의 명도 대비를 3:1 이상으로 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 스포트라이트 명도 대비 3:1 이상

CP-373 (컴포넌트 > 코치마크) “스포트라이트와 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.”

코치마크의 스포트라이트(강조 영역)와 인접 배경(어둡게 처리된 부분)의 명도 대비를 3:1 이상으로 해, 강조 영역이 또렷이 구별되게 하라는 뜻입니다.

정리: 스포트라이트와 배경을 3:1 이상 대비로 또렷이 구별되게 하라. 이게 CP-373입니다.

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

코치마크의 핵심 시각 장치는 스포트라이트(spotlight) 입니다. 안내하려는 대상 요소만 밝게 비추고(또는 또렷하게 두고), 나머지 화면은 어둡게(반투명 오버레이로) 덮어, 사용자의 시선을 그 요소에 집중시키죠. 무대에서 배우에게 조명을 비추듯이요. 이 스포트라이트가 효과를 내려면 밝은 영역(강조 대상)과 어두운 영역(나머지)의 경계가 또렷이 구별돼야 합니다.

대비가 낮을 때의 문제:

강조 영역 불명확 — 스포트라이트(밝은 강조 영역)와 — 인접 배경(어둡게 처리된 부분)의 명도 대비가 낮으면, ‘어디까지가 강조된 영역인지’ 경계가 흐릿합니다. 사용자는 ‘무엇을 보라는 건지’ 못 알아채죠. 스포트라이트의 집중 효과가 사라집니다.

오버레이 약함 — 나머지 영역을 덮는 어두운 오버레이가 — 너무 옅으면(거의 투명), 강조 영역과 구별이 안 되고 집중 효과가 없죠.

저시력·환경 — 저시력 사용자·밝은 환경에선 — 약한 대비가 더욱 구별 안 됩니다.

그래서 CP-373은 — 스포트라이트와 인접 배경의 명도 대비를 3:1 이상으로 확보하라고 합니다:

충분한 대비 — 강조 영역(밝음)과 어두운 오버레이 영역의 명도 대비가 3:1 이상이어야 — 경계가 또렷이 구별 됩니다. 사용자가 ’여기가 강조된 곳’을 한눈에 알게요.

오버레이 농도 — 나머지를 덮는 어두운 오버레이를 — 충분히 진하게(단, 너무 진해 완전히 안 보이게는 말고) 해, 강조 영역과 대비되게 합니다.

이는 — 비텍스트 대비(Non-text Contrast) 정신입니다(WCAG SC 1.4.11). 스포트라이트는 — UI의 상태·강조를 나타 내는 시각 요소라, 인접 영역과 충분한(3:1) 대비가 필요하죠. 라디오 CP-284, 스피너 CP-333 등 비텍스트 대비 규칙의 코치마크 적용입니다.

경계 강조 보조. 대비에 더해 — 강조 영역 둘레에 테두리(outline)나 발광 효과를 줘 경계를 더 분명히 할 수도 있죠. 다만 — 이 규칙의 핵심은 스포트라이트-배경의 명도 대비 3:1입니다.

팝오버와의 관계. 스포트라이트(강조 영역)에 더해 그 옆 팝오버(안내 내용, CP-366)도 어두운 배경 위에서 또렷이 보여야 하죠. 팝오버 텍스트는 그 배경과 텍스트 대비(4.5:1)를 확보합니다. 스포트라이트 대비(373)와 팝오버 가독성이 함께 가죠.

이 규칙은 코치마크의 ’강조 가시성’을 담당합니다 — 스포트라이트와 배경을 3:1 이상 대비로 구별되게 해(373), 사용 자가 ’무엇이 강조됐는지’를 또렷이 인지하게 하죠. 단독 표시(CP-370)로 한 곳에 집중시키되, 그 집중이 시각적으로 또렷해야 효과가 나옵니다.

정리하면 — 스포트라이트와 배경의 대비가 낮으면 강조 영역이 흐릿해 집중 효과가 사라지므로, 인접 배경과 명도 대비 3:1 이상을 확보해 강조 영역이 또렷이 구별되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

스포트라이트 대비 3:1 — 강조 영역과 어두운 배경의 명도 대비가 3:1 이상인가.

경계 명확 — 강조 영역 경계가 또렷이 구별되는가.

팝오버 가독성 — 안내 팝오버 텍스트가 배경과 충분히 대비되는가(4.5:1).

개선 방향

강조 영역과 어두운 오버레이의 명도 대비를 3:1 이상으로. 오버레이 농도 조정.

강조 경계 테두리·발광 보조. 팝오버 텍스트 대비 확보.

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

역할	책임
디자이너	스포트라이트·오버레이 대비 정의
퍼블리셔/개발	대비 구현·검증

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

웹접근성 의무 대상이며 코치마크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 강조 영역과 어두운 배경의 명도 대비가 3:1 이상인가요?

□ 강조 영역 경계가 또렷이 구별되나요?

□ 안내 팝오버 텍스트가 배경과 충분히 대비되나요(4.5:1)?

❓ FAQ

Q1. 스포트라이트가 뭔가요? 대상 요소만 밝게 비추고 나머지를 어둡게 덮어 시선을 집중시키는 코치마크 장치입니다. 무대 조명처럼요. Q2. 왜 3:1인가요? 스포트라이트는 강조를 나타내는 시각 요소라 비텍스트 대비(3:1)가 적용됩니다. 경계가 또렷이 구별돼야 집중 효과가 나죠. Q3. 오버레이를 너무 진하게 하면요? 너무 진하면 주변 맥락이 완전히 안 보입니다. 강조 영역과 3:1 이상 대비되되 주변도 어렴풋이 보이게 균형을 잡죠.

6. 마무리

CP-373의 메시지:

비추는 경계가 보여야 — 스포트라이트와 배경을 3:1 이상 대비로 구별되게.

스포트라이트와 배경의 대비가 낮으면 강조 영역이 흐릿해 집중 효과가 사라집니다. 인접 배경과 명도 대비 3:1을 확보해 강조 영역을 또렷이 구별되게 하는 게 핵심이죠. 다음 편은 코치마크의 요청 시 실행입니다.

다음 편 예고 ▶ 「494. (CP-374) 코치마크는 사용자가 요청한 경우에만 실행되게 구현하고 있다.」

ViewCheck는 스포트라이트의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 코치마크(Coach mark) 가이드 — https://www.krds.go.kr/html/site/component/component_36.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컴포넌트,웹표준