형태로 말하는 아이콘도 보여야 말한다

KRDS DS-024 — 기본 모드에서 아이콘 색상을 매직넘버 40(명도 대비 3:1)으로 적용하고 있다.

0. 들어가며 — 아이콘도 ’비텍스트 요소’다

지난 편들에서 글자(DS-020·021)와 입력칸 테두리(DS-022·023)의 대비·두께를 다뤘습니다. 이번엔 또 다른 시각 요소 — 아이콘입니다.

아이콘은 이 시리즈에서 여러 번 ’구원자’로 등장했습니다. 색에만 의존하지 말라고 할 때(6편·13편), 색을 못 보는 사용자를 위한 보조 단서로 아이콘(✓·✕·⚠·ⓘ)을 함께 쓰라고 했죠. 그런데 그 아이콘 자체가 안 보이면 어떻게 될까요? 보조 단서가 되어야 할 아이콘이 정작 흐릿하면, 그 역할을 못 합니다.

DS-024는 이 아이콘의 가시성을 규정합니다 — 기본 모드에서 아이콘 색상을 매직넘버 40(대비 3:1)으로. 아이콘은 글자가 아니라 ’그래픽’이므로, 비텍스트 대비 기준인 3:1이 적용됩니다. 이번 편은 아이콘이 왜 충분히 보여야 하는지, 그 기준이 왜 글자(4.5:1)와 다른지를 풀어냅니다.

1. 규칙 원문 — 명확한 한 가지 기준

DS-024 (디자인 스타일 > 색상) “기본 모드에서 아이콘 색상을 매직넘버 40(명도 대비 3:1) 으로 적용하고 있다.”

“아이콘 색상”

화면의 아이콘 — 메뉴 아이콘, 상태 아이콘, 버튼 속 아이콘, 기능 아이콘 등 — 의 색입니다.

“매직넘버 40(명도 대비 3:1)”

아이콘이 배경과 단계 차 40 이상, 즉 대비 3:1 이상이어야 한다는 뜻입니다. 비텍스트 요소의 WCAG 1.4.11 기준(3:1)에 대응합니다.

정리: 아이콘이 배경과 대비 3:1(매직넘버 40) 이상이 되게 하라. 이게 DS-024입니다.

2. 왜 아이콘은 3:1인가 — 글자(4.5:1)와 다른 이유

DS-024는 아이콘에 3:1(매직넘버 40) 을 요구합니다. 본문 글자(4.5:1)보다 낮죠. 왜 다를까요?

아이콘은 ‘그래픽 요소’ 라 WCAG 분류가 다르기 때문입니다. WCAG에서 텍스트는 1.4.3(본문 4.5:1), 비텍스트 그래픽·UI 요소는 1.4.11(3:1)의 적용을 받습니다. 아이콘은 글자가 아니라 그림이므로 3:1 기준이 적용되는 것이죠.

이 차이에는 합리적 이유가 있습니다. 글자는 한 획 한 획을 정확히 읽어내야 의미가 통합니다 — ’己’와 ’已’처럼 미세한 차이가 다른 글자가 되니까요. 그래서 더 높은 대비(4.5:1)가 필요합니다. 반면 아이콘은 전체 형태로 의미를 전달합니다. 체크(✓)나 엑스(✕)는 모양만 알아보면 되지, 획 하나하나를 정밀하게 읽을 필요가 없죠. 그래서 글자보다 낮은 3:1로도 형태를 인식할 수 있습니다.

다만 주의할 점 — 3:1은 ’최소’이지 ’권장’이 아닙니다. 특히 의미가 중요한 아이콘(상태 아이콘 등)은 더 높은 대비가 좋습니다. 그리고 아이콘 안에 글자가 들어 있거나, 아이콘이 세밀한 디테일로 의미를 전달한다면 글자 수준의 대비를 고려해야 합니다. 3:1은 ’단순한 형태 아이콘’의 하한선입니다.

3. 아이콘이 보여야 하는 이유 — 보조 단서의 책임

아이콘 가시성이 왜 중요한지, 이 시리즈의 맥락에서 봅시다.

아이콘은 이 시리즈 내내 ’색을 못 보는 사용자를 위한 보조 단서’로 강조됐습니다. 상태 색(빨강·초록)을 못 구분하는 색약자에게 ✓·✕ 형태가 의미를 전달하고(13편·16편), 색만으로 정보를 전달하지 말라는 원칙(6편)에서 아이콘이 핵심 대안이었죠. 그런데 그 아이콘이 흐릿해서 안 보이면, 보조 단서로서의 역할이 무너집니다. 정작 색을 못 보는 사용자가 아이콘도 못 보면, 정보를 받을 채널이 사라지는 것입니다.

그래서 아이콘 가시성은 단순히 ’아이콘 하나가 잘 보이느냐’를 넘어, 접근성 체계 전체의 신뢰성 문제입니다. “색을 못 봐도 아이콘이 있으니 괜찮다”는 우리의 전제가 성립하려면, 그 아이콘이 충분히 보여야 합니다. 아이콘이 흐리면, 색 + 아이콘 + 텍스트라는 다중 채널 중 하나가 막히는 셈이죠.

특히 아이콘만 있는 버튼(글자 없이 아이콘만으로 기능을 표현하는 버튼)은 더 중요합니다. 검색 아이콘 버튼, 메뉴(햄버거) 아이콘, 닫기(✕) 아이콘 등은 그 아이콘이 곧 기능 안내의 전부입니다. 이 아이콘이 안 보이면 사용자는 그 버튼이 무슨 기능인지, 거기 버튼이 있는지조차 모릅니다. 아이콘 전용 버튼일수록 대비 확보가 필수입니다.

아이콘 전용 버튼에는 사실 대비 외에 한 가지가 더 필요합니다 — 보조기기를 위한 대체 텍스트입니다. 화면을 보지 못하는 시각장애 사용자는 아이콘의 형태를 볼 수 없으므로, 그 아이콘 버튼이 무슨 기능인지 스크린리더가 읽어줄 텍스트(예: aria-label="검색")가 있어야 합니다. DS-024는 색 대비를 규정하지만, 아이콘 전용 버튼의 완전한 접근성은 ’보이는 대비 + 들리는 라벨’이 함께할 때 완성됩니다. 색을 못 보는 사람에게는 대비가, 화면을 못 보는 사람에게는 라벨이 — 각자 다른 채널로 같은 정보를 받는 것이죠. 이 역시 이 시리즈가 반복해 온 ’여러 채널로 전달하라’는 원리의 연장입니다.

또 하나, 아이콘의 의미가 명확하려면 가시성뿐 아니라 관습성도 중요합니다. 아무리 또렷하게 보여도, 그 아이콘의 형태가 낯설면 사용자는 의미를 모릅니다. 검색은 돋보기, 메뉴는 가로줄 세 개, 닫기는 엑스처럼 널리 통용되는 형태를 써야 사용자가 직관적으로 이해합니다. 독창적이지만 낯선 아이콘은, 잘 보여도 의미가 전달되지 않습니다. 그래서 아이콘 디자인의 두 축은 ’보이게(DS-024의 대비)’와 ’알아보게(관습적 형태)’입니다. 둘 다 갖춰야 아이콘이 제 역할을 합니다. 잘 보이는 낯선 아이콘보다, 적당히 보이는 익숙한 아이콘이 때로 더 잘 통하는 이유입니다.

4. 매직넘버로 다시 산수 — 40

20·22편에서 본 매직넘버가 아이콘에도 그대로 작동합니다. 아이콘 색을 고르는 것도 단계 뺄셈입니다.

배경에서 아이콘 단계를 빼서, 차이가 40 이상이면 통과입니다.

흰 배경(Gray-0)의 아이콘 → 단계 차 40 이상 → Gray-40 이상의 색

연회색 배경(Gray-5)의 아이콘 → 5 + 40 = Gray-45 이상

이렇게 하면 아이콘 색도 계산 없이 단계로 정할 수 있습니다. 그리고 아이콘이 팔레트 색(특히 회색 단계나 Primary 등)을 쓰면, 매직넘버가 곧장 적용됩니다. 임의 색 아이콘을 쓰면 매번 대비를 계산해야 하니, 팔레트 사용(DS-001)이 여기서도 기반이 됩니다.

한 가지 더 — 아이콘은 종종 다양한 배경 위에 놓입니다. 흰 카드 위, 컬러 버튼 위, 이미지 위 등. 그래서 ’아이콘이 놓이는 실제 배경’을 기준으로 대비를 확인해야 합니다. 컬러 버튼 위 흰 아이콘이라면 그 버튼색과 흰색의 대비를, 이미지 위 아이콘이라면 가장 불리한 배경 구간을 기준으로요. 아이콘이 어디에 놓이느냐에 따라 필요한 색이 달라집니다.

이 ’배경에 따라 달라짐’은 18편(표면 레이어)·20편(글자 색)에서 본 원리와 똑같습니다. 화면은 여러 명도의 면으로 이루어져 있고, 그 위에 놓이는 모든 것(글자·아이콘·테두리)은 자기가 놓인 면을 기준으로 대비를 확보해야 합니다. 흰 카드 위 아이콘과 연회색 배경 위 아이콘은 같은 색이어도 대비가 다르므로, 면이 바뀌면 아이콘 색도 조정되어야 합니다. 매직넘버는 이 조정을 단순한 산수로 만들어 주죠 — 면 단계 + 40 이상이면 통과. 그래서 아이콘 색도 화면에 하드코딩하지 말고, 면의 역할에 맞는 시맨틱 토큰으로 관리하는 것이 좋습니다.

특히 이미지나 사진 위에 놓이는 아이콘은 가장 까다롭습니다. 사진은 밝은 부분과 어두운 부분이 섞여 있어, 아이콘이 사진의 밝은 영역 위에선 잘 보이다가 어두운 영역 위에선 묻힐 수 있습니다. 이런 경우엔 아이콘 뒤에 반투명 배경 막을 깔거나(10편의 Alpha 활용), 아이콘에 옅은 그림자나 외곽선을 더해 어떤 배경 위에서도 대비가 유지되게 합니다. ’사진 위 흰 아이콘’은 흔하지만, 사진의 밝은 구간에서 사라지는 대표적 위반이므로 특히 주의해야 합니다. 아이콘이 어디에 놓이든 보이게 하는 것 — 그것이 DS-024가 요구하는 가시성의 본질입니다.

5. 흔한 위반 패턴

DS-024 위반은 이렇게 나타납니다.

함정 ① 연한 아이콘. 흰 배경에 아주 연한 회색 아이콘 → 대비 부족, 안 보임. → 매직넘버 40 이상.

함정 ② 컬러 버튼 위 약한 아이콘. 밝은 버튼에 흰 아이콘, 연한 버튼에 회색 아이콘 → 대비 깨짐. → 버튼색 기준으로 대비 확보.

함정 ③ 아이콘 전용 버튼 흐림. 글자 없는 아이콘 버튼이 흐려 기능·존재 불명확. → 또렷한 대비 필수.

함정 ④ 보조 아이콘 흐림. 상태 표시 보조 아이콘(✓·⚠)이 흐려 보조 역할 상실. → 충분한 대비.

핵심: 아이콘은 형태로 말하지만, 그 형태가 보여야 말합니다. 최소 3:1(매직넘버 40)을 확보하세요.

6. 무엇을 점검하나

DS-024는 아이콘이 충분한 대비를 갖는지를 봅니다.

아이콘 대비 — 아이콘이 배경과 단계 차 40(3:1) 이상인가.

배경별 확인 — 아이콘이 놓인 실제 배경(버튼·이미지 등) 기준으로 대비를 봤는가.

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

보조 아이콘 — 상태 보조 아이콘이 충분히 보이는가.

7. 누가 담당하나

역할	책임
디자이너	아이콘 색을 매직넘버 40 이상으로, 배경별 대비 확보
퍼블리셔/개발	아이콘 색을 토큰으로 적용, 다양한 배경에서 대비 확인
접근성 담당	아이콘 대비가 3:1을 충족하는지 검증

8. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-024 적용
중앙행정기관(대표)	✅ 필수
중앙행정기관(운영)	✅ 필수
공공기관	✅ 필수
지방자치단체	✅ 필수

아이콘이 있는 모든 사이트 = 해당. 메뉴·검색·상태 등 아이콘을 쓰면 적용됩니다.

예외(N/A)

순수 장식용 아이콘(정보 전달 안 함)은 대비 면제 대상일 수 있으나, 기능·정보를 전달하는 아이콘은 모두 대상입니다. 대부분의 사이트는 기능 아이콘을 갖습니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 연한 아이콘(대비 부족) */ .icon { color: #ccc; } /* 흰 배경에서 대비 ~1.6:1 */ /* ✅ After: 매직넘버 40 이상(3:1↑) */ .icon { color: var(--gray-50); } /* 흰 배경(0)과 차 50 → 3:1↑ */ .btn-primary .icon { color: var(--gray-0); } /* 컬러 버튼 위 흰 아이콘(버튼색과 대비 확보) */

정비 순서

연한 아이콘부터 — 흐린 아이콘을 매직넘버 40 이상으로.

배경별 확인 — 컬러 버튼·이미지 위 아이콘 대비 점검.

아이콘 전용 버튼 — 글자 없는 아이콘 버튼 가시성 확보.

팔레트화 — 임의 색 아이콘을 팔레트 단계로.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘이 배경과 또렷이 구분되나요(대비 3:1)?

□ 연한 회색 아이콘(#ccc 등)을 쓰고 있지 않나요?

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

□ 글자 없는 아이콘 버튼의 아이콘이 또렷한가요?

□ 상태 보조 아이콘(✓·⚠)이 충분히 보이나요?

❓ FAQ

Q1. 왜 아이콘은 3:1이고 글자는 4.5:1인가요? 글자는 획을 정밀하게 읽어야 의미가 통하지만, 아이콘은 전체 형태로 의미를 전달합니다. 그래서 아이콘은 글자보다 낮은 3:1로도 형태를 인식할 수 있습니다. WCAG도 텍스트(4.5:1)와 비텍스트(3:1)를 구분합니다.

Q2. 장식용 아이콘도 3:1을 지켜야 하나요? 순수 장식(정보를 전달하지 않는)이라면 대비 면제 대상일 수 있습니다. 다만 기능이나 의미를 전달하는 아이콘은 반드시 대비를 확보해야 합니다. 애매하면 지키는 것이 안전합니다.

Q3. 아이콘에 글자가 들어 있으면요? 아이콘 안의 글자나 세밀한 디테일이 의미를 전달한다면, 글자 수준(4.5:1)을 고려해야 합니다. 3:1은 단순한 형태 아이콘의 하한선입니다.

Q4. 컬러 버튼 위 흰 아이콘은 어떻게 보나요? 그 버튼색과 흰색의 대비를 확인합니다. 밝은 버튼에 흰 아이콘은 대비가 약할 수 있으니, 버튼색을 충분히 진하게 하거나 아이콘 색을 조정해야 합니다. ’아이콘이 놓인 실제 배경’이 기준입니다.

Q5. 선명한 화면 모드에서도 3:1인가요? 아닙니다. 선명한 화면 모드는 아이콘도 더 강한 대비(매직넘버 70, 7:1)를 요구합니다(다음 편 DS-025). 모드마다 기준이 다릅니다.

11. 마무리 — 보조 단서도 보여야 한다

DS-024의 메시지는 이 시리즈의 일관된 원리를 아이콘에 적용합니다.

아이콘은 색을 못 보는 사용자를 위한 보조 단서다. 그러니 그 아이콘 자체가 반드시 보여야 한다.

우리는 색에만 의존하지 말고 아이콘을 함께 쓰라고 거듭 강조했습니다(6편·13편). 그 전제가 성립하려면, 아이콘이 충분히 보여야 합니다. 흐린 아이콘은 보조 단서가 아니라 또 하나의 장벽입니다. 그래서 아이콘에도 명확한 대비 기준(3:1, 매직넘버 40)이 필요하고, 특히 아이콘만으로 기능을 표현하는 버튼에서는 이 가시성이 필수입니다. 형태로 말하는 아이콘도, 그 형태가 보일 때만 말할 수 있습니다.

다음 편은 이 아이콘 대비를 선명한 화면 모드에서 봅니다. DS-025 — “선명한 화면 모드에서 아이콘 색상을 매직넘버 70(대비 7:1)으로 적용한다.” 글자(DS-021), 입력칸(DS-023)에 이어 아이콘도 고대비 모드에서 강화됩니다.

다음 편 예고 ▶ 「025. 선명한 화면 모드에서 아이콘 색상을 매직넘버 70(명도대비 7:1)으로 적용하고 있다.」

우리 사이트의 아이콘이 충분히 보이는지 확인하려면? ViewCheck는 아이콘과 배경의 대비를 계산해 3:1(매직넘버 40)을 충족하는지, 컬러 버튼·이미지 위 아이콘과 아이콘 전용 버튼이 또렷한지를 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (아이콘·매직넘버) — https://www.krds.go.kr/html/site/style/style_02.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컴포넌트,웹표준