가장 잘 안 보이는 사람을 위한 가장 또렷한 글자

KRDS DS-021 — 선명한 화면 모드에서 글자 색상을 매직넘버 70(명도대비 7:1)으로 적용하고, 본문 글자 색상을 매직넘버 90(명도 대비 15:1)으로 적용하고 있다.

0. 들어가며 — 같은 글자, 더 강한 대비

지난 20편에서 기본 모드의 글자 대비 기준을 봤습니다 — 일반 글자 매직넘버 40(3:1), 본문 50(4.5:1). 이번 편은 그 짝, 선명한 화면 모드(고대비 모드)의 글자 기준입니다.

수치만 보면 차이가 확연합니다.

	일반 글자	본문 글자
기본 모드(20편)	매직넘버 40 (3:1)	매직넘버 50 (4.5:1)
선명한 화면 모드(21편)	매직넘버 70 (7:1)	매직넘버 90 (15:1)

기본 모드의 4.5:1이 본문의 표준이라면, 선명한 화면 모드는 무려 15:1 — 거의 흰 바탕에 검은 글씨에 가까운, 극단적으로 또렷한 대비를 요구합니다. 왜 이렇게까지 높일까요? 답은 5편에서 봤습니다 — 선명한 화면 모드는 일반 모드로는 글자를 못 읽는 저시력·고령 사용자를 위한 모드이기 때문입니다. 이번 편은 이 강화된 글자 기준의 의미와, 왜 15:1이라는 극단이 필요한지를 풀어냅니다.

1. 규칙 원문 — 두 개의 강화된 기준

DS-021 (디자인 스타일 > 색상) “선명한 화면 모드에서 ① 글자 색상을 매직넘버 70(명도대비 7:1), ② 본문 글자 색상을 매직넘버 90(명도 대비 15:1) 으로 적용하고 있다.”

① 일반 글자 — 매직넘버 70 (7:1)

선명한 화면 모드의 일반 글자(제목·보조 텍스트) 기준입니다. 단계 차 70 이상이면 대비 7:1이 보장됩니다. 이는 WCAG의 가장 높은 기준인 AAA(7:1) 에 해당합니다. 기본 모드 일반 글자(3:1)보다 훨씬 강합니다.

② 본문 글자 — 매직넘버 90 (15:1)

선명한 화면 모드의 본문 기준입니다. 단계 차 90 이상이면 대비 약 15:1 이 보장됩니다. WCAG AAA(7:1)를 한참 넘는, 거의 최대(21:1)에 가까운 극단적 대비입니다.

정리: 선명한 화면 모드에서 일반 글자는 단계 차 70(7:1), 본문은 90(15:1)으로 — 기본 모드보다 훨씬 강하게. 이게 DS-021입니다.

2. 기본 모드와의 비교 — 왜 두 배 가까이 높이나

기본 모드(40/50)와 선명한 화면 모드(70/90)를 나란히 보면, 대비 기준이 크게 뛰는 것을 알 수 있습니다. 본문은 4.5:1에서 15:1로, 무려 3배가 넘습니다. 왜 이렇게 큰 차이를 둘까요?

핵심은 두 모드의 사용자가 다르다는 것입니다.

기본 모드 사용자 — 일반적인 시력. 4.5:1이면 충분히 읽습니다.

선명한 화면 모드 사용자 — 중증 저시력, 심한 노안, 광과민. 4.5:1로는 여전히 흐릿합니다.

즉 선명한 화면 모드는 ’4.5:1로도 못 읽는 사람’을 위한 모드라, 그들이 읽을 수 있을 만큼 대비를 더 끌어 올려야 합니다. 4.5:1이 ’대부분’의 기준이라면, 15:1은 ’가장 잘 안 보이는 사람까지’의 기준입니다. 같은 글자라도 누구를 위해 만드느냐에 따라 대비 목표가 완전히 달라지는 것이죠.

이 차이가 DS-005(선명한 화면 모드 제공)의 핵심을 다시 확인시킵니다. 선명한 화면 모드는 ’어두운 미적 테마’가 아니라 ’대비 극대화 접근성 모드’입니다. 그 극대화의 구체적 수치가 바로 DS-021의 70/90입니다. 모드의 목적(접근성)이 수치(15:1)로 표현된 것이죠.

저시력이라는 상태를 조금 더 구체적으로 이해하면, 왜 이런 극단적 대비가 필요한지 분명해집니다. 백내장이 진행되면 눈의 수정체가 뿌옇게 흐려져, 마치 성에 낀 유리창 너머로 세상을 보는 것과 비슷해집니다. 이 상태로 4.5:1 대비의 회색 글씨를 보면, 글자와 배경이 뿌연 안개 속에서 뭉개져 거의 같은 톤으로 보입니다. 충분히 또렷하다고 여겼던 대비가, 흐려진 눈에서는 사라지는 것이죠. 노안, 황반변성, 녹내장 등 다양한 시각 질환이 비슷한 방식으로 대비 감도를 떨어뜨립니다.

이런 눈에 글자를 전달하려면, 글자와 배경의 차이가 안개를 뚫고도 남을 만큼 커야 합니다. 그것이 15:1입니다. 거의 흑백에 가까운 이 극단적 대비는, 흐려진 시야에서도 글자의 윤곽이 살아남게 합니다. 일반 사용자에게는 ‘지나치게 진한’ 대비가, 저시력 사용자에게는 ‘겨우 읽을 수 있는’ 대비인 것이죠. 같은 화면을 보는 두 사람의 경험이 이토록 다르기에, 한쪽 기준으로 모두를 만족시킬 수 없고, 그래서 모드를 나누고 각각의 대비를 따로 정하는 것입니다.

3. 15:1이라는 극단 — 거의 흑백

본문 15:1이 얼마나 강한 대비인지 감을 잡아봅시다.

명도 대비의 범위는 1:1(같은 색, 안 보임)부터 21:1(순흑 글씨+순백 배경, 최대)까지입니다. 15:1은 이 최대치에 상당히 가깝습니다. 거의 흰 바탕에 검은 글씨 수준이죠. 기본 모드 본문(4.5:1)이 ‘읽을 만한’ 대비라면, 15:1은 ‘최대한 또렷한’ 대비입니다.

왜 이렇게까지 극단으로 갈까요? 저시력 사용자에게는 ‘조금 더 진한’ 정도로는 부족하기 때문입니다. 대비를 어중간하게 높이면, 일반 사용자에겐 충분해 보여도 저시력 사용자에겐 여전히 흐립니다. 그래서 선명한 화면 모드는 타협하지 않고 거의 최대 대비까지 밀어붙입니다. “어차피 접근성을 위한 모드라면, 확실하게”라는 태도죠.

이 극단적 대비는 일반 사용자에게는 다소 강하게 느껴질 수 있습니다. 그래서 선명한 화면 모드는 모든 사용자의 기본이 아니라, 필요한 사용자가 선택하는 별도 모드입니다(5편). 일반 모드는 4.5:1로 편안하게, 선명한 화면 모드는 15:1로 또렷하게 — 두 모드가 각자의 사용자에게 최적화되는 것입니다.

4. 매직넘버로 다시 산수 — 70/90

DS-020에서 본 매직넘버의 편리함이 여기서도 그대로 작동합니다. 선명한 화면 모드의 글자 색도 계산이 아니라 단계 뺄셈으로 정합니다.

선명한 화면 모드는 어두운 배경입니다. 예를 들어 배경이 매우 어두운 단계(Gray-95 등)라면 —

본문 → 단계 차 90 이상 → 거의 가장 밝은 단계(Gray-5 등)의 글자

일반 글자 → 단계 차 70 이상

어두운 배경에서 밝은 글자로, 단계 차를 90/70 이상 확보하는 것이죠. 기본 모드(밝은 배경+어두운 글자, 차 50/40)와 방향은 반대지만, ’단계 차로 대비를 보장한다’는 원리는 똑같습니다. 매직넘버는 모드와 방향에 무관하게 작동합니다.

핵심은 두 모드의 글자 단계를 각각 별도로 정의해야 한다는 것입니다. 기본 모드 본문(차 50)과 선명한 화면 모드 본문(차 90)은 다른 단계를 쓰므로, 모드별 글자 토큰을 따로 둬야 합니다. 모드를 전환하면 글자 색이 그 모드의 대비 기준에 맞는 단계로 바뀌게요.

5. 모드별 글자 토큰 분리 — 함께 설계하기

19편에서 강조한 ’두 모드를 함께 설계한다’는 원칙이 글자에도 적용됩니다.

선명한 화면 모드를 제대로 만들려면, 글자 색 토큰을 모드별로 분리해야 합니다. --color-text-default가 기본 모드에선 차 50의 단계를, 선명한 화면 모드에선 차 90의 단계를 가리키도록 모드에 따라 값이 바뀌게 설계하는 것이죠. 그러면 사용자가 모드를 전환할 때, 모든 글자가 자동으로 그 모드의 대비 기준에 맞는 색으로 바뀝니다.

이걸 안 하고 기본 모드 글자 색을 선명한 화면 모드에 그대로 쓰면, 고대비 모드인데 글자 대비가 4.5:1에 머물러 — 저시력 사용자가 여전히 못 읽습니다. 선명한 화면 모드의 의미가 사라지는 것이죠. 그래서 DS-021은 단지 ’대비를 높이라’가 아니라, 모드별로 글자 대비 기준을 다르게 설계하라는 요구입니다. KRDS를 채택하면 두 모드의 글자 토큰이 각각 정의돼 있어, 이 까다로운 작업이 이미 끝나 있습니다.

여기서 선명한 화면 모드를 다루는 규칙들이 하나의 가족을 이룬다는 점을 정리하면 좋습니다. DS-005(모드 제공), DS-019(깊이를 밝기로), DS-021(글자 대비 70/90), 그리고 다음에 볼 DS-023(인풋 보더를 더 두껍게). 이 규칙들은 모두 ‘선명한 화면 모드를 제대로 만들려면 무엇을 강화해야 하는가’를 항목별로 규정합니다. 글자만 또렷하게 한다고 되는 게 아니라, 깊이도 밝기로 다시 표현하고, 경계(보더)도 더 두껍게 하고, 색 세트도 따로 준비해야 합니다. 화면을 구성하는 거의 모든 요소가 이 모드에서는 ’대비 강화’ 방향으로 재설계되는 것이죠.

이 가족 규칙들이 시사하는 바는 분명합니다. 접근성 모드는 부분적인 보정이 아니라 화면 전체의 재설계라는 것. 글자 하나만 진하게 한 어설픈 고대비 모드는, 정작 그 모드가 필요한 사용자에게 반쪽짜리 도움밖에 못 줍니다. 글자는 또렷한데 입력칸 경계가 안 보이거나, 카드의 층위가 구분 안 되면 여전히 화면을 쓰기 어렵죠. 그래서 선명한 화면 모드는 이 모든 규칙을 함께 충족할 때 비로소 완성됩니다. DS-021의 글자 대비는 그 완성된 그림의 한 조각이며, 가장 눈에 띄는 핵심 조각입니다 — 결국 사용자가 가장 많이 읽는 것이 글자이기 때문입니다.

6. 흔한 위반 패턴

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

함정 ① 선명한 모드에 기본 대비 그대로. 고대비 모드인데 글자 대비가 4.5:1 → 저시력 사용자 못 읽음. → 본문 90(15:1), 일반 70(7:1)으로 강화.

함정 ② 모드별 글자 토큰 미분리. 두 모드가 같은 글자 색 사용 → 한쪽 모드에서 대비 어긋남. → 모드별 토큰 분리.

함정 ③ 어중간한 강화. 선명한 모드 본문을 7:1 정도로만 → 저시력에 여전히 부족. → 본문은 15:1까지.

함정 ④ 색 반전만. 기본 모드를 색만 반전 → 대비 기준 미반영. → 모드별 대비 기준 적용.

핵심: 선명한 화면 모드의 글자는 본문 15:1, 일반 7:1 — 기본 모드보다 확실히 강해야 의미가 있습니다.

7. 무엇을 점검하나

DS-021은 선명한 화면 모드 글자가 강화된 대비를 충족하는지를 봅니다.

본문 대비 — 선명한 화면 모드 본문이 단계 차 90(15:1) 이상인가.

일반 글자 대비 — 단계 차 70(7:1) 이상인가.

모드별 분리 — 기본 모드와 선명한 화면 모드의 글자 대비가 각각 적절한가.

전환 동작 — 모드 전환 시 글자 색이 해당 대비 기준으로 바뀌는가.

8. 누가 담당하나

역할	책임
디자이너	선명한 화면 모드 글자 단계(본문 90, 일반 70) 설계
퍼블리셔/개발	모드별 글자 토큰 구현, 전환 시 대비 반영
접근성 담당	선명한 화면 모드 글자 대비가 15:1/7:1 충족하는지 검증

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

적용 대상

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

선명한 화면 모드를 제공하는(DS-005) 사이트에 적용됩니다.

예외(N/A)

선명한 화면 모드를 제공하지 않으면 적용 시점이 오지 않습니다. 다만 제공이 권장되므로, 제공한다면 DS-021도 함께 충족해야 합니다.

10. 단계별 개선 방법

Before / After

/* ❌ Before: 선명한 모드인데 글자 대비가 기본 수준(4.5:1) */ [data-mode="high-contrast"] body { background: #1a1a1a; color: #888; /* 어두운 배경에 회색 → 대비 부족 */ } /* ✅ After: 본문 15:1, 일반 7:1 (모드별 토큰) */ [data-mode="high-contrast"] { --color-bg: var(--gray-100); /* 거의 검정 */ --color-text-default: var(--gray-5); /* 거의 흰색 → ~15:1 */ --color-text-muted: var(--gray-25); /* 일반 → ~7:1 */ }

정비 순서

모드별 글자 토큰 분리 — 기본/선명한 모드 글자 색 별도 정의.

본문 90 적용 — 선명한 모드 본문을 단계 차 90(15:1)으로.

일반 70 적용 — 제목·보조 텍스트를 단계 차 70(7:1)으로.

전환 검증 — 모드 전환 시 글자가 강화 대비로 바뀌는지 확인.

11. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명한 화면 모드 본문이 거의 흑백 수준(15:1) 으로 또렷한가요?

□ 선명한 모드 글자 대비가 기본 모드보다 확실히 강한가요?

□ 모드별 글자 토큰이 분리돼 있나요?

□ 모드 전환 시 글자가 강화 대비로 바뀌나요?

□ 선명한 모드를 ’색 반전’만으로 만들지 않았나요?

❓ FAQ

Q1. 15:1이면 너무 강해서 일반 사용자가 불편하지 않나요? 그래서 선명한 화면 모드는 모든 사용자의 기본이 아니라 ’필요한 사용자가 선택하는 별도 모드’입니다(5편). 일반 사용자는 기본 모드(4.5:1)를, 저시력 사용자는 선명한 모드(15:1)를 씁니다. 각자에게 최적화됩니다.

Q2. 왜 본문이 15:1까지 가나요? 7:1이면 충분하지 않나요? 7:1은 일반 사용자 기준 최고 대비(AAA)입니다. 하지만 선명한 화면 모드의 사용자는 7:1로도 부족할 수 있어, 거의 최대(15:1)까지 끌어올립니다. ‘가장 잘 안 보이는 사람까지’ 읽을 수 있게 하려는 것입니다.

Q3. 기본 모드만 만들고 선명한 모드는 안 만들면요? 그러면 DS-005(선명한 화면 모드 제공)부터 미충족입니다. 선명한 화면 모드 제공이 권장되며, 제공한다면 글자 대비도 DS-021 기준(70/90)을 지켜야 합니다.

Q4. 매직넘버 90이 정확히 15:1인가요? KRDS 매직넘버 체계에서 단계 차 90은 약 15:1에 대응합니다. 정확한 색값은 KRDS 토큰에 정의돼 있으며, 단계 차만 90 이상 확보하면 그 대비가 보장됩니다.

Q5. KRDS를 채택하면 자동인가요? KRDS는 기본 모드와 선명한 화면 모드의 글자 토큰을 각각 대비 기준에 맞게 정의해 둡니다. 채택해 모드별 토큰을 쓰면 DS-020·021이 자동 충족됩니다. 모드 전환 기능만 구현하면 됩니다.

12. 마무리 — 끝단을 위한 극단

DS-021의 메시지는 5편의 정신을 수치로 보여줍니다.

접근성은 ’평균’이 아니라 ’가장 잘 안 보이는 사람’을 기준으로 한다. 그래서 때로는 극단(15:1)이 필요하다.

기본 모드의 4.5:1은 대부분을 위한 기준이고, 선명한 화면 모드의 15:1은 ’대부분에 못 드는 사람’을 위한 기준입니다. 같은 글자라도 누구를 위해 만드느냐에 따라 대비 목표가 3배 넘게 달라집니다. 이 극단적 대비는 일반 사용자에겐 과하지만, 그것이 필요한 한 명에게는 ’읽을 수 있느냐 없느냐’를 가릅니다. 그 한 명을 위해 모드를 따로 만들고 대비를 끝까지 밀어붙이는 것 — 공공서비스의 책임이 수치로 드러난 규칙입니다.

다음 편부터는 글자에서 컴포넌트의 경계로 넘어갑니다. DS-022 — “인풋 보더 색상을 매직넘버 50(대비 4.5:1)으로 적용한다.” 입력칸의 테두리가 충분히 보여야 하는 이유, 비텍스트 대비(2편의 1.4.11)가 입력 폼에 적용되는 모습을 다룹니다.

다음 편 예고 ▶ 「022. 인풋 보더 색상을 매직넘버 50(명도대비 4.5:1)으로 적용하고 있다.」

우리 사이트의 선명한 화면 모드 글자 대비가 충분한지 확인하려면? ViewCheck는 선명한 화면 모드의 글자-배경 대비를 계산해, 본문이 15:1(매직넘버 90), 일반 글자가 7:1(매직넘버 70)을 충족하는지, 기본 모드와 적절히 구분되는지를 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (선명한 화면 모드 글자 대비) — https://www.krds.go.kr/html/site/style/style_02.html

WCAG 2.1 Understanding 1.4.6 Contrast (Enhanced, AAA) — https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html

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

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