펼침 화살표가 보여야

KRDS CP-302 — 셀렉트 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.

0. 들어가며 — 드롭다운인 줄 모르면

이번 422편은 셀렉트 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하라는 규칙입니다.

셀렉트(드롭다운)에는 — 보통 오른쪽에 ‘펼침’을 뜻하는 화살표(▼) 아이콘이 있습니다. 이 아이콘이 — 배경과 대비가 낮아 흐릿하면, 사용자는 ’이게 드롭다운인지’ 모르죠. 펼칠 수 있다는 신호가 안 보이면, 그냥 텍스트로 착각합니다. CP-302는 셀렉트 아이콘의 명도 대비를 3:1 이상으로 확보하라고 규정합니다. 라디오 CP-284·체크박스 CP-293의 셀렉트 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 셀렉트 아이콘 명도 대비 3:1 이상

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

셀렉트의 펼침 아이콘(화살표 ▼ 등)이 인접 배경과 명도 대비 3:1 이상이 되게 해, ’펼칠 수 있는 드롭다운’임이 또렷이 보이게 하라는 뜻입니다.

정리: 셀렉트 펼침 아이콘을 배경과 3:1 이상 대비로 또렷이 보이게 하라. 이게 CP-302입니다.

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

셀렉트의 가장 중요한 시각 신호는 — 오른쪽의 펼침 아이콘(화살표 ▼) 입니다. 이 아이콘이 — ’이건 누르면 옵션 목록이 펼쳐지는 드롭다운이다’를 알려주죠. 사용자가 이 신호를 보고 ’아, 여기서 선택할 수 있구나’를 압니다. 그래서 이 아이콘이 배경과 충분히 구별돼 또렷이 보여야 하죠.

아이콘이 흐릿할 때:

드롭다운 인지 실패 펼침 화살표가 배경과 거의 같은 밝기(아주 연한 회색)면, 거의 안 보입니다. 사용자는 이게 드롭다운인지 모르고 그냥 텍스트나 비활성 영역으로 착각하죠. 펼칠 수 있다는 걸 모르니 선택을 못 합니다.

테두리도 약하면 심화 — 셀렉트 박스 테두리까지 연하면 — 입력 컨트롤인지조차 모릅니다.

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

이는 — 비텍스트 대비(Non-text Contrast) 의 문제입니다(WCAG SC 1.4.11). UI 컴포넌트와 그 상태·기능을 나타 내는 시각 요소(펼침 아이콘)가, 인접 배경과 최소 3:1의 명도 대비를 가져야 한다는 기준이죠. 셀렉트 아이콘은 텍스트가 아니라 ’기능을 나타내는 그래픽’이라, 텍스트 대비(4.5:1)가 아닌 비텍스트 대비(3:1) 가 적용됩니다 (라디오 CP-284, 체크박스 CP-293 정신).

그래서 CP-302는 — 셀렉트 아이콘과 배경의 명도 대비를 3:1 이상으로 확보하라고 합니다:

펼침 화살표 — 셀렉트 오른쪽 ▼ 아이콘이 배경과 3:1 이상. 너무 연한 회색 지양.

셀렉트 테두리 — 함께 셀렉트 박스 테두리도 배경과 충분한 대비로 — ’입력 컨트롤’임을 알리면 좋죠(원문은 아이콘 중심이지만, 테두리 대비도 같은 정신).

상태별 대비. 셀렉트는 여러 상태(기본·포커스·펼침·비활성)를 가집니다. 각 상태에서 아이콘이 배경과 충분한 대비를 가져야 하죠. 비활성(disabled) 셀렉트는 의도적으로 흐리게 하지만 — 활성 셀렉트의 아이콘은 또렷해야 합니다.

색에만 의존 안 됨. 명도 대비(302)는 ‘아이콘이 보이는가’를 다룹니다. 셀렉트는 선택 상태를 텍스트(선택된 옵션)로 보여주므로 — 라디오·체크박스처럼 ’색 외 선택 구분’ 규칙이 별도로 없는 대신, 아이콘 가시성이 핵심이죠.

이 규칙은 셀렉트의 ’시각적 인지 가능성’을 담당합니다 — 레이블(300)로 무엇인지 알리고, 펼침 아이콘이 또렷이 보이게(302) 해, 사용자가 ’여기가 드롭다운’임을 인지하고 쓰게 하죠. 저시력·밝은 환경 사용자 모두에게 이롭습니다.

정리하면 — 셀렉트 펼침 아이콘이 흐릿하면 사용자가 드롭다운임을 인지 못 하므로, 배경과 비텍스트 대비 3:1 이상을 확보해 또렷이 보이게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

아이콘 대비 3:1 — 셀렉트 펼침 화살표(▼)가 배경과 3:1 이상인가.

테두리 대비 — 셀렉트 박스 테두리가 입력 컨트롤로 인지될 만큼 보이는가.

상태별·환경 — 활성 셀렉트 아이콘이, 저시력·밝은 환경에서도 보이는가.

개선 방향

펼침 아이콘 색을 배경과 3:1 이상으로(연한 회색 지양). 대비 측정으로 검증.

셀렉트 테두리도 충분한 대비로 컨트롤 경계 인지.

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

역할	책임
디자이너	셀렉트 아이콘·테두리 색·대비 정의
퍼블리셔/개발	대비 구현·검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 셀렉트 펼침 화살표(▼)가 배경과 3:1 이상 대비인가요?

□ 셀렉트 박스 테두리가 입력 컨트롤로 인지될 만큼 보이나요?

□ 활성 셀렉트 아이콘이 저시력·밝은 환경에서도 보이나요?

❓ FAQ

Q1. 펼침 아이콘이 왜 중요한가요? 그 화살표가 ’누르면 펼쳐지는 드롭다운’임을 알리는 핵심 신호입니다. 안 보이면 드롭다운인 줄 모르죠. Q2. 왜 3:1인가요? 셀렉트 아이콘은 텍스트가 아니라 기능을 나타내는 그래픽이라 비텍스트 대비(3:1)가 적용됩니다 (텍스트는 4.5:1). Q3. 비활성 셀렉트도 3:1인가요? 비활성(disabled)은 의도적으로 흐리게 하는 게 맞습니다. 기준은 활성 셀렉트의 아이콘이죠.

6. 마무리

CP-302의 메시지:

펼침 화살표가 보여야 — 셀렉트 아이콘을 배경과 3:1 이상 대비로.

셀렉트 펼침 아이콘이 흐릿하면 사용자가 드롭다운임을 인지 못 합니다. 기능을 나타내는 그래픽이라 비텍스트 대비 3:1을 확보해 또렷이 보이게 하죠. 저시력·밝은 환경 모두에게 이롭습니다. 다음 편은 셀렉트의 스크린 리더 레이블 입니다.

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

ViewCheck는 셀렉트 아이콘의 명도 대비가 3:1 이상인지를 진단합니다.

📚 참고 출처

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