현재는 색 말고도 달라야

KRDS CP-127 — 현재 화면 숫자 링크는 밑줄, 배경 반전, 텍스트 크기 조정 등의 방식을 활용하여 다른 링크와 명확하게 구분되게 구현하고 있다.

0. 들어가며 — 현재 강조를 ‘어떻게’

이번 247편은 현재 숫자 링크를 밑줄·배경 반전·텍스트 크기 조정 등으로 다른 링크와 명확히 구분하라는 규칙 입니다.

CP-116에서 ’현재 번호를 강조하라’는 원칙을, CP-126에서 ’href 삭제 + aria-current’라는 동작·보조기술 처리를 봤습니다. CP-127은 그 시각적 강조를 구체적으로 어떻게 할지를 규정하죠 — 밑줄, 배경 반전, 크기 조정 등. 핵심은 색에만 의존하지 말고 형태 단서로 구분하라는 것입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 비색 방식으로 명확히 구분

CP-127 (컴포넌트 > 페이지네이션) “현재 화면 숫자 링크는 밑줄, 배경 반전, 텍스트 크기 조정 등의 방식을 활용하여 다른 링크와 명확하게 구분되게 구현하고 있다.”

현재 페이지 번호를 밑줄·배경 반전·글자 크기 등 색이 아닌(또는 색을 보완하는) 시각 방식으로 강조해, 다른 번호 링크와 또렷이 구별되게 하라는 뜻입니다.

정리: 현재 번호는 밑줄·배경 반전·크기 등 비색 단서로 명확히 구분하라. 이게 CP-127입니다.

2. 왜 색이 아닌 방식이어야 하나

현재 페이지 강조는 ‘위치 정보’ 전달입니다. 그런데 이 정보를 색만으로 전달하면 — 색을 구별하기 어려운 사용자에게는 전달되지 않죠. 이는 웹 접근성의 핵심 원칙 ‘색에만 의존하지 말 것’(KWCAG ‘색에 무관한 인식’, WCAG SC 1.4.1 Use of Color) 에 닿습니다.

예를 들어 현재 번호만 파란색으로 칠하고 나머지를 검은색으로 두면 — 색각 이상(적록색맹 등) 사용자나 흑백 화면, 저대비 환경에서는 현재가 어느 것인지 구별되지 않습니다. 색의 차이가 안 보이니 ’현재 위치’라는 정보가 사라 지죠. 페이지네이션은 위치 표시가 핵심인 내비게이션이라, 이 정보가 일부 사용자에게 누락되면 치명적입니다.

그래서 CP-127은 현재 번호를 색 외의 형태 단서로 구분하라고 합니다. 규칙이 예시한 방식들:

밑줄(underline) — 현재 번호에만 밑줄을 그어 형태로 구별. 색과 무관하게 보입니다.

배경 반전(inverted background) — 현재만 배경색을 채우고 글자색을 반전(예: 다른 번호는 흰 배경·검은 글자, 현재는 파란 배경·흰 글자). 배경이 채워진 ’덩어리’라는 형태 차이가 색맹에게도 보입니다.

텍스트 크기 조정 — 현재 번호를 살짝 크게 하거나 굵게(bold). 크기·두께 차이는 색과 독립적입니다.

그 외 테두리(border) 추가 등.

이 방식들은 색을 보완하거나 대체합니다. 색을 써도 좋지만, 색’만’이 아니라 위 형태 단서를 함께 써야 하죠. 가장 흔하고 안전한 것은 배경 반전입니다 — 현재만 배경이 채워지면 색맹이든 저시력이든 흑백이든 ’저게 현재’임이 형태로 분명히 보이니까요.

명도 대비도 함께. 배경 반전을 쓸 때는 반전된 글자색과 배경색이 명도 대비 기준(텍스트 4.5:1)을 충족해야 합니다. 예를 들어 파란 배경에 흰 글자가 충분히 대비되는지 확인해야죠. 강조한다고 대비가 깨지면 오히려 안 보입니다.

이 규칙은 페이지네이션 현재 표시 3종 세트를 완성합니다 — CP-116(현재를 강조하라, 원칙), CP-126(href 삭제 + aria-current, 동작·보조기술), CP-127(밑줄·반전·크기 등 비색 방식, 시각 구체). 셋이 합쳐져 현재 페이지가 시각·청각 모든 채널에, 색 의존 없이, 명확하게 표시되죠. 사이드 메뉴의 현재 강조(CP-091)와도 같은 정신입니다.

3. 점검 / 개선

무엇을 점검하나

비색 단서 — 현재 번호가 밑줄·배경 반전·크기 등 형태로 구분되는가(색만 아님).

명확성 — 다른 번호와 한눈에 또렷이 구별되는가.

대비 유지 — 배경 반전 시 글자/배경 명도 대비가 충족되는가.

개선 방향

현재 번호에 배경 반전(+굵기/테두리) 등 형태 단서 적용. 색만 의존 금지.

반전 색 조합의 명도 대비(4.5:1) 확인.

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

역할	책임
디자이너	현재 번호 비색 강조 스타일 정의
퍼블리셔/개발	강조 구현·대비 검증

기관 유형	CP-127 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (페이지네이션 사용 시)

페이지네이션을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 번호가 밑줄·배경 반전·크기 등 형태로 구분되나요(색만 아님)?

□ 다른 번호와 한눈에 또렷이 구별되나요?

□ 배경 반전 시 글자/배경 명도 대비가 충족되나요?

❓ FAQ

Q1. 현재만 색을 바꾸면 안 되나요? 색만으론 색각 이상·흑백 환경에서 안 보입니다. 밑줄·배경 반전 등 형태 단서를 함께 써야 합니다. Q2. 가장 안전한 방식은? 배경 반전이 흔하고 안전합니다. 채워진 덩어리라는 형태 차이가 누구에게나 보입니다. Q3. CP-116과 뭐가 다른가요? CP-116은 ’강조하라’는 원칙, CP-127은 ’밑줄·반전·크기 등 비색 방식으로’라는 구체 구현입니다.

6. 마무리

CP-127의 메시지:

현재는 색 말고도 달라야 — 밑줄·배경 반전·크기 등 비색 단서로 명확히 구분하라.

색만으로 현재를 표시하면 색각 이상·흑백 환경 사용자에게 전달되지 않습니다. 밑줄·배경 반전·크기 등 형태 단서를 써야 누구에게나 현재가 보이죠. 배경 반전이 가장 안전하며, 반전 색의 명도 대비도 챙겨야 합니다. CP-116·126·127이 현재 표시를 완성합니다. 다음 편은 각 페이지 링크의 접근 가능한 이름입니다.

다음 편 예고 ▶ 「248. (CP-128) aria-label=“페이지 1” 또는 title=“페이지”와 같은 방식으로 접근 가능한 이름이나 보조적 설명을 제공하고 있다.」

ViewCheck는 페이지네이션 현재 번호가 비색 단서로 명확히 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 페이지네이션(Pagination) 가이드 — https://www.krds.go.kr/html/site/component/component_10.html

WCAG 2.1 SC 1.4.1 Use of Color — https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준