네모와 체크 표시가 보여야

KRDS CP-293 — 체크박스, 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.

0. 들어가며 — 체크박스가 안 보이면

이번 413편은 체크박스와 아이콘(체크 표시)이 인접 배경과 명도 대비를 3:1 이상으로 표현하라는 규칙입니다.

체크박스의 네모(☐)와 체크 표시(✓)가 — 배경과 대비가 낮아 흐릿하면, 사용자는 ’여기 체크박스가 있나? 체크됐나?’를 모르죠. 선택 컨트롤과 그 상태가 안 보이면 입력을 못 합니다. CP-293은 체크박스 양식과 아이콘의 명도 대비를 3:1 이상으로 확보하라고 규정합니다. 라디오 CP-284와 평행하되, ’아이콘(체크 표시)’까지 명시한 게 특징이죠. 이번 편을 풀어냅니다.

1. 원문 — 체크박스·아이콘 명도 대비 3:1 이상

CP-293 (컴포넌트 > 체크박스) “체크박스, 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.”

체크박스의 네모 양식과 그 안의 체크 표시(아이콘)가 인접 배경과 명도 대비 3:1 이상이 되게 해, 컨트롤과 선택 상태가 또렷이 보이게 하라는 뜻입니다.

정리: 체크박스 네모와 체크 표시를 배경과 3:1 이상 대비로 또렷이 보이게 하라. 이게 CP-293입니다.

2. 왜 명도 대비 3:1인가

체크박스의 시각 요소는 — ①선택하는 네모(☐) 와 ②선택됐을 때의 체크 표시(✓)/아이콘 입니다. 사용자가 — ’여기 체크박스가 있고, 체크됐는지’를 보려면, 이 둘이 배경과 충분히 구별돼 또렷이 보여야 하죠.

양식·아이콘이 흐릿할 때:

컨트롤 인지 실패 — 체크박스 네모가 — 배경(흰색 등)과 거의 같은 밝기(아주 연한 회색 테두리)면, 거의 안 보입니다. 사용자는 ’여기 선택할 게 있나?’조차 모르죠.

체크 표시 안 보임 — 체크됐을 때의 ✓ 표시가 — 네모 배경과 대비가 낮으면, ‘체크됐는지’ 확인이 어렵습니다. 자기가 켰는지 모르죠.

저시력·밝은 환경 — 저시력 사용자, 밝은 야외 화면에서는 — 연한 요소가 더욱 안 보입니다.

이는 — 비텍스트 대비(Non-text Contrast) 의 문제입니다(WCAG SC 1.4.11). UI 컴포넌트(체크박스·라디오·입력창 테두리 등)와 그 상태를 나타내는 시각 요소(체크 표시)가, 인접 배경과 최소 3:1의 명도 대비를 가져야 한다는 기준이죠. 체크박스 네모와 ✓ 아이콘은 텍스트가 아니라 ’UI 컴포넌트’라, 텍스트 대비(4.5:1)가 아닌 비텍스트 대비(3:1) 가 적용됩니다(라디오 CP-284, 페이지네이션 컨트롤 CP-214 정신).

그래서 CP-293은 — 다음을 3:1 이상으로 확보하라고 합니다:

네모 테두리 — 체크박스 외곽 네모(☐) 테두리가 배경과 3:1 이상. 너무 연한 회색 지양.

체크 표시(아이콘) — 체크됐을 때의 ✓ 아이콘이 그 배경(네모 채움색)과 3:1 이상. 체크 상태가 또렷이 보이게.

중간 상태 아이콘 — ’전체 선택’의 중간 상태(−, CP-292)도 또렷이 보이게.

원문이 라디오(CP-284)와 달리 ’아이콘’을 명시한 이유가 여기 있습니다 — 체크박스는 선택 시 체크 표시(✓) 라는 아이콘이 나타나므로, 그 아이콘의 대비까지 챙겨야 하죠. 체크된 네모가 파란색이고 ✓가 흰색이면 — 그 둘의 대비가 3:1 이상이어야 ’체크됨’이 보입니다.

상태별 대비. 체크박스는 여러 상태(미선택·선택·중간·포커스·비활성)를 가집니다. 각 상태의 양식·아이콘이 배경과 충분한 대비를 가져야 하죠. 특히 — 미선택 빈 네모가 안 보이면 컨트롤 존재를 모르니, 미선택 대비도 중요합니다.

색에만 의존 안 됨(CP-294 연계). 명도 대비(293)는 ‘양식·아이콘이 보이는가’, 선택 상태 구분은 색 외 단서 (CP-294)로 합니다. 즉 체크박스가 또렷이 보이고(293), 선택/미선택이 색만이 아닌 형태(✓ 유무)로 구별(294)돼야 모든 사용자가 컨트롤을 인지·사용하죠.

이 규칙은 체크박스의 ’시각적 가시성’을 담당합니다 — 레이블 명확·간격(291)에 더해, 네모와 체크 표시가 또렷이 보이게(293) 해, 사용자가 컨트롤과 그 상태를 인지하게 하죠.

정리하면 — 체크박스 네모·체크 표시(아이콘)가 흐릿하면 사용자가 컨트롤·상태를 인지 못 하므로, 배경과 비텍스트 대비 3:1 이상을 확보해 또렷이 보이게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

양식 대비 3:1 — 체크박스 네모·테두리가 배경과 3:1 이상인가.

아이콘 대비 3:1 — 체크 표시(✓)·중간 상태(−)가 그 배경과 3:1 이상인가.

상태별·환경 — 미선택 등 각 상태, 저시력·밝은 환경에서도 보이는가.

개선 방향

네모 테두리·체크 표시·중간 상태 색을 배경과 3:1 이상으로(연한 회색 지양).

대비 측정으로 검증. 모든 상태(미선택·선택·중간·포커스) 확인.

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

역할	책임
디자이너	체크박스·아이콘 색·대비 정의
퍼블리셔/개발	대비 구현·검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 체크박스 네모·테두리가 배경과 3:1 이상 대비인가요?

□ 체크 표시(✓)·중간 상태(−)가 그 배경과 3:1 이상인가요?

□ 미선택 등 각 상태, 저시력·밝은 환경에서도 보이나요?

❓ FAQ

**Q1. 왜 ‘아이콘’까지 명시하나요?** 체크박스는 선택 시 체크 표시(✓) 아이콘이 나타납니다. 그 아이콘의 대비까지 챙겨야 ’체크됨’이 보이죠. Q2. 왜 3:1인가요? 체크박스·아이콘은 텍스트가 아니라 UI 컴포넌트라 비텍스트 대비(3:1)가 적용됩니다(텍스트는 4.5:1). Q3. CP-294와 뭐가 다른가요? CP-293은 ’양식·아이콘이 보이는가’(대비), CP-294는 ‘선택 상태를 색 외로 구분’ 입니다. 함께 적용하죠.

6. 마무리

CP-293의 메시지:

네모와 체크 표시가 보여야 — 체크박스·아이콘을 배경과 3:1 이상 대비로.

체크박스 네모와 체크 표시(✓ 아이콘)가 흐릿하면 사용자가 컨트롤과 선택 상태를 인지 못 합니다. UI 컴포넌트라 비텍스트 대비 3:1을 확보해 또렷이 보이게 하죠. 다음 편은 선택 상태의 색 외 구분입니다.

다음 편 예고 ▶ 「414. (CP-294) 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공하고 있다.」

ViewCheck는 체크박스와 체크 표시의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 체크박스(Checkbox) 가이드 — https://www.krds.go.kr/html/site/component/component_27.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컴포넌트,웹표준