더 굵게, 더 또렷하게

KRDS DS-112 — 선명한 화면 모드에서 버튼, 입력, 선택 컴포넌트의 외곽선, 링크 밑줄을 기본 모드 보다 굵고 명도 대비가 높게 적용하고 있다.

0. 들어가며 — 컴포넌트 외곽선의 강화

이번 112편은 선명한 화면 모드에서 버튼·입력·선택 컴포넌트의 외곽선과 링크 밑줄을 기본 모드보다 굵고 대비 높게 적용하는 규칙입니다.

23편에서 입력칸 테두리를 선명한 화면 모드에서 더 두껍게 했는데, 112편은 이를 버튼·선택 컴포넌트와 링크 밑줄로 확장합니다. 선명한 화면 모드에서는 상호작용 요소의 외곽선·밑줄을 두께(굵게)와 대비(높게) 두 채널로 강화하는 것이죠. 이번 편은 컴포넌트 외곽선 강화를 풀어냅니다.

1. 규칙 원문 — 굵고 대비 높게

DS-112 (디자인 스타일 > 선명한 화면 모드) “선명한 화면 모드에서 버튼, 입력, 선택 컴포넌트의 외곽선, 링크 밑줄을 기본 모드보다 굵고 명도 대비가 높게 적용하고 있다.”

상호작용 요소의 외곽선·밑줄을 선명한 화면 모드에서 더 굵게 + 더 높은 대비로 강화하라는 뜻입니다.

정리: 선명한 화면 모드에서 버튼·입력·선택 외곽선과 링크 밑줄을 더 굵고 대비 높게 하라. 이게 DS-112입니다.

2. 왜 두께와 대비를 함께 강화하나

23편(입력칸 두께)에서 본 원리입니다 — 대비와 두께는 별개의 채널이고, 저시력 사용자를 위해 둘 다 강화해야 가시성이 완성됩니다.

선명한 화면 모드에서 버튼·입력·선택 컴포넌트의 외곽선, 링크 밑줄을 기본 모드 그대로 두면, 저시력 사용자 에게 흐릿합니다. 그래서 두 가지를 강화하죠 — 대비를 높여(색 차이 키움) 또렷하게, 두께를 굵게 해(면적 키움) 흐려진 시야에서도 인지되게. 대비만 높이면 가는 선이 사라질 수 있고, 두께만 키우면 색이 약하면 안 보이므로, 둘 다 강화해야 합니다(23편의 ‘대비+두께’ 원리).

이는 112편이 23편(입력칸)·25편(아이콘)을 버튼·선택·링크로 확장한 것입니다. 선명한 화면 모드에서 모든 상호작용 요소(버튼·입력·선택·링크)의 경계가 굵고 또렷해지면, 저시력 사용자가 ’여기가 누를 곳·입력할 곳’을 쉽게 인지하죠. 상호작용 요소는 사용자가 반드시 찾아야 하는 컨트롤이라(22편), 선명한 화면 모드에서 특히 강화되는 것입니다. 두께·대비라는 다중 채널로 가시성을 보장하는, 선명한 화면 모드 가족 규칙의 한 조각입니다.

3. 점검 / 개선

무엇을 점검하나

외곽선 강화 — 버튼·입력·선택 외곽선이 선명모드에서 더 굵고 대비 높은가.

링크 밑줄 강화 — 링크 밑줄이 더 굵고 또렷한가.

두 채널 — 두께와 대비가 함께 강화됐는가.

Before / After

/* ✅ 선명모드 상호작용 요소 강화 */ [data-mode="high-contrast"] .btn, [data-mode="high-contrast"] input, [data-mode="high-contrast"] select { border: 2px solid var(--gray-5); /* 더 굵게 + 높은 대비 */ } [data-mode="high-contrast"] a { text-decoration-thickness: 2px; }

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

역할	책임
디자이너	선명모드 컴포넌트 외곽선·밑줄 강화 설계
퍼블리셔/개발	두께·대비 강화 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명모드에서 버튼·입력·선택 외곽선이 더 굵은가요?

□ 외곽선 대비가 더 높은가요?

□ 링크 밑줄이 더 굵고 또렷한가요?

□ 두께와 대비가 함께 강화됐나요?

❓ FAQ

Q1. 23편(입력칸)과 다른가요? 23편은 입력칸 두께, 112편은 버튼·선택·링크까지 확장 + 대비 강화도 명시합니다. 선명모드 상호작용 요소 강화의 종합이죠. Q2. 왜 두께와 대비 둘 다인가요? 대비만 높이면 가는 선이 사라지고, 두께만 키우면 색이 약하면 안 보입니다. 둘 다 강화해야 저시력 시야에서 확실히 보입니다(23편). Q3. KRDS를 채택하면 자동인가요? KRDS는 선명모드에서 컴포넌트 외곽선·밑줄을 강화합니다.

6. 마무리

DS-112의 메시지:

더 굵게, 더 또렷하게 — 선명모드의 상호작용 요소는 두께·대비 두 채널로 강화한다.

선명한 화면 모드에서 버튼·입력·선택·링크의 경계를 두께와 대비로 함께 강화하면, 저시력 사용자가 상호작용 요소를 쉽게 인지합니다. 대비+두께라는 다중 채널 강화 원리(23편)가 모든 상호작용 요소로 확장된 것이죠.

다음 편은 본문 인라인 링크를 다룹니다. DS-113 — “선명한 화면 모드에서 본문의 모든 인라인 링크에 밑줄을 표시한다.”

다음 편 예고 ▶ 「113. 선명한 화면 모드에서 본문에 사용된 모든 인라인 유형의 링크에 밑줄을 표시하고 있다.」

ViewCheck는 선명한 화면 모드에서 컴포넌트 외곽선·링크 밑줄이 더 굵고 대비 높게 강화됐는지를 진단합니다.

📚 참고 출처

KRDS 선명한 화면 모드 가이드 — https://www.krds.go.kr/html/site/style/style_02.html

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

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