아이콘과 글자는 같은 대비로

KRDS DS-092 — 아이콘과 연결된 레이블의 텍스트를 동일한 색상 대비율로 적용하고 있다.

0. 들어가며 — 아이콘과 레이블의 짝

아이콘은 종종 텍스트 레이블과 짝을 이룹니다 — 메뉴 아이콘 + “메뉴”, 검색 아이콘 + “검색”처럼요. 이번 92편은 이 아이콘과 레이블의 색 대비를 동일하게 맞추라는 규칙입니다.

아이콘과 그 옆 글자가 서로 다른 대비(예: 아이콘은 또렷, 글자는 흐릿)면 어색하고 한쪽이 안 보일 수 있죠. DS-092는 짝을 이루는 아이콘과 레이블의 대비를 통일하라고 규정합니다. 이번 편은 그 의미를 풀어냅니다.

1. 규칙 원문 — 동일 대비

DS-092 (디자인 스타일 > 아이콘) “아이콘과 연결된 레이블의 텍스트를 동일한 색상 대비율로 적용하고 있다.”

짝을 이루는 아이콘과 레이블 텍스트의 대비를 같게 하라는 뜻입니다.

정리: 아이콘과 그 레이블의 색 대비를 동일하게 맞춰라. 이게 DS-092입니다.

2. 왜 동일하게 맞추나

아이콘과 레이블은 하나의 의미 단위입니다 — ’검색 아이콘 + 검색 글자’는 함께 ’검색’을 뜻하죠. 이 짝의 대비가 다르면 두 가지 문제가 생깁니다.

첫째, 시각적 어색함입니다. 아이콘은 진한데 글자는 연하면(또는 반대), 한 짝인데 무게감이 달라 어긋나 보입니다. 동일 대비면 아이콘과 글자가 한 단위로 자연스럽게 묶이죠.

둘째, 접근성입니다. 한쪽만 대비가 충분하면, 다른 한쪽은 안 보일 수 있습니다. 아이콘만 또렷하고 글자가 흐리면 글자를 못 읽고, 반대면 아이콘을 못 보죠. 둘 다 같은(충분한) 대비여야 짝 전체가 모두에게 보입니다.

이는 아이콘과 텍스트가 함께 작동하는 다중 채널(6편·13편)이 일관된 대비를 가져야 한다는 것입니다. 색·아이콘·텍스트가 보조 채널로 함께 쓰일 때, 각 채널이 모두 충분히 보여야 의미가 전달되죠. 아이콘과 레이블의 동일 대비는 그 짝이 한 단위로, 모두에게 전달되게 합니다.

3. 점검 / 개선

무엇을 점검하나

동일 대비 — 아이콘과 레이블 대비가 같은가.

양쪽 충분 — 둘 다 충분한 대비(텍스트 4.5:1, 아이콘 3:1)인가.

Before / After

/* ✅ 아이콘+레이블 동일 대비 */ .menu-item .icon, .menu-item .label { color: var(--gray-80); } /* 같은 색·대비 */

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

역할	책임
디자이너	아이콘+레이블 대비 통일
퍼블리셔/개발	짝의 색 일관 구현

기관 유형	DS-092 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아이콘+레이블 사용 시)

아이콘+텍스트 짝을 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘과 레이블의 대비가 같은가요?

□ 한쪽만 흐리지 않나요?

□ 둘 다 충분한 대비인가요?

❓ FAQ

Q1. 아이콘은 3:1, 텍스트는 4.5:1인데 어떻게 같게 하나요? 각자 최소 기준(아이콘 3:1, 텍스트 4.5:1)을 지키되, 짝의 시각적 대비 수준을 맞춥니다. 보통 같은 색을 쓰면 자연히 통일됩니다. Q2. 왜 짝의 대비가 중요한가요? 아이콘+레이블은 한 의미 단위라, 대비가 다르면 어색하고 한쪽이 안 보일 수 있습니다. Q3. KRDS를 채택하면 자동인가요? KRDS 컴포넌트는 아이콘+레이블 대비가 통일돼 있습니다.

6. 마무리

DS-092의 메시지:

아이콘과 레이블은 같은 대비로 — 한 의미 단위가 한 무게로, 모두에게 보이게.

짝을 이루는 아이콘과 글자의 대비를 통일하면 한 단위로 자연스럽게 묶이고, 둘 다 충분한 대비여야 짝 전체가 모두에게 전달됩니다. 다중 채널의 일관된 대비 원리죠.

다음 편은 아이콘의 시점을 다룹니다. DS-093 — “아이콘의 시점을 Perspective view가 아닌 Front view로 적용한다.”

다음 편 예고 ▶ 「093. 아이콘의 시점을 Perspective view가 아닌 Front view로 적용하고 있다.」

ViewCheck는 아이콘과 레이블의 색 대비가 동일하게 적용됐는지를 진단합니다.

📚 참고 출처

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

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준