색·점만으론 안 된다

KRDS CP-190 — 텍스트 레이블을 제공하고 있다.

0. 들어가며 — 색만으로 상태를 말할 순 없다

이번 310편은 배지에 텍스트 레이블을 제공하라는 규칙입니다.

배지를 색이나 점(dot)만으로 만들 수도 있습니다 — 빨간 점, 색 동그라미처럼요. 그런데 색·점만으로는 그게 무슨 상태인지 정확히 알 수 없죠. 빨간 점이 ’마감’인지 ’오류’인지 ’신규’인지 모호합니다. 특히 색맹 사용자, 스크린 리더 사용자에게는 색·점이 전달되지 않죠. CP-190은 배지에 텍스트 레이블을 반드시 제공하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 텍스트 레이블 제공

CP-190 (컴포넌트 > 배지) “텍스트 레이블을 제공하고 있다.”

배지의 상태·의미를 색·점·아이콘만이 아니라 텍스트 레이블(‘진행 중’, ‘마감’ 등)로 명시해, 모든 사용자가 상태를 정확히 알게 하라는 뜻입니다.

정리: 배지엔 텍스트 레이블을 제공하라. 이게 CP-190입니다.

2. 왜 텍스트 레이블이 필수인가

배지는 ‘상태를 전달하는’ 것이 목적입니다. 그 상태를 정확하고 모든 사용자에게 전하려면 텍스트가 필수죠. 색·점·아이콘만으로는 두 가지 한계가 있습니다.

① 의미의 모호성. 색이나 점은 ‘뭔가 있다/다르다’는 신호는 주지만, ’무엇’인지는 정확히 못 전합니다. 빨간 점 하나가 — ’마감’인지, ’오류’인지, ’긴급’인지, ’신규 알림’인지 사용자는 알 수 없죠. 색에 의미 약속(CP-186)이 있긴 하지만, 그것도 ’빨강=경고 계열’까지지 정확한 상태(’마감’인지 ’반려’인지)는 구별 못 합니다. 텍스트 레이블 (’마감’)이 있어야 상태가 명확히 전달되죠. 색·점은 빠른 직관(주된 색 신호), 텍스트는 정확한 의미 — 둘이 함께 라야 완전합니다.

② 접근성 — 색·점은 일부 사용자에게 안 보인다. 이게 더 결정적입니다:

색맹 사용자 — 색만으로 만든 배지(색 점, 색 동그라미)는 색을 구별 못 하는 사용자에게 의미가 없죠. 빨강· 초록 점을 구별 못 하면 마감·완료를 구별 못 합니다(KWCAG ‘색 무관 인식’, 달력 CP-165와 같은 정신). 텍스트가 있으면 색을 못 봐도 글자로 상태를 압니다.

스크린 리더 사용자 — 화면을 못 보니 색·점·아이콘이 통째로 전달 안 됩니다. 배지가 텍스트 없이 색 div나 장식 아이콘만이면 — 스크린 리더가 읽을 게 없어 그 항목에 상태가 있는지조차 모르죠. 텍스트 레이블이 있으면 스크린 리더가 “마감”, “진행 중”을 읽어 비시각 사용자도 상태를 압니다.

그래서 CP-190은 배지에 텍스트 레이블을 반드시 제공하라고 합니다. 텍스트가 — 색맹에게도, 전맹에게도, 그리고 색의 의미가 모호한 모든 상황에서도 — 상태를 정확히 전하는 ’주된 정보’죠. 색(CP-186)은 그것을 빠르게 강화하는 ’보조’입니다.

구현:

화면에 보이는 텍스트 — 가장 좋습니다. 배지 안에 ‘마감’, ‘진행 중’ 같은 텍스트를 표시. 모든 사용자(시각· 색맹·스크린 리더)가 다 얻죠.

부득이 아이콘·점만 보여야 한다면 — 시각적으로 텍스트를 숨기더라도 스크린 리더용 텍스트(aria-label, <span class="sr-only">)를 반드시 제공. 단 이 경우 색맹 시각 사용자는 여전히 모호하므로, 화면에 보이는 텍스트가 원칙입니다.

이 규칙은 배지의 ’내용 전달’을 보장합니다 — 정확·간결한 레이블(CP-185)을 텍스트로 제공(CP-190)하고, 그 텍스트 색이 배경과 충분히 대비되게(CP-191) 하면, 배지가 모든 사용자에게 상태를 명확히 전하죠. 색·점만의 배지는 정보 전달에 실패하는 흔한 안티패턴입니다.

정리하면 — 색·점·아이콘만으로는 상태의 정확한 의미가 모호하고 색맹·스크린 리더 사용자에게 전달 안 되므로, 배지에 텍스트 레이블을 반드시 제공해 모든 사용자가 상태를 정확히 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

텍스트 존재 — 배지에 상태를 나타내는 텍스트 레이블이 있는가(색·점만 아님).

색맹 확인 — 회색조로 봐도 텍스트로 상태를 알 수 있는가.

스크린 리더 — 스크린 리더가 배지 상태를 텍스트로 읽는가.

개선 방향

색·점만의 배지에 텍스트 레이블 추가(‘마감’, ‘진행 중’).

부득이 아이콘·점만이면 aria-label·sr-only 텍스트 제공(단 화면 텍스트가 원칙).

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

역할	책임
디자이너/UX	배지에 텍스트 레이블 포함 설계
퍼블리셔/개발	텍스트 레이블·sr-only 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 배지에 상태를 나타내는 텍스트 레이블이 있나요(색·점만 아님)?

□ 회색조로 봐도 텍스트로 상태를 알 수 있나요?

□ 스크린 리더가 배지 상태를 텍스트로 읽나요?

❓ FAQ

Q1. 빨간 점만으로 알림 표시하면 안 되나요? 빨간 점이 무슨 상태인지 모호하고, 색맹·스크린 리더 사용자에겐 전달 안 됩니다. 텍스트가 필요합니다. Q2. 디자인상 텍스트 없이 점만 쓰고 싶어요. 최소한 aria-label·sr-only 텍스트를 제공해야 스크린 리더가 읽습니다. 다만 색맹 시각 사용자는 여전히 모호하니 화면 텍스트가 원칙입니다. Q3. 색(CP-186)이 있으면 텍스트는 보조 아닌가요? 반대입니다. 텍스트가 정확한 ‘주된 정보’, 색은 빠른 인지의 ’보조’입니다.

6. 마무리

CP-190의 메시지:

색·점만으론 안 된다 — 배지에 텍스트 레이블을 반드시 제공하라.

색·점·아이콘만으로는 상태의 정확한 의미가 모호하고, 색맹·스크린 리더 사용자에게 전달되지 않습니다. 텍스트 레이블이 모든 사용자에게 상태를 정확히 전하는 주된 정보죠. 색은 보조로 빠른 인지를 더합니다. 다음 편은 배지 그룹의 마지막 — 텍스트 색의 명도 대비입니다.

다음 편 예고 ▶ 「311. (CP-191) 텍스트 레이블의 색상은 배경과 4.5:1 이상의 명도 대비를 준수하고 있다.」

ViewCheck는 배지가 텍스트 레이블을 제공하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 배지(Badge) 가이드 — https://www.krds.go.kr/html/site/component/component_17.html

WCAG 2.1 SC 1.4.1 Use of Color — https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

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

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