색을 못 봐도 알 수 있게

KRDS CP-165 — 날짜 및 관련 정보의 의미를 색상으로만 구분하지 않고 있다.

0. 들어가며 — 빨간 날이 공휴일인지 마감인지

이번 285편은 날짜 및 관련 정보의 의미를 색상으로만 구분하지 않는다는 규칙입니다.

달력은 색을 많이 씁니다 — 공휴일은 빨강, 토요일은 파랑, 마감은 회색, 선택은 강조색처럼요. 그런데 이 의미를 색으로만 구분하면, 색을 구별하기 어려운 사용자(색각 이상, 흑백 화면, 저시력)는 그 의미를 알 수 없죠. ’빨간 날’이 공휴일인지 마감인지 색을 못 보면 모릅니다. CP-165는 색 외의 단서를 함께 쓰라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 색상으로만 구분 금지

CP-165 (컴포넌트 > 달력) “날짜 및 관련 정보의 의미를 색상으로만 구분하지 않고 있다.”

날짜의 상태·의미(공휴일·주말·마감·선택 등)를 색만으로 표시하지 말고, 색을 못 구별하는 사용자도 알 수 있게 색 외의 단서(형태·텍스트·아이콘·패턴)를 함께 제공하라는 뜻입니다.

정리: 날짜 의미를 색만으로 구분하지 말고 형태·텍스트 단서를 함께 써라. 이게 CP-165입니다.

2. 왜 색만으로 구분하면 안 되나

이는 웹 접근성의 핵심 원칙 ‘색에 무관한 인식’(KWCAG, WCAG SC 1.4.1 Use of Color) 의 달력 적용입니다. 정보를 색만으로 전달하면, 색을 구별하기 어려운 사용자에게는 그 정보가 전달되지 않죠. 해당 사용자는:

색각 이상 — 적록색맹(가장 흔함)은 빨강·초록을 구별 못 합니다. 공휴일(빨강)과 일반 평일(검정), 또는 마감(회색)과 가능(다른 색)을 구별 못 할 수 있죠.

저시력·고령 — 색 대비 인지가 약해 미묘한 색 차이를 못 봅니다.

흑백·단색 환경 — 흑백 프린터, 단색 화면, 강한 햇빛 아래 화면 등에서는 색이 회색조로 보입니다.

달력은 색에 특히 많이 의존하는 컴포넌트라 이 문제가 두드러집니다. 한국 달력의 관습 — 일요일·공휴일은 빨강, 토요일은 파랑 — 도 색에만 의존하면 색맹 사용자에게 무의미하죠. ’빨간 날’이라는 표현 자체가 색 전제입니다.

그래서 CP-165는 색에 더해 색 외의 단서를 함께 제공하라고 합니다:

텍스트 — 가장 확실합니다. 공휴일이면 ‘신정’, ‘광복절’ 같은 공휴일명을 표시하거나, 마감이면 ‘마감’ 텍스트, 주말이면 요일명(CP-164의 토/일 헤더)이 이미 텍스트로 정보를 담죠. 색을 못 봐도 글자로 의미를 압니다.

형태·표시 — 마감은 취소선·흐림, 선택은 채운 배경·테두리, 행사는 점·아이콘처럼 형태 차이를 더합니다 (CP-162의 상태 구분과 연결).

아이콘·패턴 — 공휴일에 작은 아이콘, 특정 상태에 패턴(빗금 등)을 더하기도 하죠.

핵심은 — 색은 보조 단서로 쓰되, 색 없이도 의미가 전달되는 주된 단서(텍스트·형태)가 있어야 한다는 것입니다. “색을 빼고 봐도 의미를 알 수 있는가?”가 판단 기준이죠. 예를 들어 공휴일을 빨강 + 공휴일명 텍스트로 표시하면, 색맹 사용자는 색은 못 봐도 ’신정’이라는 글자로 공휴일임을 압니다. 마감을 회색 + 취소선으로 하면, 색을 못 봐도 취소선으로 ’못 쓰는 날’임을 알죠.

이 규칙은 CP-162(상태 명확 구분)와 직접 맞물립니다 — 상태를 구분하되 색에만 의존하지 않는 것이죠. 그리고 CP-166(스크린 리더 전달)으로 이어집니다 — 시각적으로 색 무관하게 구분하는 데 더해, 스크린 리더 사용자(아예 화면을 못 봄)에게는 텍스트·ARIA로 의미를 전달해야 완전하죠. 색맹(CP-165)과 전맹(CP-166)을 모두 배려하는 것입니다.

정리하면 — 달력의 날짜 의미를 색만으로 전하지 말고 텍스트·형태 단서를 함께 써, 색을 못 보는 사용자도 정보를 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

색 무관 확인 — 색을 회색조로 바꿔 봐도 날짜 의미(공휴일·마감 등)를 구별할 수 있는가.

텍스트·형태 단서 — 색에 더해 텍스트(공휴일명·마감)·형태(취소선·아이콘) 단서가 있는가.

관습 보완 — 빨강 공휴일·파랑 토요일 같은 색 관습에 텍스트·형태를 보완했는가.

개선 방향

공휴일은 색+공휴일명, 마감은 색+취소선·흐림, 행사는 색+아이콘 등 단서 추가.

회색조 시뮬레이션으로 색 무관 구분 가능 여부 검증.

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

역할	책임
디자이너	색+형태·텍스트 단서 체계 정의
퍼블리셔/개발	색 무관 구분 구현·검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 색을 회색조로 바꿔도 날짜 의미(공휴일·마감 등)를 구별할 수 있나요?

□ 색에 더해 텍스트(공휴일명·마감)·형태(취소선·아이콘) 단서가 있나요?

□ 빨강 공휴일·파랑 토요일 같은 색 관습에 텍스트·형태를 보완했나요?

❓ FAQ

Q1. 한국 달력은 원래 색으로 공휴일을 표시하는데요? 색 관습은 유지하되, 공휴일명 텍스트 등 색 외 단서를 함께 줘야 색맹 사용자도 압니다. Q2. 어떻게 확인하나요? 화면을 회색조로 바꿔(시뮬레이터·필터) 의미가 여전히 구별되는지 봅니다. 색만 의존하면 회색조에서 구별이 안 됩니다. Q3. CP-166과 뭐가 다른가요? CP-165는 색맹(화면은 봄)을 위한 색 무관 시각 구분, CP-166은 전맹을 위한 스크린 리더 전달입니다. 함께 적용합니다.

6. 마무리

CP-165의 메시지:

색을 못 봐도 알 수 있게 — 날짜 의미를 색만으로 구분하지 마라.

달력은 색에 많이 의존하지만, 색만으론 색각 이상·흑백 환경 사용자에게 전달되지 않습니다. 공휴일명·취소선· 아이콘 등 색 외 단서를 함께 줘야 색을 못 봐도 의미를 알죠. ’회색조로 봐도 구별되는가’가 기준입니다. 다음 편은 스크린 리더로의 정보 전달입니다.

다음 편 예고 ▶ 「286. (CP-166) 날짜 및 관련 정보의 의미를 스크린 리더에서 확인할 수 있도록 하고 있다.」

ViewCheck는 달력의 날짜 의미가 색상에만 의존하지 않는지를 진단합니다.

📚 참고 출처

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