아이콘도 고대비 모드에선 더 또렷이

KRDS DS-025 — 선명한 화면 모드에서 아이콘 색상을 매직넘버 70(명도대비 7:1)으로 적용하고 있다.

0. 들어가며 — 고대비 모드 강화의 마지막 조각

지난 24편에서 기본 모드 아이콘의 대비 기준(매직넘버 40, 3:1)을 봤습니다. 이번 편은 그 짝, 선명한 화면 모드(고대비 모드)의 아이콘 기준입니다.

수치는 예상대로 강화됩니다.

	아이콘 대비
기본 모드(24편)	매직넘버 40 (3:1)
선명한 화면 모드(25편)	매직넘버 70 (7:1)

3:1에서 7:1로, 두 배 이상 강해집니다. 이로써 선명한 화면 모드에서 강화되는 요소들 — 글자(DS-021), 입력칸 두께(DS-023), 그리고 아이콘(DS-025) — 이 모두 모였습니다. 고대비 모드의 가시성 강화 가족이 완성되는 것이죠. 이번 편은 짧지만, 왜 아이콘까지 7:1로 끌어올리는지, 그리고 고대비 모드 설계가 어떻게 ’화면 전체의 일관된 강화’로 완성되는지를 정리합니다.

1. 규칙 원문 — 강화된 아이콘 기준

DS-025 (디자인 스타일 > 색상) “선명한 화면 모드에서 아이콘 색상을 매직넘버 70(명도대비 7:1) 으로 적용하고 있다.”

“선명한 화면 모드에서 아이콘 색상”

고대비 모드일 때 화면 아이콘의 색입니다.

“매직넘버 70(명도대비 7:1)”

아이콘이 배경과 단계 차 70 이상, 즉 대비 7:1 이상이어야 한다는 뜻입니다. 기본 모드(3:1)보다 훨씬 강하고, WCAG의 최고 기준(AAA, 7:1)에 해당합니다.

정리: 선명한 화면 모드에서 아이콘은 배경과 대비 7:1(매직넘버 70) 이상으로 — 기본 모드보다 강하게. 이게 DS-025입니다.

2. 왜 아이콘도 7:1까지 — 보조 단서의 강화

기본 모드 아이콘은 3:1이면 충분했습니다. 형태로 의미를 전달하는 아이콘은 글자보다 낮은 대비로도 인식 가능하기 때문이죠(24편). 그런데 선명한 화면 모드에서는 왜 7:1까지 올릴까요?

이유는 21편(글자 15:1)에서 본 것과 같습니다 — 선명한 화면 모드의 사용자가 다르기 때문입니다. 저시력·고령 사용자에게는 기본 모드의 3:1 아이콘이 여전히 흐립니다. 아이콘은 색약자·저시력자를 위한 핵심 보조 단서인데 (13편·24편), 그 보조 단서가 정작 저시력 사용자에게 안 보이면 의미가 없습니다. 그래서 고대비 모드에서는 아이콘 대비를 7:1까지 끌어올려, 흐려진 시야에서도 아이콘 형태가 또렷이 인지되게 합니다.

이는 ’보조 단서의 신뢰성’을 모든 모드에서 보장하려는 것입니다. 우리는 이 시리즈 내내 “색만 의존하지 말고 아이콘을 함께 쓰라”고 했습니다. 그 전제가 어떤 모드에서든 성립하려면, 아이콘이 어떤 모드에서든 보여야 합니다. 기본 모드는 3:1로, 고대비 모드는 7:1로 — 각 모드의 사용자에게 맞는 대비로 아이콘 가시성을 보장하는 것이죠. 아이콘이 보여야 색약·저시력 사용자가 정보를 받고, 그래야 다중 채널 접근성이 완성됩니다.

여기에는 미묘하지만 중요한 함정이 하나 숨어 있습니다. 디자이너가 기본 모드에서 색약·저시력 대응을 잘 해서 색 + 아이콘 + 텍스트를 모두 갖췄다고 합시다. 그런데 선명한 화면 모드로 전환할 때 아이콘 대비를 강화하는 것을 깜빡하면, 정작 그 보조 단서가 가장 필요한 저시력 사용자(선명한 화면 모드를 쓰는 바로 그 사람들)에게 아이콘이 흐려져 버립니다. 기본 모드에서 잘한 접근성 노력이, 고대비 모드에서 아이콘 강화를 빠뜨리는 바람에 무너지는 것이죠. 가장 도움이 필요한 사용자에게 보조 단서가 사라지는, 뼈아픈 역설입니다.

이 함정이 DS-025가 별도 규칙으로 존재해야 하는 이유입니다. “아이콘을 보조 단서로 쓰라”(13편)와 “기본 모드 아이콘은 3:1”(24편)만으로는, 고대비 모드의 아이콘이 자동으로 강화되지 않습니다. 명시적으로 “선명한 화면 모드 아이콘은 7:1”이라고 못 박아야, 디자이너가 그 모드에서 아이콘도 강화하는 것을 잊지 않습니다. 접근성은 한 군데를 잘하는 것이 아니라 모든 경로에서 빠짐없이 지켜질 때 완성되며, 846개 규칙이 이토록 세밀하게 나뉜 것은 바로 이 ’빠짐없이’를 보장하기 위해서입니다.

3. 고대비 모드 강화 가족의 완성

DS-025로 선명한 화면 모드의 요소별 강화 규칙이 모두 모였습니다. 한눈에 정리해 봅시다.

규칙	요소	기본 모드	선명한 화면 모드
DS-019	깊이	그림자	밝기로 표현
DS-021	글자	40/50 (3:1, 4.5:1)	70/90 (7:1, 15:1)
DS-023	입력칸	기본 두께	더 두껍게
DS-025	아이콘	40 (3:1)	70 (7:1)

이 표가 보여주는 것은, 선명한 화면 모드가 화면을 구성하는 거의 모든 시각 요소를 일관되게 강화한다는 점입니다. 글자도, 아이콘도, 입력칸도, 깊이도 — 각자의 방식으로 더 또렷해집니다. 어느 하나만 강화하고 나머지를 두면, 강화된 글자는 보이는데 아이콘이 안 보이거나, 글자는 또렷한데 입력칸이 묻히는 식의 ’반쪽짜리 고대비 모드’가 됩니다. 화면이 사용자에게 일관된 또렷함을 주려면, 모든 요소가 함께 강화되어야 합니다.

이 일관성이 바로 21편·23편에서 강조한 ’접근성 모드 = 화면 전체의 재설계’의 의미입니다. 선명한 화면 모드는 밝은 모드에 필터 하나 씌우는 게 아니라, 글자·아이콘·입력칸·깊이 각각에 대해 ’이 모드에서는 어떻게 더 또렷하게 할까’를 따로 설계한 결과물입니다. KRDS가 이를 요소별 규칙(DS-019·021·023·025)으로 나눈 것은, 그 재설계의 각 항목을 빠짐없이 점검·이행하게 하기 위해서입니다.

이렇게 요소별로 규칙을 나누면 점검도 이행도 명확해집니다. “선명한 화면 모드를 잘 만들었나요?”라는 막연한 질문은 답하기 어렵지만, “글자는 15:1인가? 아이콘은 7:1인가? 입력칸은 더 두꺼운가? 깊이는 밝기로 표현됐는가?”라는 구체적 질문들로 쪼개면 하나씩 확인할 수 있습니다. 각 규칙이 체크리스트의 한 칸이 되어, 빠진 부분이 분명히 드러나는 것이죠. 846개라는 방대한 규칙 수가 부담스러워 보이지만, 그 세분화 덕분에 실제로는 점검이 더 쉬워지고 누락이 줄어듭니다. 추상적 원칙 하나보다 구체적 항목 열 개가 실무에서는 더 강력합니다.

그리고 이 요소별 강화는 자체 설계하는 기관에게는 상당한 작업량입니다. 글자·아이콘·입력칸·깊이 각각에 대해 두 모드의 색과 두께를 따로 정의하고 검증해야 하니까요. 그래서 이 지점에서도 KRDS 토큰 채택의 이점이 큽니다. KRDS는 모든 요소의 두 모드 값을 이미 정의·검증해 두었으므로, 채택하면 이 방대한 재설계 작업을 직접 할 필요 없이 모드 전환 기능만 구현하면 됩니다. 바퀴를 다시 발명하지 않는 것 — 이 시리즈가 반복해 온 권고가 고대비 모드 설계에서 특히 빛을 발합니다.

4. 흔한 위반 패턴

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

함정 ① 고대비 모드에 기본 대비. 선명한 모드인데 아이콘 대비가 3:1 → 저시력 사용자에게 흐림. → 7:1로 강화.

함정 ② 모드별 아이콘 색 미분리. 두 모드가 같은 아이콘 색 → 한쪽에서 대비 부족. → 모드별 토큰.

함정 ③ 글자만 강화. 글자는 15:1로 강화하고 아이콘은 그대로 → 아이콘 보조 단서 무력. → 아이콘도 7:1.

함정 ④ 색 반전만. 선명한 모드를 색 반전만으로 → 아이콘 대비 미반영. → 모드별 대비 적용.

핵심: 선명한 화면 모드에서는 글자만이 아니라 아이콘도 7:1로 강화해야 보조 단서가 살아납니다.

5. 무엇을 점검하나

DS-025는 선명한 화면 모드 아이콘이 강화된 대비를 갖는지를 봅니다.

아이콘 대비 — 선명한 화면 모드 아이콘이 배경과 단계 차 70(7:1) 이상인가.

모드별 분리 — 기본/선명한 모드 아이콘 색이 각각 적절한가.

요소 일관성 — 글자·입력칸과 함께 아이콘도 강화됐는가.

전환 동작 — 모드 전환 시 아이콘 색이 강화 대비로 바뀌는가.

6. 누가 담당하나

역할	책임
디자이너	선명한 화면 모드 아이콘 색(단계 차 70) 설계
퍼블리셔/개발	모드별 아이콘 색 토큰 구현
접근성 담당	고대비 모드 아이콘 대비 7:1 검증

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

적용 대상

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

선명한 화면 모드를 제공하고 아이콘이 있는 사이트에 적용됩니다.

예외(N/A)

선명한 화면 모드를 제공하지 않거나 의미 있는 아이콘이 없으면 적용 시점이 오지 않습니다. 다만 둘 다 갖춘 공공 사이트가 대부분입니다.

8. 단계별 개선 방법

Before / After

/* ❌ Before: 선명한 모드인데 아이콘 대비 약함 */ [data-mode="high-contrast"] .icon { color: #888; background: #1a1a1a; } /* ✅ After: 매직넘버 70(7:1) */ [data-mode="high-contrast"] .icon { color: var(--gray-10); /* 어두운 배경(95)과 단계 차 ~85 → 7:1↑ */ }

정비 순서

모드별 아이콘 토큰 분리 — 기본/선명한 모드 아이콘 색 별도 정의.

선명한 모드 70 적용 — 아이콘을 단계 차 70(7:1)으로.

요소 일관성 확인 — 글자·입력칸과 함께 아이콘도 강화됐는지.

전환 검증 — 모드 전환 시 아이콘 대비가 바뀌는지.

9. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명한 화면 모드 아이콘이 또렷한가요(대비 7:1)?

□ 기본 모드보다 아이콘 대비가 확실히 강한가요?

□ 모드별 아이콘 토큰이 분리돼 있나요?

□ 글자만 강화하고 아이콘을 빠뜨리지 않았나요?

□ 모드 전환 시 아이콘 대비가 바뀌나요?

❓ FAQ

Q1. 왜 기본 3:1, 선명한 모드 7:1인가요? 선명한 화면 모드 사용자는 저시력·고령이라 3:1로는 아이콘이 흐립니다. 아이콘이 색약·저시력자를 위한 핵심 보조 단서이므로, 고대비 모드에서는 7:1까지 강화해 흐려진 시야에서도 보이게 합니다.

Q2. 아이콘도 글자처럼 15:1까지 가나요? 아이콘은 7:1(매직넘버 70)입니다. 글자(15:1)보다는 낮지만, 기본 모드(3:1)보다는 훨씬 강합니다. 형태로 의미를 전달하는 아이콘은 글자만큼 극단적 대비가 필요하지는 않되, 고대비 모드에서는 충분히 강화됩니다.

Q3. 장식 아이콘도 7:1인가요? 순수 장식 아이콘은 면제 대상일 수 있습니다. 의미·기능을 전달하는 아이콘이 대상입니다. 24편과 같은 기준입니다.

Q4. KRDS를 채택하면 자동인가요? KRDS는 기본/선명한 모드의 아이콘 색을 각각 대비 기준에 맞게 정의합니다. 모드별 토큰을 쓰면 DS-024·025가 자동 충족됩니다.

Q5. 글자·아이콘·입력칸을 다 따로 관리해야 하나요? 각 요소에 모드별 토큰이 필요하지만, KRDS 토큰 체계를 채택하면 이미 모두 정의돼 있어 그대로 쓰면 됩니다. 자체 설계라면 요소별·모드별로 대비를 빠짐없이 챙겨야 합니다.

10. 마무리 — 모든 채널을 모든 모드에서

DS-025의 메시지는 고대비 모드 가족의 결론입니다.

접근성 모드는 한 요소만이 아니라 화면의 모든 요소를 일관되게 강화할 때 완성된다.

글자(DS-021), 입력칸(DS-023), 그리고 아이콘(DS-025)까지 — 선명한 화면 모드는 화면의 모든 시각 채널을 함께 또렷하게 만듭니다. 아이콘 하나만 흐려도, 색약·저시력 사용자의 보조 단서가 막혀 접근성 체계에 구멍이 생깁니다. 그래서 고대비 모드는 모든 요소를 빠짐없이 강화해야 하고, DS-025의 아이콘 강화는 그 마지막 조각입니다. 모든 채널을, 모든 모드에서 보장하는 것 — 그것이 진정한 접근성입니다.

다음 편은 색상 카테고리의 마지막 규칙입니다. DS-026 — “상호 작용이 있는 요소의 상태 값을 동일한 색조로 구성하고 점진적으로 증가 또는 감소하는 색상 규칙으로 표현한다.” 버튼의 기본·hover·클릭 상태가 어떻게 일관된 색 변화로 표현되어야 하는지를 다룹니다.

다음 편 예고 ▶ 「026. 상호 작용이 있는 요소의 상태 값을 동일한 색조로 구성하고 점진적으로 증가 또는 감소하는 색상 규칙을 사용하여 표현하고 있다.」

우리 사이트의 선명한 화면 모드 아이콘이 충분히 보이는지 확인하려면? ViewCheck는 선명한 화면 모드의 아이콘-배경 대비를 계산해 7:1(매직넘버 70)을 충족하는지, 글자·입력칸과 함께 일관되게 강화됐는지를 진단합니다.

📚 참고 출처

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