글자 색을 계산하지 말고 단계로 골라라

KRDS DS-020 — 기본 모드에서 글자 색상을 매직넘버 40(명도 대비 3:1)으로 적용하고, 본문 글자 색상을 매직넘버 50(명도대비 4.5:1)으로 적용하고 있다.

0. 들어가며 — 원칙이 정확한 ’수치’가 되다

2편(DS-002)에서 우리는 명도 대비라는 원칙을 배웠습니다. 본문은 4.5:1, 큰 글씨는 3:1. 그리고 4편(DS-004)에서 KRDS의 매직 넘버를 봤습니다 — 단계 차이로 대비를 알 수 있는 영리한 장치요.

DS-020은 이 둘을 합쳐, 글자 색의 정확한 적용 기준을 못 박습니다.

“기본 모드에서 글자 색상을 매직넘버 40(대비 3:1), 본문 글자 색상을 매직넘버 50(대비 4.5:1) 으로 적용한다.”

이게 왜 별도 규칙일까요? 원칙(2편)과 도구(4편)가 있어도, “그래서 글자 색을 정확히 어느 단계로 하라는 거냐”는 실전 질문이 남기 때문입니다. DS-020은 그 답을 숫자로 줍니다 — 일반 글자는 단계 차 40, 본문 글자는 단계 차 50. 디자이너가 글자 색을 고를 때 대비를 계산할 필요 없이, 정해진 단계 차만 지키면 됩니다. 이번 편은 이 ’글자 색의 실전 공식’을 끝까지 풀어냅니다.

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

DS-020 (디자인 스타일 > 색상) “기본 모드에서 ① 글자 색상을 매직넘버 40(명도 대비 3:1) 으로 적용하고, ② 본문 글자 색상을 매직넘버 50(명도대비 4.5:1) 으로 적용하고 있다.”

두 가지 글자 기준이 있습니다.

① 일반 글자 — 매직넘버 40 (3:1)

본문이 아닌 글자 — 큰 제목, 보조적 텍스트 등 — 의 최소 기준입니다. 배경과 단계 차이가 40 이상이면 대비 3:1이 보장됩니다. WCAG의 ‘큰 글씨 3:1’ 기준에 대응합니다.

② 본문 글자 — 매직넘버 50 (4.5:1)

읽어야 할 본문 텍스트의 기준입니다. 배경과 단계 차이가 50 이상이면 대비 4.5:1이 보장됩니다. WCAG의 ‘본문 4.5:1’ 기준이죠. 본문은 가독성이 가장 중요하므로 더 높은 기준이 적용됩니다.

정리: 일반 글자는 배경과 단계 차 40 이상, 본문 글자는 50 이상으로 색을 골라라. 이게 DS-020입니다.

2. 매직넘버 복습 — 단계 빼기로 대비 알기

DS-020을 이해하려면 매직넘버를 간단히 복습해야 합니다(4편 참고).

KRDS 색은 0~100의 명도 단계를 갖습니다. 매직넘버는 두 색의 단계 차이가 곧 대비비로 환산되는 약속입니다.

단계 차이(매직넘버)	명도 대비	글자 용도
40	3:1	일반 글자(큰 제목·보조 텍스트) 최소
50	4.5:1	본문 글자
70	7:1	본문 강화(AAA)
90	15:1	선명한 화면 모드 본문(다음 편)

그래서 글자 색을 고르는 일이 계산이 아니라 뺄셈이 됩니다. 배경 단계에서 글자 단계를 빼서, 그 차이가 40(일반)이나 50(본문) 이상이면 통과입니다. 명도 대비 계산기를 두드릴 필요가 없습니다. 이것이 매직넘버의 힘이고, DS-020은 그 힘을 글자 색에 직접 적용한 것입니다.

왜 이게 그렇게 큰 차이를 만드는지 잠깐 짚어봅시다. 명도 대비를 정식으로 계산하려면, 두 색의 상대 밝기를 구하고(2편에서 본 sRGB 보정과 가중치 공식), 그 값을 대비 공식에 넣어야 합니다. 디자이너가 화면을 만들며 글자 하나하나에 이 계산을 할 수는 없습니다. 그래서 보통은 도구에 색을 넣어 확인하는데, 그것도 글자마다, 배경마다 반복하면 번거롭습니다. 결국 “대충 이 정도면 되겠지” 하고 넘어가다 위반이 쌓입니다.

매직넘버는 이 복잡한 계산을 단계 번호 뺄셈이라는 초등학교 산수로 바꿉니다. 배경이 5단계, 본문이 60단계면 차이는 55, 50보다 크니 통과. 이 판단은 1초면 됩니다. 디자이너가 색을 고르는 순간 머릿속에서 즉시 검증할 수 있고, 개발자도 코드를 보며 단계 차만 확인하면 됩니다. 복잡한 접근성 계산을 누구나 할 수 있는 간단한 규칙으로 민주화한 것 — 이것이 KRDS 매직넘버 시스템의 진짜 혁신이고, DS-020은 그 혁신을 가장 빈번한 요소인 ’글자’에 적용해 실효성을 극대화한 규칙입니다.

3. 왜 일반 글자(40)와 본문(50)을 다르게 하나

두 기준을 나눈 이유가 있습니다. 글자의 역할과 크기가 다르기 때문입니다.

본문은 ‘읽는’ 글자 — 그래서 50(4.5:1)

본문은 사용자가 한 글자 한 글자 읽어야 하는 텍스트입니다. 안내문, 설명, 약관, 콘텐츠 본문 등이죠. 오래 읽어도 눈이 편하려면 충분한 대비가 필요합니다. 그래서 가장 엄격한 4.5:1(매직넘버 50)을 적용합니다. 본문 가독성은 타협할 수 없는 영역입니다.

일반 글자는 ‘보는’ 글자 — 그래서 40(3:1)

반면 큰 제목이나 보조적 텍스트는 사정이 다릅니다. 큰 글씨는 크기 자체가 가독성을 보완하므로, 본문보다 낮은 대비(3:1)로도 읽힙니다(2편의 ‘큰 글씨 예외’). 그래서 매직넘버 40이 최소 기준입니다. 단, 이건 ’최소’이지 ’권장’이 아니므로, 가능하면 더 높은 대비가 좋습니다.

이 구분은 WCAG의 ’본문 4.5:1 / 큰 글씨 3:1’을 그대로 따른 것입니다. 다만 주의할 점 — ’일반 글자 40’을 본문에 적용하면 안 됩니다. 작은 본문 글자에 3:1만 적용하면 가독성이 무너집니다. 헷갈리면 본문은 무조건 50(4.5:1)으로 통일하는 것이 안전합니다.

4. 실전 — 배경에 따라 글자 단계 고르기

매직넘버로 글자 색을 고르는 실제 방법을 봅시다.

배경이 정해지면, 글자는 그 배경에서 매직넘버만큼 떨어진 단계를 고르면 됩니다.

흰 배경(Gray-0)에 본문 → 단계 차 50 이상 → Gray-50 이상의 진한 글자(예: Gray-60, Gray-70)

흰 배경(Gray-0)에 큰 제목 → 단계 차 40 이상 → Gray-40 이상

연회색 배경(Gray-5)에 본문 → 5 + 50 = Gray-55 이상

이렇게 하면 어떤 배경이든 글자 단계를 기계적으로 정할 수 있습니다. “이 글자가 대비 통과하나?”를 매번 고민하지 않고, 배경 단계 + 매직넘버로 글자 단계를 곧장 도출하는 것이죠.

핵심은 18편에서 본 표면 레이어와도 연결됩니다. 배경 면이 여러 단계로 쌓이면, 각 면 위의 글자도 그 면에 맞춰 단계를 조정해야 합니다. 흰 카드 위 글자와 연회색 배경 위 글자는 배경 단계가 다르므로, 같은 대비를 확보하려면 글자 단계도 달라야 합니다. 매직넘버는 이 조정을 단순한 산수로 만들어 줍니다.

실무에서는 이 단계 계산을 매번 하지 않도록 시맨틱 토큰으로 고정해 둡니다(7편에서 본 역할 토큰의 연장입니다). 예를 들어 --color-text-default(기본 본문), --color-text-muted(보조 텍스트), --color-text-on-surface(카드 위 글자)처럼 역할별 글자 토큰을 만들고, 각각에 매직넘버를 충족하는 단계를 한 번 연결해 둡니다. 그러면 디자이너와 개발자는 단계 번호를 신경 쓰지 않고 역할 토큰만 쓰면 되고, 대비는 자동으로 보장됩니다. 매직넘버는 토큰을 ‘설계할 때’ 쓰는 도구이고, 일단 토큰이 만들어지면 ’쓸 때’는 그냥 역할 이름만 부르면 되는 것이죠.

이 방식의 또 다른 장점은 일괄 조정입니다. 만약 나중에 “본문이 조금 더 진했으면 좋겠다”는 요청이 오면, --color-text-default 토큰의 단계 하나만 바꾸면 사이트 전체 본문이 동시에 조정됩니다. 그것도 매직넘버 기준을 유지한 채로요. 글자 색이 화면 곳곳에 하드코딩돼 있으면 이런 일괄 조정이 불가능하지만, 토큰 + 매직넘버 체계가 있으면 가독성을 유지하면서도 손쉽게 미세 조정할 수 있습니다. 접근성과 유연성을 동시에 얻는 길입니다.

5. 본문 4.5:1의 무게 — 가독성은 타협 불가

DS-020에서 가장 중요한 것은 본문 50(4.5:1) 입니다. 공공서비스에서 본문 가독성은 특히 중요합니다.

공공 사이트의 본문은 대개 ‘꼭 읽어야 하는’ 내용입니다 — 신청 안내, 자격 요건, 유의사항, 약관. 이걸 못 읽으면 사용자는 잘못 신청하거나 권리를 놓칩니다. 그런데 디자인 트렌드를 좇아 본문을 연회색(#999 등)으로 만들면, 대비가 2.8:1 수준으로 떨어져 4.5:1 기준을 한참 밑돕니다(2편 참고). 세련돼 보일지 몰라도, 저시력·고령 사용자에게는 읽을 수 없는 글자가 됩니다.

DS-020은 이 위험을 매직넘버 50이라는 명확한 선으로 차단합니다. “본문은 배경과 단계 차 50 이상”이라는 기준이 있으면, “이 회색이 충분히 진한가?”를 두고 다툴 필요가 없습니다. 단계 차만 확인하면 되니까요. 가독성을 감각이 아니라 규칙으로 보장하는 것 — 그것이 DS-020의 가치입니다.

이 ‘연회색 본문’ 문제는 실무에서 끊임없이 반복되는 갈등 지점이기도 합니다. 디자이너는 본문을 살짝 연하게 해서 화면을 부드럽고 세련되게 만들고 싶어 합니다. 진한 검정 본문이 가득하면 답답해 보인다는 미적 판단이죠. 반면 접근성 관점에서는 그 연함이 곧 가독성 저하입니다. 이 갈등은 보통 “어느 정도 연한 게 적당한가”를 두고 주관적으로 다투다가, 결국 디자이너의 취향대로 너무 연하게 가는 경우가 많습니다. 객관적 기준이 없으면 목소리 큰 쪽이 이기니까요.

DS-020의 매직넘버 50은 이 주관적 갈등을 객관적 합의로 바꿉니다. “본문은 단계 차 50 이상”이라는 선이 있으면, 디자이너도 그 안에서 가장 연한 단계(예: 정확히 50 차이)를 골라 원하는 ’부드러움’을 얻고, 접근성도 보장됩니다. 다툼이 “더 연하게 vs 더 진하게”가 아니라 “50 이상 범위 안에서 어디로”라는 생산적 논의로 바뀌는 것이죠. 규칙은 미감과 접근성을 대립시키지 않고, 둘 다 만족하는 안전한 범위를 정의해 줍니다. 좋은 기준은 갈등을 없애는 게 아니라, 갈등을 올바른 자리로 옮겨줍니다.

6. 흔한 위반 패턴

DS-020 위반은 거의 ’본문 대비 부족’입니다.

함정 ① 연회색 본문. #999 같은 연한 회색 본문 → 대비 4.5:1 미달. → 매직넘버 50 이상(Gray-60 등).

함정 ② 일반 글자 기준을 본문에. 작은 본문에 3:1(매직넘버 40)만 적용 → 가독성 부족. → 본문은 50.

함정 ③ 배경 변화 미반영. 연회색 배경 위 글자에 흰 배경 기준을 그대로 적용 → 대비 부족. → 배경 단계 + 매직넘버로 조정.

함정 ④ 임의 색으로 계산 불가. 팔레트 밖 색을 써서 매직넘버가 작동 안 함 → 대비 계산 필요. → 팔레트 단계 사용(DS-001).

핵심: 본문은 매직넘버 50, 이 한 가지만 지켜도 대부분의 가독성 문제가 해결됩니다.

7. 무엇을 점검하나

DS-020은 기본 모드 글자 색이 매직넘버 기준을 충족하는지를 봅니다.

본문 대비 — 본문 글자가 배경과 단계 차 50(4.5:1) 이상인가.

일반 글자 대비 — 제목·보조 텍스트가 단계 차 40(3:1) 이상인가.

배경별 조정 — 배경 단계 변화에 맞춰 글자 단계가 조정됐는가.

팔레트 사용 — 글자 색이 팔레트 단계로 매직넘버 적용이 가능한가.

텍스트-배경 색 쌍의 실제 대비를 계산해 4.5:1/3:1 충족 여부를 판정합니다.

8. 누가 담당하나

역할	책임
디자이너	글자 색을 매직넘버 기준(본문 50, 일반 40)으로 선택
퍼블리셔/개발	배경별 글자 단계를 토큰으로 정확히 적용
접근성 담당	본문 대비가 4.5:1을 충족하는지 검증

DS-020은 매직넘버 덕분에 점검이 쉽습니다. “본문 글자가 배경과 50단계 이상 차이 나는가”만 확인하면 되니까요.

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

적용 대상

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

글자가 있는 모든 사이트 = 전부 해당. 본문 텍스트가 있다면 예외 없이 적용됩니다.

예외(N/A)

글자가 전혀 없는 화면은 없으므로 사실상 모든 사이트가 대상입니다.

10. 단계별 개선 방법

Before / After

/* ❌ Before: 연회색 본문 (대비 ~2.8:1, 미달) */ body { color: #999; background: #fff; } /* ✅ After: 매직넘버 50 이상 (대비 4.5:1↑) */ body { color: var(--gray-60); /* 흰 배경(0)과 단계 차 60 → 4.5:1 충족 */ background: var(--gray-0); } .title { color: var(--gray-50); } /* 큰 제목은 40 이상이면 OK */

정비 순서

본문부터 — 연회색 본문을 매직넘버 50 이상 단계로.

배경별 조정 — 카드·면 위 글자를 그 배경 단계 + 매직넘버로.

일반 글자 점검 — 제목·보조 텍스트가 40 이상인지.

팔레트화 — 임의 색 글자를 팔레트 단계로 전환(매직넘버 적용 가능하게).

11. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문 글자가 배경과 단계 차 50 이상(4.5:1)인가요?

□ 연회색(#999 등) 본문을 쓰고 있지 않나요?

□ 큰 제목·보조 텍스트가 단계 차 40 이상인가요?

□ 카드·면 위 글자가 그 배경에 맞춰 단계 조정됐나요?

□ 글자 색이 팔레트 단계로 관리되나요?

❓ FAQ

Q1. 매직넘버를 일일이 빼야 하나요? 처음 단계만 잡으면 됩니다. 시맨틱 토큰(--color-text-default 등)에 검증된 단계를 한 번 연결해 두면, 이후엔 그 토큰만 쓰면 자동으로 대비가 보장됩니다. 매번 계산하는 게 아닙니다.

Q2. 일반 글자 40과 본문 50, 헷갈리면요? 헷갈리면 전부 50(4.5:1)으로 통일하세요. 40은 큰 글씨의 ’최소 허용선’이라, 50으로 통일하면 더 안전하고 판단도 쉽습니다.

Q3. 보조 설명을 좀 연하게 하고 싶은데 안 되나요? 연하게 해도 매직넘버 40(3:1)은 넘어야 합니다. 그 이하로 연하면 안 보입니다. ’연한 위계’는 매직넘버 40~50 범위 안에서 단계를 조절해 표현하세요. 그 아래는 가독성 붕괴입니다.

Q4. 컬러 배경(파랑 등) 위 글자도 매직넘버로 되나요? 네, 같은 원리입니다. 파랑 배경의 단계와 글자 단계의 차이를 매직넘버로 확인하면 됩니다. 컬러든 회색이든 명도 단계만 있으면 매직넘버가 작동합니다.

Q5. 선명한 화면 모드도 40/50인가요? 아닙니다. 선명한 화면 모드는 대비 기준이 더 높습니다 — 매직넘버 70/90입니다(다음 편 DS-021). 모드마다 글자 대비 기준이 다릅니다.

12. 마무리 — 가독성을 산수로 보장하다

DS-020의 메시지는 실용적입니다.

글자 색의 가독성은 감각으로 판단할 게 아니라, 정해진 단계 차(매직넘버)로 보장하는 것이다.

본문은 단계 차 50(4.5:1), 일반 글자는 40(3:1). 이 두 숫자만 지키면, 글자 색을 고를 때마다 대비를 고민할 필요가 없습니다. 배경 단계에서 매직넘버를 더하면 글자 단계가 나오니까요. 가독성이라는 중요하지만 추상적인 가치를, 단순한 산수로 바꿔 누구나 지킬 수 있게 만든 것 — 이것이 매직넘버 시스템의 진가이고, DS-020은 그것을 글자에 적용한 규칙입니다.

다음 편은 같은 적용을 선명한 화면 모드에서 봅니다. DS-021 — “선명한 화면 모드에서 글자 색상을 매직넘버 70(대비 7:1), 본문 글자를 매직넘버 90(대비 15:1)으로 적용한다.” 고대비 모드에서 글자 대비가 얼마나 더 강해지는지, 그 정확한 수치를 다룹니다.

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

우리 사이트의 글자 대비가 기준을 충족하는지 확인하려면? ViewCheck는 모든 텍스트-배경 색 쌍의 대비를 계산해, 본문이 4.5:1(매직넘버 50), 일반 글자가 3:1(매직넘버 40)을 충족하는지 요소 단위로 진단하고, 미달 지점을 어느 단계로 바꾸면 통과하는지까지 제시합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (매직넘버·글자 대비) — https://www.krds.go.kr/html/site/style/style_02.html

WCAG 2.1 Understanding 1.4.3 Contrast (Minimum) — https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

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

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