선명한 모드 아이콘은 7

KRDS DS-090 — 선명한 화면 모드에서 인접 색상과 7:1의 대비율을 준수한 아이콘을 적용하고 있다.

0. 들어가며 — 고대비 모드의 아이콘 대비

지난 89편(아이콘 3:1)에 이어, 이번 90편은 선명한 화면 모드의 아이콘 대비 — 7:1 입니다.

기본 모드 3:1(89편) → 선명한 화면 모드 7:1로 강화됩니다. 25편(선명모드 아이콘 매직넘버 70=7:1)에서 이미 다룬 것과 같은 내용으로, 아이콘 카테고리에서 다시 명시됩니다. 선명한 화면 모드 가족 규칙(005·019·021·023·025)의 아이콘판이죠. 이번 편은 간단히 정리합니다.

1. 규칙 원문 — 7:1

DS-090 (디자인 스타일 > 아이콘) “선명한 화면 모드에서 인접 색상과 7:1의 대비율을 준수한 아이콘을 적용하고 있다.”

선명한 화면 모드에서 아이콘이 인접 색상과 대비 7:1 이상이어야 한다는 뜻입니다(기본 모드 3:1보다 강화).

정리: 선명한 화면 모드 아이콘은 인접 색상과 7:1 이상 대비를 확보하라. 이게 DS-090입니다.

2. 왜 7:1로 강화하나

21편·25편에서 본 것과 같습니다 — 선명한 화면 모드 사용자(저시력·고령)는 기본 대비로 부족하기 때문 입니다. 기본 모드 3:1 아이콘은 저시력 사용자에게 흐립니다. 아이콘이 색약·저시력자를 위한 보조 단서인데, 정작 그들에게 안 보이면 의미가 없죠. 그래서 고대비 모드에서는 7:1까지 강화해 흐려진 시야에서도 아이콘이 또렷하게 보이게 합니다.

이로써 선명한 화면 모드에서 강화되는 요소가 모두 모입니다 — 글자(15:1, 21편), 입력칸 두께(23편), 아이콘 (7:1, 90편). 화면의 모든 시각 요소가 고대비 모드에서 함께 강화되어, 저시력 사용자에게 일관된 또렷함을 제공하죠(25편의 ‘화면 전체 재설계’). 아이콘 7:1은 그 일관된 강화의 한 조각입니다.

3. 점검 / 개선

무엇을 점검하나

선명모드 아이콘 대비 — 7:1 이상인가.

모드별 분리 — 기본(3:1)/선명(7:1) 아이콘 색이 구분되는가.

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

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

역할	책임
디자이너	선명모드 아이콘 7:1 설계
퍼블리셔/개발	모드별 아이콘 색 구현

기관 유형	DS-090 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선명모드 제공 시)

선명한 화면 모드를 제공하고 아이콘이 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드 아이콘이 7:1 이상 대비인가요?

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

□ 글자·입력칸과 함께 아이콘도 강화됐나요?

❓ FAQ

Q1. 25편과 같은가요? 같은 내용입니다(선명모드 아이콘 7:1). 25편은 색상 카테고리 매직넘버 70 관점, 90편은 아이콘 카테고리 인접 색상 7:1 관점입니다. Q2. 왜 7:1인가요? 저시력 사용자는 3:1로 부족합니다. 흐려진 시야에서도 아이콘이 보이게 7:1로 강화합니다. Q3. KRDS를 채택하면 자동인가요? KRDS는 모드별 아이콘 대비가 정의돼 있습니다.

6. 마무리

DS-090의 메시지:

선명한 화면 모드 아이콘은 7:1 — 보조 단서가 가장 필요한 사용자에게 또렷하게.

고대비 모드에서 아이콘을 7:1로 강화하면, 저시력 사용자도 보조 단서인 아이콘을 또렷이 봅니다. 선명모드 가족 규칙(글자·입력칸·아이콘)의 아이콘판이죠.

다음 편은 아이콘 색의 의미를 다룹니다. DS-091 — “아이콘의 색상으로 아이콘 동작의 중요성을 반영한다.”

다음 편 예고 ▶ 「091. 아이콘의 색상으로 아이콘 동작의 중요성을 반영하고 있다.」

ViewCheck는 선명한 화면 모드 아이콘이 7: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컴포넌트,웹표준