색만으론 안 되고, 보이긴 해야

KRDS CP-311 — 태그의 색상으로 의미를 전달하지 않으며, 인접 배경과 3:1 이상의 명도 대비를 준수하고 있다.

0. 들어가며 — 빨간 태그를 못 보면

이번 431편은 태그의 색상으로 의미를 전달하지 않으며, 인접 배경과 3:1 이상의 명도 대비를 준수하라는 규칙입니다. 이로써 태그 8개 규칙이 마무리됩니다.

태그에서 — ‘빨강=긴급, 초록=완료’처럼 색만으로 의미를 전하면, 색을 못 보는 사용자는 그 의미를 놓치죠. 또 태그 색이 배경과 대비가 낮으면 태그 자체가 안 보입니다. CP-311은 ①색 무관 의미 전달과 ②명도 대비 3:1을 함께 규정합니다. ’색 무관 인식’(WCAG 1.4.1)과 ‘비텍스트 대비’(1.4.11)의 태그 종합판이죠. 이번 편을 풀어냅니다.

1. 원문 — 색 무관 의미 + 대비 3:1

CP-311 (컴포넌트 > 태그) “태그의 색상으로 의미를 전달하지 않으며, 인접 배경과 3:1 이상의 명도 대비를 준수하고 있다.”

태그의 의미를 색만으로 전하지 말고(텍스트 등 병행), 태그가 인접 배경과 명도 대비 3:1 이상이 되게 하라는 뜻입니다.

정리: 태그 의미를 색만으로 전하지 말고, 배경과 3:1 이상 대비를 지켜라. 이게 CP-311입니다.

2. 왜 색 무관 의미와 대비인가

CP-311은 두 가지를 함께 다룹니다 — ①색에 의존하지 않는 의미 전달과 ②태그의 명도 대비. 둘 다 접근성의 핵심이죠.

① 색상으로만 의미 전달 금지(WCAG 1.4.1). 태그는 — 색으로 분류·상태를 구별하곤 합니다(‘긴급’은 빨강, ’완료’ 는 초록 등). 하지만 — 의미를 색만으로 전하면 안 됩니다:

색만 전달의 문제 — ’빨간 태그 = 긴급’이라고 색으로만 구분하면 — 색각 이상 사용자는 빨강/초록을 구별 못 해, 긴급/완료를 못 알죠. 흑백 화면·저시력 사용자도 마찬가지입니다.

텍스트 병행 그래서 태그는 텍스트 레이블(CP-304·305)로 의미를 전합니다. ‘긴급’, ’완료’처럼 텍스트가 있으면 색을 못 봐도 의미를 알죠. 색은 보조(빠른 구별)이고, 텍스트가 주된 의미 전달입니다. 태그는 본래 텍스트 레이블을 갖는 컴포넌트라(아이콘만 있는 게 아니라) 텍스트로 의미를 전하기 자연스럽죠.

형태 보조 — 텍스트에 더해, 필요하면 아이콘·형태로도 구별을 보조할 수 있습니다(색 외 단서). 핵심은 — 색 하나에만 의미를 싣지 않는 것입니다.

이는 — 달력 CP-165, 배지 CP-186, 라디오 CP-285, 체크박스 CP-294에서 반복된 ’색 무관 인식’을 태그에 적용한 것이죠.

② 인접 배경과 3:1 이상 명도 대비(WCAG 1.4.11). 태그가 — 배경과 충분히 구별돼 보여야 합니다:

태그 가시성 — 태그(알약·사각 라벨)가 — 페이지 배경과 명도 대비가 낮으면(연한 색 태그가 흰 배경에), 태그 자체가 안 보이죠. 태그 배경색·테두리가 인접 배경과 3:1 이상이어야 합니다.

비텍스트 대비 — 태그의 시각적 경계(배경·테두리)는 UI 요소라 — 비텍스트 대비 3:1이 적용됩니다(태그 안 텍스트 가독성은 별도로 텍스트 대비 4.5:1; 이 규칙은 태그 형태의 배경 대비를 말함).

저시력·환경 — 저시력 사용자, 밝은 환경에서도 태그가 보이게요.

둘의 종합. CP-311은 — ①색맹에게도 의미가 통하고(색 무관), ②모두에게 태그가 보이게(대비) 하는, 태그 접근성의 종합 규칙입니다. 색 절제(CP-308)와 연결되죠 — 색을 절제하고(308), 그 색에 의미를 싣지 않으며(311 ①), 태그가 보이게(311 ②) 합니다.

이 규칙은 태그의 ’보편적 접근성’을 담당합니다 — 색을 못 보는 사용자도 텍스트로 의미를 알고, 저시력 사용자도 태그를 보게 해, 모든 사용자가 태그 정보를 얻게 하죠. 태그 8개 규칙(레이블·글자수·배치·구분·색절제·초점·이름· 대비)이 이로써 마무리됩니다.

정리하면 — 태그 의미를 색만으로 전하면 색맹 사용자가 놓치고 태그 대비가 낮으면 저시력 사용자가 못 보므로, 의미를 텍스트로 병행 전달하고 인접 배경과 3:1 이상 명도 대비를 지켜야 합니다.

3. 점검 / 개선

무엇을 점검하나

색 무관 의미 — 태그 의미가 색뿐 아니라 텍스트로 전달되는가(회색조로 봐도 의미 구별).

태그 대비 3:1 — 태그 배경·테두리가 인접 배경과 명도 대비 3:1 이상인가.

텍스트 가독성 — 태그 안 텍스트가 태그 배경과 충분히 대비되는가(별도 4.5:1).

개선 방향

색으로만 구분하던 의미를 텍스트 레이블로 병행. 색은 보조.

태그 배경·테두리를 인접 배경과 3:1 이상으로. 회색조·대비 측정 검증.

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

역할	책임
디자이너	색 무관 의미 체계·대비 정의
콘텐츠/UX	의미 텍스트 레이블 작성
퍼블리셔/개발	대비·텍스트 병행 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 태그 의미가 색뿐 아니라 텍스트로 전달되나요(회색조로 봐도 의미 구별)?

□ 태그 배경·테두리가 인접 배경과 3:1 이상 대비인가요?

□ 태그 안 텍스트가 태그 배경과 충분히 대비되나요?

❓ FAQ

Q1. 색으로 분류를 구별하면 안 되나요? 색 구별은 보조로 좋지만, 색만으로 의미를 전하면 색맹 사용자가 못 구별합니다. 텍스트로 의미를 전하고 색은 보조죠. Q2. 태그는 보통 텍스트가 있는데 자동 충족 아닌가요? 텍스트가 의미를 정확히 담으면 대체로 충족됩니다. 단, 색에만 의존하는 추가 의미(빨강=긴급)가 텍스트에도 반영됐는지 확인하세요. Q3. 두 가지 대비가 헷갈려요. 태그 형태(배경·테두리) vs 페이지 배경은 3:1(비텍스트), 태그 안 텍스트 vs 태그 배경은 4.5:1(텍스트)입니다.

6. 마무리

CP-311의 메시지:

색만으론 안 되고, 보이긴 해야 — 의미는 텍스트로, 태그는 배경과 3:1 이상 대비로.

태그 의미를 색만으로 전하면 색맹 사용자가 놓치고, 태그 대비가 낮으면 저시력 사용자가 못 봅니다. 의미를 텍스트로 병행하고 인접 배경과 3:1 이상 대비를 지키는 게 핵심이죠. 이로써 태그 8개 규칙이 마무리됩니다. 다음 편부터는 토글(Toggle)입니다.

다음 편 예고 ▶ 「432. (CP-312) 토글 — 즉시 적용되는 켜기/끄기 설정에 사용하고 있다.」

ViewCheck는 태그가 색 무관 의미 전달과 3:1 대비를 준수하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 태그(Tag) 가이드 — https://www.krds.go.kr/html/site/component/component_29.html

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

WCAG 2.1 SC 1.4.11 Non-text Contrast — https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

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

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