흐린 글씨는 안 보인다

KRDS BP-057 — 텍스트 콘텐츠와 배경 간 명도 대비를 4.5:1 이상으로 준수하고 있다.

0. 들어가며 — 옅은 회색 글씨, 정말 읽히나요

이번 623편은 텍스트 콘텐츠와 배경 간 명도 대비를 4.5:1 이상으로 준수하라는 규칙입니다.

연한 회색 글씨, 흐린 배경 위 텍스트 — 디자인은 세련돼 보여도, 저시력·고령 사용자나 밝은 환경에선 안 읽히죠. BP-057은 명도 대비 4.5:1 이상을 규정합니다. WCAG 1.4.3의 콘텐츠 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 명도 대비 4.5:1 이상

BP-057 (기본 패턴 > 상세 정보 확인) “텍스트 콘텐츠와 배경 간 명도 대비를 4.5:1 이상으로 준수하고 있다.”

본문 텍스트와 배경의 명도 대비를 4.5:1 이상으로 유지하라는 뜻입니다.

정리: 텍스트와 배경의 명도 대비를 4.5:1 이상으로 하라. 이게 BP-057입니다.

2. 왜 4.5:1인가

텍스트는 배경과 충분히 대비돼야 읽힙니다. 대비가 낮으면(옅은 회색 글씨 등) 글자가 배경에 묻혀 안 보이죠. 특히 저시력·고령 사용자, 밝은 야외, 저품질 화면에선 더 심합니다. BP-057은 명도 대비 4.5:1 이상을 요구합니다.

명도 대비란. 글자 색과 배경 색의 — 밝기 차이를 비율로 나타낸 값입니다. 가장 높은 게 21:1(검정 글씨/흰 배경), 가장 낮은 게 1:1(같은 색)이죠. 4.5:1은 — WCAG 2.1 AA 등급의 일반 텍스트 기준입니다.

대비가 낮을 때의 문제:

저시력자 못 읽음 저시력·노안 사용자는 대비가 낮으면 글자를 거의 못 읽습니다. 연한 회색 글씨는 그들에게 거의 안 보이죠.

환경 영향 밝은 야외·햇빛 아래, 저품질·오래된 화면에선 낮은 대비 텍스트가 누구에게나 안 보입니다.

피로 — 대비가 낮으면 — 정상 시력도 읽기 피곤하죠. 오래 읽으면 눈이 아픕니다.

그래서 BP-057은 — 4.5:1 이상을 준수하라고 합니다:

일반 텍스트 4.5:1 본문 텍스트(일반 크기)는 배경과 4.5:1 이상의 대비를요. 예: 흰 배경엔 충분히 진한 글자색을요. 연한 회색(#999 등)은 흰 배경에서 대비가 부족할 수 있죠.

큰 텍스트 3:1(예외) 큰 텍스트(굵은 18.5px 이상 또는 24px 이상)는 3:1까지 허용됩니다(WCAG). 크면 대비가 좀 낮아도 읽히니까요. 단 본문은 보통 일반 크기라 4.5:1이죠.

대비 검사 색 조합을 대비 검사 도구(WebAIM Contrast Checker 등)로 확인합니다. 디자인 단계에서 대비를 계산해 4.5:1을 보장하죠.

색에만 의존 금지와 함께. 대비(BP-057)는 — 정보를 색만으로 전하지 않기(WCAG 1.4.1)와 함께 색 접근성을 이룹니다. 대비를 확보하고 — 색 외 단서(텍스트·아이콘)도 주는 거죠.

WCAG 1.4.3의 콘텐츠 적용. 명도 대비 4.5:1은 WCAG 2.1 SC 1.4.3(명도 대비, AA)의 기준입니다. KWCAG(한국형 웹 콘텐츠 접근성)에도 동일하게 있죠. BP-057은 이를 콘텐츠 본문에 명시 적용한 것입니다. 디자인 스타일(DS)의 색 대비 규칙과도 통하죠.

이 규칙은 상세 정보 확인의 ’텍스트 가독성(대비)’을 담당합니다 — 명도 대비 4.5:1 이상을 지켜(057), 저시력·고령 사용자와 모든 환경에서 텍스트가 읽히게 하죠.

정리하면 — 텍스트와 배경의 대비가 낮으면 저시력·고령 사용자와 밝은 환경에서 안 읽히므로, 일반 텍스트는 명도 대비 4.5:1 이상(큰 텍스트 3:1)을 준수해야 합니다.

3. 점검 / 개선

무엇을 점검하나

4.5:1 이상 — 본문 텍스트와 배경 대비가 4.5:1 이상인가.

큰 텍스트 3:1 — 큰 텍스트가 최소 3:1 이상인가.

검사 도구 — 색 조합을 대비 검사 도구로 확인했는가.

개선 방향

본문 텍스트 4.5:1 이상(큰 텍스트 3:1). 연한 회색 글씨 지양.

대비 검사 도구로 디자인 단계에서 보장(WCAG 1.4.3).

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

역할	책임
디자이너	색 대비 4.5:1 설계
QA/접근성	대비 검사·검증

기관 유형	BP-057 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문 텍스트와 배경 대비가 4.5:1 이상인가요?

□ 큰 텍스트가 최소 3:1 이상인가요?

□ 색 조합을 대비 검사 도구로 확인했나요?

❓ FAQ

Q1. 명도 대비 4.5:1이 어느 정도인가요? 흰 배경(검정 21:1)에서 충분히 진한 글자색입니다. 연한 회색(#999 등)은 부족할 수 있죠. WebAIM Contrast Checker로 계산해 확인합니다. Q2. 큰 글씨는 왜 3:1인가요? 큰 텍스트(굵은 18.5px·일반 24px 이상)는 크기 자체로 읽기 쉬워 3:1까지 허용됩니다 (WCAG). 본문은 보통 일반 크기라 4.5:1이죠. Q3. 디자인이 흐려 보여도 대비를 지켜야 하나요? 네. 세련돼 보이는 연한 글씨도 저시력·고령자에겐 안 보입니다. 대비는 의무(WCAG 1.4.3)예요. 디자인과 접근성을 함께 잡아야 하죠.

6. 마무리

BP-057의 메시지:

흐린 글씨는 안 보인다 — 텍스트와 배경 명도 대비를 4.5:1 이상으로 준수하라.

대비가 낮으면 저시력·고령 사용자와 밝은 환경에서 안 읽힙니다. 일반 텍스트 4.5:1 이상(큰 텍스트 3:1)을 지켜 모두가 읽게 하는 게 핵심이죠. 다음 편은 비텍스트 콘텐츠 대체 수단입니다.

다음 편 예고 ▶ 「624. (BP-058) 텍스트 이외의 콘텐츠에 대해 정보를 이해할 수 있도록 대체 수단을 제공하고 있다.」

ViewCheck는 텍스트와 배경의 명도 대비가 4.5:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 상세 정보 확인 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_06.html

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

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

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