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

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

0. 들어가며 — 도움 아이콘이 흐릿하면

이번 464편은 도움 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 제공하라는 규칙입니다.

도움 패널의 도움 아이콘(?·ⓘ)이 — 배경과 대비가 낮아 흐릿하면, 사용자는 ’여기 도움말이 있다’는 걸 모르죠. 도움 아이콘이 안 보이면 도움을 못 청합니다. CP-344는 아이콘의 명도 대비를 3:1 이상으로 확보하라고 규정합니다. 라디오 CP-284, 스피너 CP-333의 도움 패널 버전이죠. 이번 편을 풀어냅니다.

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

CP-344 (컴포넌트 > 도움 패널) “아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 제공하고 있다.”

도움 아이콘 버튼이 인접 배경과 명도 대비 3:1 이상이 되게 해, 도움 아이콘이 또렷이 보이게 하라는 뜻입니다.

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

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

도움 패널의 진입점은 — 각 항목 옆의 도움 아이콘 버튼(?·ⓘ)입니다(CP-337). 사용자가 — ’여기 도움말이 있구나, 막히면 이걸 누르면 되겠다’를 알려면, 이 아이콘이 배경과 충분히 구별돼 또렷이 보여야 하죠.

아이콘이 흐릿할 때:

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

버튼 인지 어려움 — 아이콘이 흐릿하면 — 그게 누를 수 있는 버튼인지조차 모릅니다.

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

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

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

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

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

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

아이콘 의미도 명확히. 대비(보임)에 더해 — 아이콘 모양이 ‘도움말’을 뜻한다고 인지되게(?·ⓘ 등 관습적 아이콘) 하면 좋죠. 다만 — 이 규칙의 핵심은 ’아이콘이 보이는가’(대비)입니다. 아이콘 의미·이름은 CP-345(접근가능한 이름) 에서 다룹니다.

터치 영역과 별개(CP-347). 대비(344)는 ‘아이콘이 보이는가’, 크기(CP-347)는 ’누르기 충분한가’입니다. 둘 다 필요하죠 — 보이고(344), 누를 만큼 크게(347).

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

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

3. 점검 / 개선

무엇을 점검하나

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

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

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

개선 방향

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

버튼 영역 대비로 클릭 가능성 인지. 관습적 아이콘(?·ⓘ) 사용.

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

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

❓ FAQ

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

6. 마무리

CP-344의 메시지:

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

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

다음 편 예고 ▶ 「465. (CP-345) 스크린 리더 사용자가 활성화 버튼의 용도를 이해할 수 있도록 각각의 아이콘 버튼에 이름을 고유하고 적절하게 제공하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.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컴포넌트,웹표준