입력칸이 보여야

KRDS CP-403 — 입력 필드와 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.

0. 들어가며 — 어디가 입력칸인지 모르면

이번 523편은 입력 필드와 인접 배경 간 명도 대비를 3:1 이상으로 준수하라는 규칙입니다.

텍스트 입력 필드의 경계(테두리)가 — 배경과 대비가 낮아 흐릿하면, 사용자는 ‘어디가 입력칸인지’ 모르죠. CP-403은 입력 필드의 명도 대비를 3:1 이상으로 규정합니다. 텍스트 영역 CP-397·라디오 CP-284의 텍스트 입력 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 입력 필드 명도 대비 3:1 이상

CP-403 (컴포넌트 > 텍스트 입력 필드) “입력 필드와 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.”

텍스트 입력 필드의 경계가 인접 배경과 명도 대비 3:1 이상이 되게 해, 입력칸이 또렷이 구별되게 하라는 뜻입니다.

정리: 입력 필드 경계를 배경과 3:1 이상 대비로 또렷이 구별되게 하라. 이게 CP-403입니다.

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

텍스트 입력 필드는 — 사용자가 값을 적는 입력칸입니다. 사용자가 — ’여기가 입력칸이고, 어디에 적어야 하는지’를 보려면, 입력 필드의 경계(테두리)가 인접 배경과 충분히 구별돼 또렷이 보여야 하죠.

경계가 흐릿할 때:

입력칸 인지 실패 입력 필드 테두리가 인접 배경(페이지·폼 배경)과 거의 같은 밝기(아주 연한 회색)면, 입력 칸 경계가 안 보입니다. 사용자는 ‘어디가 입력칸이지?’, ‘여기에 적는 건가?’ 헷갈리죠. 특히 요즘 유행하는 ‘테두리 없이 배경색만 살짝 다른’ 미니멀 디자인은, 그 차이가 약하면 입력칸인지조차 모릅니다.

여러 필드 구별 어려움 — 폼에 입력 필드가 여럿인데 경계가 흐릿하면 — 각 필드의 범위를 가늠하기 어렵죠.

저시력·밝은 환경 — 저시력 사용자·밝은 화면에서 — 연한 경계가 더욱 안 보입니다.

이는 — 비텍스트 대비(Non-text Contrast) 의 문제입니다(WCAG SC 1.4.11). 입력칸 같은 UI 컴포넌트의 경계는 — 인접 배경과 최소 3:1의 명도 대비가 필요하죠. 텍스트가 아니라 UI 요소라 텍스트 대비(4.5:1)가 아닌 비텍스트 대비(3:1)가 적용됩니다(텍스트 영역 CP-397, 라디오 CP-284 정신).

그래서 CP-403은 — 입력 필드와 배경의 명도 대비를 3:1 이상으로 확보하라고 합니다:

테두리 대비 — 입력 필드 테두리가 — 인접 배경과 3:1 이상. 너무 연한 회색 지양. 사용자가 입력칸 경계를 또렷이 보게요.

배경색 구분 — 테두리 대신(또는 함께) — 입력 필드 배경색을 폼 배경과 구별되게 할 수도 있죠. 그 경우도 충분한 대비로.

상태별 기본·포커스·비활성·오류 각 상태에서 경계가 충분한 대비를 유지합니다. 특히 오류 상태의 경계 강조(빨간 테두리 등)도 대비를 확보해야 하죠(색만으로 오류 표시 금지는 별도).

입력 텍스트·플레이스홀더 대비. 경계 대비(403)에 더해 — 입력한 글자는 입력칸 배경과 텍스트 대비(4.5:1)를, 플레이스홀더(쓴다면)도 충분한 대비를 확보해야 가독성이 보장되죠(플레이스홀더의 흐린 회색이 대비 미달이기 쉬운 점, CP-400과 연계).

포커스 표시와 별개(CP-404). 경계 대비(403)는 ‘입력칸이 보이는가’, 포커스 표시(CP-404)는 ’지금 어느 칸에 초점이 있는가’입니다. 둘 다 필요하죠 — 입력칸이 보이고(403), 초점이 또렷하고(404).

이 규칙은 텍스트 입력 필드의 ’시각적 인지 가능성’을 담당합니다 — 입력 필드 경계를 또렷이 보이게 해(403), 사용자가 ’여기가 입력칸’임을 인지하게 하죠. 저시력·밝은 환경 사용자 모두에게 이롭습니다.

정리하면 — 입력 필드 경계가 흐릿하면 사용자가 입력칸을 인지 못 하므로, 인접 배경과 비텍스트 대비 3:1 이상을 확보해 입력 필드가 또렷이 구별되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

경계 대비 3:1 — 입력 필드 테두리(또는 배경 구분)가 인접 배경과 3:1 이상인가.

상태별 — 기본·포커스·비활성·오류 상태의 경계가 또렷한가.

글자·플레이스홀더 대비 — 입력 글자(4.5:1)·플레이스홀더가 충분히 대비되는가.

개선 방향

입력 필드 테두리·배경 구분을 인접 배경과 3:1 이상으로(연한 회색 지양).

상태별 경계 대비 확보. 입력 글자·플레이스홀더 대비도 함께. 대비 측정 검증.

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

역할	책임
디자이너	입력 필드 경계·배경 색·대비 정의
퍼블리셔/개발	대비 구현·검증

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

웹접근성 의무 대상이며 텍스트 입력을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 입력 필드 테두리(또는 배경 구분)가 인접 배경과 3:1 이상인가요?

□ 기본·포커스·비활성·오류 상태의 경계가 또렷한가요?

□ 입력 글자(4.5:1)·플레이스홀더가 충분히 대비되나요?

❓ FAQ

Q1. 왜 3:1인가요? 입력칸 경계는 텍스트가 아니라 UI 요소라 비텍스트 대비(3:1)가 적용됩니다(입력 글자는 4.5:1). Q2. 테두리 없는 미니멀 디자인은요? 배경색 차이가 충분한 대비여야 합니다. 약하면 입력칸인지조차 모르죠. Q3. CP-404와 뭐가 다른가요? CP-403은 ‘입력칸이 보이는가’(경계 대비), CP-404는 ‘지금 어느 칸에 초점이 있는가’ (포커스 표시)입니다. 둘 다 필요하죠.

6. 마무리

CP-403의 메시지:

입력칸이 보여야 — 입력 필드를 배경과 3:1 이상 대비로.

입력 필드 경계가 흐릿하면 사용자가 입력칸을 인지 못 합니다. 인접 배경과 비텍스트 대비 3:1을 확보해 입력 필드를 또렷이 구별되게 하는 게 핵심이죠. 다음 편은 입력 필드 초점 표시입니다.

다음 편 예고 ▶ 「524. (CP-404) 모든 입력 필드의 초점은 시각적으로 확인할 수 있도록 표현하고 있다.」

ViewCheck는 입력 필드의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 입력 필드(Text input) 가이드 — https://www.krds.go.kr/html/site/component/component_40.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컴포넌트,웹표준