아이콘도 배경과 3

KRDS DS-089 — 인접 색상과 최소 3:1의 대비율을 준수한 아이콘을 적용하고 있다.

0. 들어가며 — 아이콘 색 대비

이번 89편은 아이콘의 색 대비 — 인접 색상과 최소 3:1 입니다.

24편(기본 모드 아이콘 매직넘버 40=3:1)에서 이미 아이콘 대비를 다뤘는데, 이번엔 아이콘 카테고리에서 다시 명시됩니다. 색상 카테고리(24편)는 매직넘버 관점, 아이콘 카테고리(89편)는 ‘인접 색상 대비’ 관점이죠. 핵심은 같습니다 — 아이콘이 배경(인접 색)과 3:1 이상 대비를 가져야 보입니다. 이번 편은 아이콘 대비를 비텍스트 대비(WCAG 1.4.11) 관점에서 정리합니다.

1. 규칙 원문 — 3:1

DS-089 (디자인 스타일 > 아이콘) “인접 색상과 최소 3:1의 대비율을 준수한 아이콘을 적용하고 있다.”

아이콘이 인접 색상(배경 등)과 대비 3:1 이상이어야 한다는 뜻입니다(WCAG 1.4.11 비텍스트 대비).

정리: 아이콘은 인접 색상과 최소 3:1 대비를 확보하라. 이게 DS-089입니다.

2. 왜 3:1인가 — 비텍스트 대비

아이콘은 ’비텍스트 그래픽’이라 WCAG 1.4.11(비텍스트 대비, 2편 참고)의 최소 기준 3:1이 적용됩니다. 아이콘이 배경과 충분히 구분되어야, 사용자가 아이콘의 형태·기능을 인지할 수 있죠.

특히 24편에서 강조했듯, 아이콘은 색약·저시력 사용자를 위한 보조 단서(6편·13편)이고, 아이콘 전용 버튼 (검색·메뉴·닫기)은 아이콘이 곧 기능 안내의 전부입니다. 이 아이콘이 흐려서 안 보이면 보조 단서·기능 안내가 사라지죠. 그래서 아이콘은 반드시 배경과 3:1 이상 대비를 확보해야 합니다.

이 규칙이 색상 카테고리(24편)와 아이콘 카테고리(89편) 양쪽에 있는 것은, 아이콘 대비가 그만큼 중요해서 입니다. 색을 다루는 관점(매직넘버 40)과 아이콘을 다루는 관점(인접 색상 3:1)에서 모두 강조되는 것이죠. SVG 형식(75편) 덕에 아이콘 색을 코드로 제어할 수 있어, 이 대비를 쉽게 맞출 수 있습니다.

3. 점검 / 개선

무엇을 점검하나

아이콘 대비 — 아이콘이 인접 색상과 3:1 이상인가.

배경별 확인 — 컬러 버튼·이미지 위 아이콘도 3:1인가(24편).

아이콘 전용 버튼 — 글자 없는 아이콘 버튼이 또렷한가.

Before / After

/* ✅ 아이콘 대비 3:1 이상 */ .icon { color: var(--gray-50); } /* 흰 배경과 3:1↑ */

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

역할	책임
디자이너	아이콘 색을 3:1 이상으로
퍼블리셔/개발	SVG 색 제어로 대비 확보
접근성 담당	아이콘 대비 검증

기관 유형	DS-089 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

아이콘이 있는 모든 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

□ 컬러 버튼·이미지 위 아이콘이 보이나요?

□ 아이콘 전용 버튼이 또렷한가요?

❓ FAQ

Q1. 24편과 같은가요? 원리가 같습니다(아이콘 3:1). 24편은 매직넘버 40 관점, 89편은 인접 색상 대비 관점 입니다. 아이콘 대비의 중요성 때문에 양쪽에서 다룹니다. Q2. 왜 3:1인가요? 아이콘은 비텍스트 그래픽이라 WCAG 1.4.11 최소 3:1이 적용됩니다(텍스트 4.5:1보다 낮음). Q3. KRDS를 채택하면 자동인가요? KRDS 아이콘 색은 대비 기준을 충족하도록 정의돼 있습니다.

6. 마무리

DS-089의 메시지:

아이콘도 인접 색상과 최소 3:1 — 보조 단서·기능 안내인 아이콘이 보여야 한다.

아이콘은 비텍스트 대비(3:1)를 확보해야 색약·저시력 사용자의 보조 단서로, 아이콘 전용 버튼의 기능 안내로 작동합니다. 색상(24편)·아이콘(89편) 양쪽에서 강조되는 중요한 규칙이죠.

다음 편은 선명한 화면 모드의 아이콘 대비를 다룹니다. DS-090 — “선명한 화면 모드에서 인접 색상과 7:1 대비율을 준수한다.”

다음 편 예고 ▶ 「090. 선명한 화면 모드에서 인접 색상과 7:1의 대비율을 준수한 아이콘을 적용하고 있다.」

ViewCheck는 아이콘이 인접 색상과 3:1 이상 대비를 확보했는지를 진단합니다.

📚 참고 출처

KRDS 아이콘(Icon) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_05.html

WCAG 2.1 Understanding 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컴포넌트,웹표준