버튼 동그라미가 보여야

KRDS CP-284 — 버튼 양식과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.

0. 들어가며 — 라디오 버튼 자체가 안 보이면

이번 404편은 라디오 버튼 양식(동그라미)과 인접 배경 간 명도 대비를 3:1 이상으로 표현하라는 규칙입니다.

라디오 버튼의 동그라미(○)가 — 배경과 대비가 낮아 흐릿하면, 사용자는 ‘여기 라디오 버튼이 있나?’ 조차 모르죠. 선택 컨트롤 자체가 안 보이면 입력을 못 합니다. CP-284는 라디오 버튼 양식의 명도 대비를 3:1 이상으로 확보하라고 규정합니다. 페이지네이션 컨트롤 대비(CP-214), 비텍스트 대비(WCAG 1.4.11) 정신이죠. 이번 편을 풀어냅니다.

1. 원문 — 버튼 양식 명도 대비 3:1 이상

CP-284 (컴포넌트 > 라디오 버튼) “버튼 양식과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.”

라디오 버튼의 시각적 양식(동그라미 테두리 등)과 그 주변 배경의 명도 대비를 3:1 이상으로 해, 버튼이 또렷이 보이게 하라는 뜻입니다.

정리: 라디오 버튼 양식을 배경과 3:1 이상 대비로 또렷이 보이게 하라. 이게 CP-284입니다.

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

라디오 버튼의 ’양식(form)’은 — 사용자가 선택하는 그 시각적 컨트롤, 즉 동그라미(○)와 그 테두리·선택 표시(●) 입니다. 사용자가 이 컨트롤을 — ’여기 선택할 라디오 버튼이 있고, 어느 게 선택됐는지’를 보려면, 그 양식이 배경과 충분히 구별돼 또렷이 보여야 하죠.

양식이 흐릿할 때:

컨트롤 인지 실패 — 라디오 버튼 동그라미가 — 배경(흰색 등)과 거의 같은 밝기(아주 연한 회색 테두리)면, 거의 안 보입니다. 사용자는 ’여기 선택할 게 있나?’조차 모르죠. 선택 컨트롤이 안 보이면 입력 자체를 못 합니다.

저시력·밝은 환경 — 저시력 사용자, 밝은 야외 화면에서는 — 연한 테두리가 더욱 안 보이죠.

이는 — 비텍스트 대비(Non-text Contrast) 의 문제입니다(WCAG SC 1.4.11). 이 기준은 — UI 컴포넌트(라디오 버튼·체크박스·입력창 테두리 등)와 그 상태를 나타내는 시각 요소가, 인접 배경과 최소 3:1의 명도 대비를 가져야 한다고 규정하죠. 라디오 버튼 동그라미는 텍스트가 아니라 ’UI 컴포넌트’라, 텍스트 대비(4.5:1)가 아닌 비텍스트 대비(3:1) 가 적용됩니다(브레드크럼 밑줄 CP-075, 구분자 CP-087, 페이지네이션 컨트롤 CP-214 정신).

그래서 CP-284는 — 라디오 버튼 양식과 배경의 명도 대비를 3:1 이상으로 확보하라고 합니다:

동그라미 테두리 — 라디오 버튼의 외곽 동그라미(○) 테두리가 배경과 3:1 이상 대비. 너무 연한 회색 지양.

선택 표시 — 선택됐을 때의 채워진 점(●)도 또렷이 보이게(이건 선택 상태 구분 CP-285와도 연결).

상태별 대비. 라디오 버튼은 여러 상태(미선택·선택·포커스·비활성)를 가집니다. 각 상태의 양식이 — 배경과 충분한 대비를 가져야 하죠. 특히 — 미선택 상태의 빈 동그라미가 안 보이면, 사용자가 선택할 컨트롤이 거기 있는지 모르니, 미선택 상태 대비가 중요합니다.

색에만 의존 안 됨(CP-285 연계). 명도 대비(284)는 — ’양식이 보이는가’를 다루고, 선택 상태 구분은 색 외 단서 (CP-285)로 합니다. 즉 라디오 버튼이 또렷이 보이고(284), 선택/미선택이 색만이 아닌 형태(채움·테두리)로 구별 (285)돼야 모든 사용자가 컨트롤을 인지·사용하죠.

이 규칙은 라디오 버튼의 ’시각적 가시성’을 담당합니다 — 레이블 명확·간격(283)에 더해, 버튼 양식 자체가 또렷이 보이게(284) 해, 사용자가 컨트롤을 인지하고 쓰게 하죠. 저시력·밝은 환경 사용자 모두에게 이로운 보편적 가독성 입니다.

정리하면 — 라디오 버튼 양식(동그라미)이 흐릿하면 사용자가 컨트롤을 인지 못 하므로, 배경과 비텍스트 대비 3:1 이상을 확보해 또렷이 보이게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

양식 대비 3:1 — 라디오 버튼 동그라미·테두리가 배경과 3:1 이상 대비인가.

미선택 가시성 — 미선택 빈 동그라미가 또렷이 보이는가.

환경 가독성 — 저시력·밝은 환경에서도 버튼이 보이는가.

개선 방향

동그라미 테두리·선택 표시 색을 배경과 3:1 이상으로(너무 연한 회색 지양).

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

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

역할	책임
디자이너	라디오 버튼 양식 색·대비 정의
퍼블리셔/개발	대비 구현·검증

기관 유형	CP-284 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (라디오 버튼 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 라디오 버튼 동그라미·테두리가 배경과 3:1 이상 대비인가요?

□ 미선택 빈 동그라미가 또렷이 보이나요?

□ 저시력·밝은 환경에서도 버튼이 보이나요?

❓ FAQ

Q1. 왜 3:1인가요? 라디오 버튼 동그라미는 텍스트가 아니라 UI 컴포넌트라 비텍스트 대비(3:1)가 적용됩니다 (텍스트는 4.5:1). Q2. 연한 회색 테두리가 깔끔한데요? 너무 연하면 안 보입니다. 3:1을 넘기는 진하기여야 사용자가 컨트롤을 인지하죠. Q3. CP-285와 뭐가 다른가요? CP-284는 ‘양식이 보이는가’(대비), CP-285는 ’선택 상태를 색 외로 구분’입니다. 함께 적용하죠.

6. 마무리

CP-284의 메시지:

버튼 동그라미가 보여야 — 라디오 버튼 양식을 배경과 3:1 이상 대비로.

라디오 버튼 동그라미가 흐릿하면 사용자가 선택 컨트롤이 있는지조차 모릅니다. UI 컴포넌트라 비텍스트 대비 3:1을 확보해 또렷이 보이게 하죠. 저시력·밝은 환경 모두에게 이롭습니다. 다음 편은 선택 상태의 색 외 구분입니다.

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

ViewCheck는 라디오 버튼 양식의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 라디오 버튼(Radio button) 가이드 — https://www.krds.go.kr/html/site/component/component_26.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컴포넌트,웹표준