한글 폰트에 어울리는 배경·글자색, 왜 대비비부터 따져야 하는가

한글 무료폰트를 고른 뒤 가장 먼저 부딪히는 문제는 "이 폰트를 무슨 색으로, 어떤 배경 위에 올릴 것인가"입니다. 색상 선택은 취향의 영역처럼 보이지만, 본문 가독성과 접근성에서는 명확한 정량 기준이 존재합니다. 바로 명도 대비비(contrast ratio)입니다.

대비비는 글자색과 배경색의 상대 휘도 차이를 1:1부터 21:1까지의 수치로 나타낸 값입니다. W3C의 웹 콘텐츠 접근성 지침(WCAG 2.1)은 이 수치로 텍스트 가독성의 최소 기준을 규정합니다. 본문 같은 일반 텍스트는 4.5:1 이상(AA), 강화 기준은 7:1 이상(AAA)을 요구하며, 24px 이상이거나 18.66px 이상의 굵은 글씨 같은 큰 텍스트는 3:1(AA)·4.5:1(AAA)로 기준이 완화됩니다. 이 글의 모든 대비비 수치는 WCAG 2.1 상대 휘도 공식으로 직접 계산한 값이며, 추정치가 아닙니다.

이 가이드는 DesignNews 디자인 토큰 색상(베이지 7단계와 매트 블랙·차콜·웜그레이)을 기준으로, 한글 폰트의 용도별로 어떤 색 조합이 어느 접근성 등급을 통과하는지 정량으로 정리합니다. 색상값이 검증된 고정 팔레트이고 판정은 공식 계산이므로, 시간이 지나도 변하지 않는 기준으로 쓸 수 있습니다.

본문 조판: 장문을 읽히게 하는 고대비 조합

긴 글을 읽는 본문 영역에서는 대비비가 높을수록 안전합니다. 눈의 피로를 줄이고 다양한 조명 환경과 디스플레이에서 일관된 가독성을 확보하려면 AAA 등급(7:1 이상)을 목표로 삼는 것이 좋습니다.

가장 확실한 조합은 매트 블랙(#1a1a1a) 글자를 가장 밝은 베이지(#faf7f2) 배경에 올리는 것입니다. 이 조합의 대비비는 16.29:1로, 21:1 최대치에 근접하는 매우 높은 수치입니다. 순백(#ffffff)과 순흑(#000000)의 21:1보다 약간 부드러우면서도 본문 AAA를 여유 있게 통과하므로, 장문 조판의 기본값으로 권장됩니다. 같은 매트 블랙을 한 단계 어두운 베이지(#f5efe6) 위에 올려도 15.23:1로 거의 차이 없이 최상위 가독성을 유지합니다.

순흑 대신 차콜(#2a2a2a)을 쓰면 인상이 한결 부드러워집니다. 차콜을 가장 밝은 베이지 배경에 올린 조합은 13.43:1로, 여전히 본문 AAA를 크게 상회합니다. 완전한 검정의 강한 인상이 부담스러운 따뜻한 톤의 페이지에서, 가독성을 전혀 손해 보지 않으면서 시각적 무게만 덜어내고 싶을 때 적합한 선택입니다.

본문에 명조(세리프) 계열 폰트를 쓸 때는 특히 이 고대비 구간을 지키는 것이 중요합니다. 명조는 획의 굵기 변화와 가는 세리프 때문에 저대비 환경에서 가장 먼저 가독성이 무너지는 분류입니다. 가는 획이 배경에 묻히지 않으려면 본문 명조는 13:1 이상의 조합, 즉 매트 블랙이나 차콜과 밝은 베이지의 짝을 기본으로 삼는 편이 안전합니다.

보조 텍스트: AA를 사수하는 중간 대비 구간

캡션, 메타 정보, 날짜, 부가 설명처럼 본문보다 위계가 낮은 보조 텍스트는 의도적으로 대비를 낮춰 시각적 위계를 만듭니다. 다만 위계를 위해 대비를 낮추더라도 최소 기준선인 본문 AA(4.5:1)는 지켜야 합니다. 위계 표현이라는 명분으로 이 선을 넘으면 보조 정보가 사실상 읽히지 않는 장식으로 전락합니다.

웜그레이(#58504a)는 이 중간 구간을 담당하는 핵심 색입니다. 가장 밝은 베이지(#faf7f2) 위에서 7.38:1로 본문 AAA까지 통과하고, 한 단계 어두운 베이지(#f5efe6) 위에서는 6.90:1, 그보다 진한 베이지(#ebdfd0) 위에서도 6.01:1을 유지합니다. 세 배경 모두에서 본문 AA를 여유 있게 통과하므로, 배경 톤이 약간씩 달라지는 카드 레이아웃에서도 보조 텍스트 색을 웜그레이 하나로 통일해 일관성을 확보할 수 있습니다.

좀 더 색감이 있는 보조 표현이 필요하다면 진한 갈색 계열인 베이지-700(#6b563d)을 쓸 수 있습니다. 가장 밝은 베이지 배경에서 6.50:1로 본문 AA를 통과하므로, 따뜻한 갈색 톤을 유지하면서도 보조 텍스트의 최소 가독성을 확보합니다. 더 강조가 필요하면 베이지-900(#3a2e21)이 12.34:1로 본문 AAA까지 올라가, 갈색 계열 안에서 본문 수준의 강조 텍스트로 쓸 수 있습니다.

큰 텍스트와 포인트: 완화된 기준이 열어 주는 색의 폭

제목, 표제, 디스플레이 폰트로 크게 키운 텍스트는 큰 텍스트 기준(3:1)이 적용됩니다. 글자가 크고 굵을수록 형태 인식이 쉬워 더 낮은 대비에서도 읽히기 때문입니다. 이 완화된 기준은 본문에서는 쓸 수 없던 색을 포인트로 활용할 여지를 열어 줍니다.

베이지-500(#a88864) 같은 중간 명도의 황토색 계열은 가장 밝은 베이지 배경에서 3.08:1입니다. 본문 AA(4.5:1)에는 못 미치므로 장문 본문에는 부적합하지만, 큰 텍스트 기준 3:1은 통과합니다. 따라서 큼직한 표제나 디스플레이 폰트의 포인트 컬러, 또는 아이콘·구분선 같은 비텍스트 UI 요소(역시 3:1 기준)에는 활용할 수 있습니다. 다만 3.08:1은 3:1 기준을 간신히 넘는 값이므로, 작아지거나 가늘어지는 순간 기준을 벗어난다는 점을 염두에 두고 충분히 큰 크기에서만 사용해야 합니다.

디스플레이 계열 폰트는 본디 큰 크기에서 시각적 임팩트를 주기 위한 분류이므로 이 완화 구간과 잘 맞습니다. 제목용 디스플레이 폰트라면 베이지-700이나 베이지-900 같은 갈색 강조색을 큰 텍스트로 올려 따뜻한 브랜드 인상을 만들면서도 접근성 기준을 지킬 수 있습니다.

다크 모드: 색을 뒤집어도 기준은 같다

어두운 배경에서는 글자색과 배경색의 역할이 뒤바뀔 뿐, 계산 방식과 통과 기준은 동일합니다. 매트 블랙(#1a1a1a) 배경에 밝은 베이지(#f5efe6)를 올리면 15.23:1, 가장 밝은 베이지(#faf7f2)는 16.29:1로 라이트 모드 역상과 같은 최상위 가독성을 얻습니다.

주의할 지점은 보조 텍스트입니다. 라이트 모드에서 쓰던 웜그레이(#58504a)를 그대로 어두운 배경에 올리면 대비가 급격히 떨어져 기준 미달이 됩니다. 그래서 다크 모드에서는 보조 텍스트용 웜그레이를 더 밝은 값(#b4ada4)으로 재정의해야 합니다. 이 밝은 웜그레이를 매트 블랙 배경에 올리면 7.84:1로 본문 AAA를 통과합니다. 같은 "웜그레이 보조 텍스트"라는 역할이라도 배경 명도가 반대로 바뀌면 색값을 다시 계산해 조정해야 한다는 점이, 다크 모드 색 설계에서 가장 자주 놓치는 부분입니다.

용도별 색 조합 요약

아래 표는 이 글에서 다룬 모든 조합을 한눈에 정리한 것입니다. 모든 대비비는 WCAG 2.1 공식으로 계산한 값입니다.

지금까지의 조합을 용도 기준으로 정리하면 다음과 같습니다. 모든 수치는 WCAG 2.1 공식으로 계산한 값입니다.

장문 본문(AAA 목표, 7:1 이상)에는 매트 블랙과 가장 밝은 베이지의 16.29:1, 차콜과 밝은 베이지의 13.43:1이 안전합니다. 명조 본문은 반드시 이 고대비 구간을 권장합니다.

보조 텍스트(AA 사수, 4.5:1 이상)에는 웜그레이가 세 단계 베이지 배경에서 각각 7.38:1·6.90:1·6.01:1로 일관되게 통과합니다. 갈색 톤이 필요하면 베이지-700의 6.50:1을 씁니다.

제목·포인트(큰 텍스트 3:1)에는 베이지-500의 3.08:1까지 활용 가능하되 충분히 큰 크기에서만 사용합니다. 갈색 강조는 베이지-700·900을 큰 텍스트로 올립니다.

다크 모드는 밝은 베이지 글자(15~16:1)를 기본으로 하고, 보조 텍스트 웜그레이는 밝은 값(#b4ada4, 7.84:1)으로 반드시 재정의합니다.

직접 확인하는 법

특정 색 조합이 어느 등급을 통과하는지는 글자색과 배경색의 hex 값만 알면 계산할 수 있습니다. WCAG 대비비는 두 색의 상대 휘도를 구해 (밝은 색 휘도 + 0.05)를 (어두운 색 휘도 + 0.05)로 나눈 값입니다.

핵심은 이 값이 취향이나 추정이 아니라 결정론적 계산이라는 점입니다. 같은 두 색은 언제 계산해도 같은 대비비를 내며, 폰트가 무엇이든 배경과 글자의 색만 정해지면 가독성의 하한선은 수치로 확정됩니다. 폰트를 고른 뒤 색을 입힐 때 취향으로 정하기 전에 이 하한선부터 확인하면, 예뻐 보이지만 읽히지 않는 조판을 피할 수 있습니다.