구분자도 보여야 경로가 읽힌다

KRDS CP-087 — 구분자는 배경과 3:1 이상의 명도 대비를 갖도록 사용하고 있다.

0. 들어가며 — ‘>’ 가 안 보이면 단계가 뭉친다

이번 207편은 브레드크럼 구분자(>, / 등)가 배경과 3:1 이상의 명도 대비를 갖게 하라는 규칙입니다.

브레드크럼의 각 단계는 구분자로 나뉩니다 — “홈 > 정책 > 보도자료”. 이 ‘>’ 가 너무 연해서 거의 안 보이면, 단계 경계가 흐려져 “홈정책보도자료” 처럼 뭉쳐 보이죠. 구분자는 단계를 가르는 시각 요소이므로, 충분히 보여야 경로가 단계별로 또렷이 읽힙니다. CP-087은 그 가시성을 명도 대비 3:1로 보장합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 구분자 3:1 대비

CP-087 (컴포넌트 > 브레드크럼) “구분자는 배경과 3:1 이상의 명도 대비를 갖도록 사용하고 있다.”

브레드크럼에서 경로 단계를 나누는 구분자(>, /, › 등)의 색이 배경과 비텍스트 대비 3:1 이상을 충족해 또렷이 보이게 하라는 뜻입니다.

정리: 구분자도 배경과 3:1 이상 대비를 충족해 보이게 하라. 이게 CP-087입니다.

2. 왜 구분자의 대비를 따지나

구분자는 장식이 아니라 단계의 경계를 알리는 시각 정보입니다. “홈 > 정책 > 보도자료”에서 ‘>’ 가 있어야 ’홈’과 ’정책’이 별개 단계임을, 그리고 왼쪽이 상위·오른쪽이 하위라는 방향을 읽죠. 이 구분자가 배경과 거의 같은 밝기여서 흐릿하게밖에 안 보이면 — 단계 경계가 사라져 링크들이 한 덩어리로 뭉쳐 보이고, 경로의 위계 방향도 흐려집니다.

여기서 적용되는 기준이 비텍스트 대비(Non-text Contrast) 3:1입니다. WCAG 2.1 SC 1.4.11(KWCAG 대응)은 정보를 전달하는 그래픽 객체 — 구분자 기호 같은 — 가 인접 배경과 최소 3:1의 명도 대비를 갖도록 요구합니다. 구분자는 글자라기보다 ’경계를 표시하는 그래픽 요소’에 가까워, 텍스트 대비(4.5:1)가 아닌 비텍스트 대비(3:1)가 적용 되죠(앞서 CP-075의 밑줄과 같은 논리).

흔한 실수는 구분자를 너무 연한 회색으로 두는 것입니다 — 디자인상 ‘은은하게’ 보이려고 #DDD 같은 색을 쓰면, 흰 배경에서 대비가 1.2~1.3:1에 그쳐 저시력 사용자나 밝은 화면에선 거의 안 보입니다. 구분자가 사라지면 단계 구분이 무너지므로, 충분히 진한 색(최소 3:1)으로 그려야 하죠. 보통 본문 텍스트보다는 약간 연하되 3:1은 넘는 중간 회색이 적절합니다.

주의할 균형점이 있습니다 — CP-087(구분자가 충분히 보여야 함)과 다음 편 CP-088(구분자가 스크린 리더에 탐지되지 않아야 함)은 모순처럼 들리지만 그렇지 않습니다. 구분자는 시각적으로는 또렷이 보이되(CP-087), 청각적으로는 읽히지 않아야(CP-088) 합니다. 시각 사용자에겐 경계 정보로 필요하지만, 스크린 리더가 “홈 꺽쇠 정책 꺽쇠 보도자료” 라고 읽으면 오히려 거추장스럽기 때문이죠. 즉 같은 구분자를 채널별로 다르게 처리합니다 — 눈엔 보이고 귀엔 안 들리게. CP-087은 그중 ’시각 채널’의 가시성을 담당합니다.

3. 점검 / 개선

무엇을 점검하나

구분자 색 대비 — 구분자(>, / 등)가 배경과 3:1 이상인가.

가시성 — 저시력·밝은 화면에서도 구분자가 또렷이 보이는가.

단계 구분 — 구분자 덕에 단계 경계가 분명히 읽히는가.

개선 방향

구분자 색을 너무 연한 회색(#DDD 등) 대신 3:1을 넘는 중간 회색으로.

대비 측정 도구로 구분자/배경 명도 대비 확인. CSS 의사요소(::before/::after)로 구분자 구현 시에도 색 대비 동일 적용.

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

역할	책임
디자이너	구분자 색을 3:1 이상으로 지정
퍼블리셔/개발	구분자 색·대비 구현 및 검증

기관 유형	CP-087 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (브레드크럼 사용 시)

구분자를 연하게 디자인한 사이트에서 특히 점검이 필요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 구분자(>, / 등) 색이 배경과 3:1 이상 대비인가요?

□ 저시력·밝은 화면에서도 구분자가 또렷이 보이나요?

□ 구분자 덕에 단계 경계가 분명히 읽히나요?

❓ FAQ

Q1. 구분자 대비가 왜 3:1인가요? 구분자는 텍스트가 아니라 그래픽 요소라 비텍스트 대비(3:1)가 적용됩니다. Q2. 은은하게 보이고 싶은데 너무 진하지 않나요? 디자인상 연하게 하더라도 3:1은 넘겨야 합니다. 안 보이면 경계 정보가 사라집니다. Q3. 그럼 스크린 리더도 구분자를 읽나요? 아닙니다. 시각적으론 보이되 스크린 리더엔 안 읽히게 합니다 — 다음 편 CP-088입니다.

6. 마무리

CP-087의 메시지:

구분자도 보여야 경로가 읽힌다 — 배경과 3:1 이상 대비를 충족하라.

구분자는 단계 경계와 위계 방향을 알리는 시각 정보입니다. 너무 연하면 단계가 뭉쳐 보이죠. 그래픽 요소라 비텍스트 대비 3:1을 충족해야 합니다. 단, 시각적으로 보이게 하되 스크린 리더엔 읽히지 않게 — 그 청각 채널 처리가 다음 편입니다. 이로써 브레드크럼 그룹의 마지막을 향합니다.

다음 편 예고 ▶ 「208. (CP-088) 스크린 리더에서 구분자 정보가 탐지되지 않도록 하고 있다.」

ViewCheck는 브레드크럼 구분자의 명도 대비가 3:1 기준을 충족하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 브레드크럼(Breadcrumb) 가이드 — https://www.krds.go.kr/html/site/component/component_07.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컴포넌트,웹표준