입력창 경계가 보여야

KRDS CP-397 — 입력 영역과 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.

0. 들어가며 — 입력창이 배경에 묻히면

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

텍스트 영역의 경계(테두리)가 — 배경과 대비가 낮아 흐릿하면, 사용자는 ‘어디가 입력창인지’ 모르죠. 입력 영역이 배경에 묻히면 어디에 써야 할지 헷갈립니다. CP-397은 입력 영역의 명도 대비를 3:1 이상으로 규정합니다. 라디오 CP-284, 셀렉트 CP-302의 텍스트 영역 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 입력 영역 명도 대비 3:1 이상

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

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

정리: 텍스트 영역 경계를 배경과 3:1 이상 대비로 또렷이 구별되게 하라. 이게 CP-397입니다.

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

텍스트 영역은 — 사용자가 글을 쓰는 입력 영역입니다. 사용자가 — ’여기가 입력창이고, 어디까지가 입력 영역 인지’를 보려면, 입력 영역의 경계(테두리)가 인접 배경과 충분히 구별돼 또렷이 보여야 하죠.

경계가 흐릿할 때:

입력창 인지 실패 텍스트 영역 테두리가 인접 배경(페이지 배경)과 거의 같은 밝기(아주 연한 회색)면, 입력 영역 경계가 안 보입니다. 사용자는 ‘어디가 입력창이지?’, ‘어디에 써야 하지?’ 헷갈리죠. 특히 테두리 없이 배경색만 살짝 다른 디자인은, 그 차이가 약하면 입력창인지조차 모릅니다.

영역 범위 불명 — 경계가 흐릿하면 — 입력 영역의 크기·범위(CP-393)도 가늠하기 어렵습니다.

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

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

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

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

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

상태별 기본·포커스·비활성 각 상태에서 활성 입력 영역의 경계가 또렷한 대비를 유지합니다. 특히 포커스 시 경계 강조(focus indicator)도 명확해야 키보드 사용자가 어디 있는지 알죠.

입력 텍스트 가독성과 별개. 경계 대비(397)는 ’입력창이 보이는가’를 다룹니다. 입력한 글자의 가독성은 — 그 글자와 입력 영역 배경의 텍스트 대비(4.5:1)로 별도 보장되죠. 둘 다 필요합니다 — 입력창 경계(3:1)와 입력 글자 (4.5:1).

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

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

3. 점검 / 개선

무엇을 점검하나

경계 대비 3:1 — 텍스트 영역 테두리(또는 배경 구분)가 인접 배경과 3:1 이상인가.

상태별·포커스 — 활성·포커스 상태의 경계가 또렷한가.

입력 글자 대비 — 입력 글자가 입력 영역 배경과 충분히 대비되는가(4.5:1).

개선 방향

텍스트 영역 테두리·배경 구분을 인접 배경과 3:1 이상으로(연한 회색 지양).

포커스 경계 강조. 입력 글자 대비(4.5:1)도 확보. 대비 측정 검증.

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 텍스트 영역 테두리(또는 배경 구분)가 인접 배경과 3:1 이상인가요?

□ 활성·포커스 상태의 경계가 또렷한가요?

□ 입력 글자가 입력 영역 배경과 충분히 대비되나요(4.5:1)?

❓ FAQ

Q1. 왜 3:1인가요? 입력창 경계는 텍스트가 아니라 UI 요소라 비텍스트 대비(3:1)가 적용됩니다(입력 글자는 4.5:1). Q2. 테두리 없이 배경색만 다르게 하면요? 그 차이가 충분한 대비여야 합니다. 약하면 입력창인지조차 모르죠. Q3. 입력 영역 경계와 글자 대비가 둘 다 필요한가요? 네. 경계는 ‘입력창이 보이는가’(3:1), 글자는 ‘입력 내용이 읽히는가’(4.5:1)입니다. 둘 다 확보하죠.

6. 마무리

CP-397의 메시지:

입력창 경계가 보여야 — 텍스트 영역을 배경과 3:1 이상 대비로.

텍스트 영역 경계가 흐릿하면 사용자가 입력창을 인지 못 합니다. 인접 배경과 비텍스트 대비 3:1을 확보해 입력 영역을 또렷이 구별되게 하는 게 핵심이죠. 다음 편은 텍스트 영역의 스크린 리더 레이블입니다.

다음 편 예고 ▶ 「518. (CP-398) 스크린 리더 사용자가 텍스트 영역의 용도를 확인할 수 있도록 , title, aria-label, aria-labelledby 중 1가지 방식으로 레이블을 제공하고 있다.」

ViewCheck는 텍스트 영역의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 영역(Textarea) 가이드 — https://www.krds.go.kr/html/site/component/component_39.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컴포넌트,웹표준