링크 밑줄도 보여야 한다

KRDS CP-075 — 텍스트 아래에 명도 대비 기준을 충족하는 밑줄을 사용하고 있다.

0. 들어가며 — 밑줄도 안 보이면 의미 없다

이번 195편은 앞 편(CP-074)의 거울입니다. 링크 텍스트 아래 밑줄은 명도 대비 기준을 충족해야 한다는 규칙 이죠.

CP-074에서 비링크엔 밑줄을 빼라고 했습니다. 반대로 실제 링크 단계에는 “여긴 클릭됩니다”를 알리는 밑줄을 씁니다. 그런데 밑줄을 그었어도 너무 흐려서 안 보이면 링크 신호 역할을 못 하죠. CP-075는 그 밑줄이 배경과 충분한 명도 대비를 갖도록 — 즉 눈에 보이는 밑줄이 되도록 규정합니다.

1. 규칙 원문 — 밑줄의 명도 대비 충족

CP-075 (컴포넌트 > 브레드크럼) “텍스트 아래에 명도 대비 기준을 충족하는 밑줄을 사용하고 있다.”

링크 텍스트 아래에 밑줄을 쓰되, 그 밑줄이 배경과 명도 대비 기준(KWCAG/WCAG의 비텍스트 대비 3:1)을 충족해 또렷이 보이게 하라는 뜻입니다.

정리: 링크 밑줄은 배경과 3:1 이상 대비를 충족해 또렷이 보여라. 이게 CP-075입니다.

2. 왜 밑줄의 명도 대비를 따지나

밑줄은 단순 장식이 아니라 ’이 텍스트는 링크’라는 정보 전달 요소입니다. 색에만 의존하지 않고 형태(밑줄) 로도 링크임을 알려, 색각 이상 사용자나 색 구분이 어려운 환경에서도 링크를 인지하게 하죠(KWCAG ‘색에 무관한 인식’). 그런데 밑줄이 배경과 거의 같은 밝기여서 흐릿하게밖에 안 보이면, 이 정보 전달 기능이 무너집니다.

여기서 적용되는 기준이 비텍스트 대비(Non-text Contrast) 3:1입니다. WCAG 2.1 SC 1.4.11(KWCAG 대응 항목)은 UI 컴포넌트와 그래픽 객체 — 밑줄 같은 시각적 경계선 포함 — 가 인접 배경과 최소 3:1의 명도 대비를 가져야 한다고 규정합니다. 밑줄은 텍스트의 일부가 아니라 텍스트를 꾸미는 ’그래픽 요소’에 가깝기 때문에, 텍스트 대비 (4.5:1)가 아닌 비텍스트 대비(3:1)가 적용되죠.

예를 들어 흰 배경(#FFFFFF)에 아주 연한 회색 밑줄(#D0D0D0)을 쓰면 대비가 약 1.3:1로, 거의 보이지 않습니다. 저시력 사용자나 밝은 야외 화면에서는 밑줄이 사라진 것처럼 보이죠. 그러면 밑줄로 링크를 구분하려던 의도가 실패합니다. 충분히 진한 색(예: 링크 텍스트와 같은 색이나 그에 준하는 색)으로 밑줄을 그어 3:1을 넘겨야 합니다.

핵심은 — 밑줄을 그었다는 사실이 아니라, 그 밑줄이 실제로 보이느냐입니다. CP-074에서 비링크의 밑줄을 빼고, CP-075에서 링크의 밑줄을 또렷이 보이게 하면, 사용자는 밑줄 유무로 링크/비링크를 명확히 구분합니다. 흐린 밑줄은 ’있으나 마나’이므로, 대비 기준이 이를 막아줍니다. 보통 링크 텍스트와 동일 색으로 밑줄을 그으면 텍스트가 이미 4.5:1을 충족하므로 밑줄도 자연히 3:1을 넘깁니다.

3. 점검 / 개선

무엇을 점검하나

밑줄 존재 — 링크 단계 텍스트 아래에 밑줄이 있는가.

명도 대비 3:1 — 밑줄 색이 배경과 3:1 이상 대비를 갖는가.

가시성 확인 — 저시력·밝은 화면 환경에서도 밑줄이 또렷이 보이는가.

개선 방향

밑줄 색을 링크 텍스트 색과 동일하게(또는 그에 준하게) 지정 → 자연히 3:1 이상.

연한 회색 밑줄 지양. 대비 측정 도구로 밑줄/배경 대비 확인.

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

역할	책임
디자이너	링크 밑줄 색을 3:1 이상으로 지정
퍼블리셔/개발	text-decoration 밑줄 색·두께 구현, 대비 검증

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

브레드크럼의 링크 단계에 밑줄을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크 단계 텍스트 아래에 밑줄이 있나요?

□ 밑줄 색이 배경과 3:1 이상 대비를 갖나요?

□ 저시력·밝은 화면에서도 밑줄이 또렷이 보이나요?

❓ FAQ

Q1. 밑줄 대비 기준이 왜 3:1인가요? 밑줄은 텍스트가 아니라 그래픽 요소라 비텍스트 대비(3:1)가 적용됩니다. 텍스트 자체는 4.5:1입니다. Q2. 밑줄 색을 텍스트와 같게 하면 되나요? 네, 가장 안전합니다. 링크 텍스트가 4.5:1을 충족하면 같은 색 밑줄은 자연히 3:1을 넘깁니다. Q3. 평소엔 밑줄을 숨기고 hover 때만 보이면 안 되나요? 색만으로 링크를 구분하면 색각 이상 사용자에게 불리합니다. 기본 상태에서 밑줄(또는 다른 비색 신호)이 보이는 편이 안전합니다.

6. 마무리

CP-075의 메시지:

링크 밑줄도 보여야 한다 — 배경과 3:1 이상 대비를 충족하라.

밑줄은 ’이건 링크’라는 비색(非色) 신호입니다. 흐려서 안 보이면 그 역할을 못 하죠. 밑줄은 그래픽 요소라 비텍스트 대비 3:1이 적용되며, 보통 링크 텍스트와 같은 색으로 그으면 자연히 충족됩니다. 다음 편은 밑줄에 더해 마우스오버 효과로 링크임을 명확히 하는 규칙입니다.

다음 편 예고 ▶ 「196. (CP-076) 마우스오버 효과를 적용하여 링크로 작동함을 사용자가 명확하게 인지할 수 있게 사용하고 있다.」

ViewCheck는 브레드크럼 링크 밑줄의 명도 대비가 기준을 충족하는지를 진단합니다.

📚 참고 출처

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컴포넌트,웹표준