글자가 읽혀야 라벨이다

KRDS CP-191 — 텍스트 레이블의 색상은 배경과 4.5:1 이상의 명도 대비를 준수하고 있다.

0. 들어가며 — 배지 그룹의 마지막

이번 311편은 배지 그룹(CP-184~191, 8개)의 마지막 규칙입니다. 배지 텍스트 레이블 색상이 배경과 4.5:1 이상의 명도 대비를 준수하라는 내용이죠.

CP-190에서 배지에 텍스트 레이블을 제공하게 했습니다. 그런데 그 텍스트가 배경과 대비가 낮아 흐릿하면 — 읽을 수 없어 무의미하죠. 색 채운 작은 배지에서 글자 대비는 특히 놓치기 쉽습니다. CP-191은 텍스트 대비 4.5:1을 규정하며 배지 8개를 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 텍스트 대비 4.5:1 이상

CP-191 (컴포넌트 > 배지) “텍스트 레이블의 색상은 배경과 4.5:1 이상의 명도 대비를 준수하고 있다.”

배지의 텍스트 레이블 색과 배지 배경색의 명도 대비가 4.5:1 이상이 되게 해, 글자가 또렷이 읽히게 하라는 뜻입니다.

정리: 배지 텍스트는 배경과 4.5:1 이상 대비를 충족하라. 이게 CP-191입니다.

2. 왜 4.5:1 대비여야 하나

배지의 텍스트 레이블은 상태를 전하는 핵심 정보입니다(CP-190). 그 텍스트가 읽혀야 정보가 전달되죠. 텍스트 가독성의 객관적 기준이 바로 명도 대비입니다.

텍스트 대비 4.5:1. WCAG 2.1 SC 1.4.3(KWCAG 대응)은 일반 텍스트와 배경의 명도 대비를 최소 4.5:1로 요구합니다(큰 텍스트는 3:1). 이는 저시력 사용자, 고령자, 밝은 환경(야외 햇빛)에서도 텍스트가 읽히게 하는 기준이죠. 배지 텍스트도 ’텍스트’이므로 이 4.5:1이 적용됩니다(밑줄·구분자 같은 비텍스트 3:1과 다름 — 글자 이므로 4.5:1).

배지에서 대비가 깨지기 쉬운 이유. 배지는 색 채운 배경에 텍스트를 얹는 구조라, 대비를 놓치기 쉽습니다:

연한 배경 + 연한 글자 — 예쁜 파스텔 톤 배지를 만들다 보면, 연한 배경(연노랑)에 흰 글자나 연한 글자를 얹어 대비가 1.5:1로 떨어지기도 하죠. 흐릿해서 글자가 안 보입니다.

진한 배경 + 어두운 글자 — 진한 색 배경에 검은 글자를 얹으면 둘 다 어두워 대비가 부족할 수 있죠.

의미색의 함정 — CP-186의 의미색(빨강·초록 등)을 쓸 때, 그 색과 글자색의 대비를 안 따지면 깨지기 쉽습니다. 특히 노랑·연두 같은 밝은 의미색 배경에 흰 글자는 대비가 매우 낮죠.

그래서 CP-191은 배지 텍스트 색과 배경색의 대비를 4.5:1 이상으로 확보하라고 합니다. 실무 접근:

진한 배경 + 흰/밝은 글자 또는 연한 배경 + 진한 글자 — 명도 차이를 크게. 예: 진한 빨강 배경 + 흰 글자, 또는 연한 빨강(tint) 배경 + 진한 빨강 글자(CP-189에서 본 옅은 톤 배지 방식이 대비 확보에도 유리).

대비 측정 — 색 조합마다 대비 측정 도구로 4.5:1 충족을 확인. 디자인 토큰의 배지 색 쌍(배경+글자)을 미리 대비 검증해 두면 일관되게 안전하죠.

의미색별 검증 — 빨강·초록·노랑 등 각 상태색 배지마다 글자 대비를 개별 확인. 특히 밝은 배경색(노랑 등)은 진한 글자가 안전합니다.

이 대비 규칙은 배지의 ’읽힘’을 보장합니다 — 텍스트 레이블 제공(CP-190)에 더해, 그 텍스트가 실제로 또렷이 읽히게(CP-191) 하는 것이죠. 둘이 함께라야 배지가 상태를 제대로 전합니다. 그리고 색 대비는 색맹뿐 아니라 저시력 ·고령·밝은 환경 모든 사용자에게 이로우므로, 접근성을 넘어 보편적 가독성의 문제입니다(달력 CP-165, 페이지네이션 CP-127, 브레드크럼 CP-075·087 등에서 반복된 대비 원칙의 배지 버전).

이로써 배지 8개 규칙(CP-184~191)이 완성됩니다 — 용도(184), 레이블 간결(185), 색 의미(186), 비대화형(187), 요소당 하나(188), 버튼 비혼동(189), 텍스트 제공(190), 대비(191)까지. 상태를 빠르고 정확하게, 모든 사용자에게 전하는 배지죠.

정리하면 — 배지 텍스트가 읽혀야 상태가 전달되므로, 텍스트 색과 배경색의 명도 대비를 4.5:1 이상으로 확보해 모든 환경·사용자에게 또렷이 읽히게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

대비 4.5:1 — 배지 텍스트 색과 배경색의 명도 대비가 4.5:1 이상인가.

의미색별 확인 — 각 상태색(빨강·초록·노랑 등) 배지마다 글자 대비가 충족되는가.

환경 가독성 — 저시력·밝은 환경에서도 글자가 또렷한가.

개선 방향

진한 배경+밝은 글자 또는 연한 배경+진한 글자로 명도 차이 확보.

배지 색 쌍(배경+글자)을 대비 측정으로 검증. 밝은 의미색 배경엔 진한 글자.

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

역할	책임
디자이너	배지 색 쌍 대비 4.5:1 정의
퍼블리셔/개발	색 적용·대비 검증

기관 유형	CP-191 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (배지 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 배지 텍스트 색과 배경색의 명도 대비가 4.5:1 이상인가요?

□ 각 상태색(빨강·초록·노랑) 배지마다 글자 대비가 충족되나요?

□ 저시력·밝은 환경에서도 글자가 또렷한가요?

❓ FAQ

Q1. 배지 대비가 왜 4.5:1인가요? 배지 레이블은 텍스트라 텍스트 대비 기준(4.5:1)이 적용됩니다(비텍스트 3:1과 다름). Q2. 파스텔 톤 배지는 안 되나요? 연한 배경이면 진한 글자를 얹어 4.5:1을 맞추면 됩니다. 연한 배경+흰 글자가 문제죠. Q3. 노랑 배경 배지가 자꾸 대비 미달이에요. 밝은 노랑 배경엔 흰 글자가 대비가 낮습니다. 진한 글자(검정·진한 주황 등)를 써야 4.5:1을 넘깁니다.

6. 마무리

CP-191의 메시지:

글자가 읽혀야 라벨이다 — 배지 텍스트를 배경과 4.5:1 이상 대비로.

배지 텍스트가 흐릿하면 상태 정보가 전달 안 됩니다. 텍스트 색과 배경색의 명도 대비를 4.5:1 이상으로 확보해야 저시력·밝은 환경 모든 사용자에게 또렷이 읽히죠. 특히 밝은 의미색 배경엔 진한 글자가 안전합니다. 이로써 배지 8개(CP-184~191)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 아코디언(Accordion) 으로 넘어갑니다.

다음 편 예고 ▶ 「312. (CP-192) 아코디언 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 배지 텍스트가 배경과 4.5:1 이상 명도 대비를 준수하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 배지(Badge) 가이드 — https://www.krds.go.kr/html/site/component/component_17.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컴포넌트,웹표준