도움 아이콘이 보여야 누른다

KRDS CP-361 — 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.

0. 들어가며 — ⓘ·?가 흐릿하면

이번 481편은 맥락적 도움말 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 준수하라는 규칙입니다.

맥락적 도움말의 ⓘ·? 아이콘(CP-355)이 — 배경과 대비가 낮아 흐릿하면, 사용자는 ’여기 도움말이 있다’를 모르죠. CP-361은 아이콘의 명도 대비를 3:1 이상으로 확보하라고 규정합니다. 도움 패널 CP-344와 평행한 규칙이죠. 이번 편을 풀어냅니다.

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

CP-361 (컴포넌트 > 맥락적 도움말) “아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.”

맥락적 도움말 아이콘(ⓘ·?)이 인접 배경과 명도 대비 3:1 이상이 되게 해, 아이콘이 또렷이 보이게 하라는 뜻입니다.

정리: 맥락적 도움말 아이콘을 배경과 3:1 이상 대비로 또렷이 보이게 하라. 이게 CP-361입니다.

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

맥락적 도움말의 진입점은 — 요소 옆의 ⓘ·? 아이콘 버튼(CP-355·356)입니다. 사용자가 — ’여기 도움말이 있구나’를 알려면, 이 아이콘이 배경과 충분히 구별돼 또렷이 보여야 하죠.

아이콘이 흐릿할 때:

도움 존재 인지 실패 — ⓘ·? 아이콘이 — 배경과 거의 같은 밝기(연한 회색)면, 거의 안 보입니다. 사용자는 ’여기 도움말이 있다’를 모르고, 막혀도 도움을 못 청하죠. 맥락적 도움말 전체가 무용지물이 됩니다.

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

이는 — 비텍스트 대비(Non-text Contrast) 의 문제입니다(WCAG SC 1.4.11). 아이콘은 텍스트가 아니라 기능을 나타내는 그래픽이라 — 인접 배경과 최소 3:1의 명도 대비가 필요하죠. 텍스트 대비(4.5:1)가 아닌 비텍스트 대비 (3:1)가 적용됩니다(도움 패널 CP-344, 라디오 CP-284 정신).

그래서 CP-361은 — 아이콘과 배경의 명도 대비를 3:1 이상으로 확보하라고 합니다:

아이콘 대비 — ⓘ·? 아이콘의 색이 — 인접 배경과 3:1 이상. 너무 연한 회색 지양.

버튼 영역 — 아이콘 버튼에 배경·테두리가 있으면 — 그것도 충분한 대비로 ’버튼’임을 알리면 좋죠.

상태별 — 기본·호버·포커스 각 상태에서 — 활성 아이콘은 또렷한 대비를 유지합니다.

팝오버 내용 대비도(보강). 아이콘(361)에 더해 아이콘을 눌러 뜨는 팝오버 안의 텍스트도 배경과 충분한 대비(텍스트는 4.5:1)여야 읽히죠. 다만 이 규칙의 핵심은 진입점인 아이콘의 대비입니다.

크기와 별개(CP-365). 대비(361)는 ‘아이콘이 보이는가’, 크기(CP-365)는 ’누르기 충분한가(44×44px)’입니다. 둘 다 필요하죠 — 보이고(361), 누를 만큼 크게(365).

이 규칙은 맥락적 도움말의 ’진입점 가시성’을 담당합니다 — ⓘ·? 아이콘을 또렷이 보이게 해(361), 사용자가 ’도움말이 있다’를 인지하고 청하게 하죠. 아이콘이 안 보이면 맥락적 도움말 전체가 작동 안 하니, 가시성이 핵심입니다.

정리하면 — ⓘ·? 아이콘이 흐릿하면 사용자가 도움말의 존재를 모르므로, 인접 배경과 비텍스트 대비 3:1 이상을 확보해 또렷이 보이게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

아이콘 대비 3:1 — ⓘ·? 아이콘이 인접 배경과 명도 대비 3:1 이상인가.

버튼 인지 — 아이콘이 누를 수 있는 버튼으로 보이는가.

상태·환경 — 각 상태, 저시력·밝은 환경에서도 아이콘이 보이는가.

개선 방향

ⓘ·? 아이콘 색을 인접 배경과 3:1 이상으로(연한 회색 지양). 대비 측정 검증.

팝오버 텍스트 대비(4.5:1)도 확보.

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

역할	책임
디자이너	도움 아이콘 색·대비 정의
퍼블리셔/개발	대비 구현·검증

기관 유형	CP-361 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (맥락적 도움말 사용 시)

웹접근성 의무 대상이며 맥락적 도움말을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ ⓘ·? 아이콘이 인접 배경과 3:1 이상 대비인가요?

□ 아이콘이 누를 수 있는 버튼으로 보이나요?

□ 각 상태, 저시력·밝은 환경에서도 아이콘이 보이나요?

❓ FAQ

Q1. 왜 3:1인가요? 아이콘은 텍스트가 아니라 기능 그래픽이라 비텍스트 대비(3:1)가 적용됩니다(텍스트는 4.5:1). Q2. 연한 회색 아이콘이 깔끔한데요? 너무 연하면 도움말이 있는 줄 모릅니다. 3:1을 넘겨 또렷이 보이게 해야 작동 하죠. Q3. CP-365와 뭐가 다른가요? CP-361은 ‘보이는가’(대비), CP-365는 ‘누르기 충분한가’(44×44px)입니다. 둘 다 필요하죠.

6. 마무리

CP-361의 메시지:

도움 아이콘이 보여야 누른다 — ⓘ·? 아이콘을 배경과 3:1 이상 대비로.

아이콘이 흐릿하면 사용자가 도움말의 존재를 모릅니다. 인접 배경과 비텍스트 대비 3:1을 확보해 또렷이 보이게 하는 게 핵심이죠. 다음 편은 아이콘 버튼의 고유한 이름입니다.

다음 편 예고 ▶ 「482. (CP-362) 아이콘 버튼에 고유하고 적절한 이름을 제공하고 있다.」

ViewCheck는 맥락적 도움말 아이콘의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.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컴포넌트,웹표준