색만으론 링크인 줄 모른다

KRDS CP-256 — 링크를 색상만으로 구분하지 않고 있다.

0. 들어가며 — 파란 글씨만으로는 부족하다

이번 376편은 링크를 색상만으로 구분하지 않는다는 규칙입니다.

본문 속 링크를 — 파란 글씨로만 표시하는 경우가 흔합니다. 그런데 색을 구별하기 어려운 사용자(색각 이상)는 ’파란 글씨’와 ’검은 본문’을 구별 못 해, 어디가 링크인지 모르죠. CP-256은 색 외 단서(밑줄 등)도 함께 써서 링크임을 알리라고 규정합니다. 달력 CP-165, 배지 CP-186, 탭 CP-234에서 반복된 ’색 무관 인식’의 링크 버전 이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 색상만으로 구분 금지

CP-256 (컴포넌트 > 링크) “링크를 색상만으로 구분하지 않고 있다.”

링크를 주변 텍스트와 색만으로 구별하지 말고, 밑줄 등 색 외 단서를 함께 제공해 색을 못 보는 사용자도 링크임을 알게 하라는 뜻입니다.

정리: 링크를 색만으로 구분하지 말고 밑줄 등 단서를 함께 써라. 이게 CP-256입니다.

2. 왜 색만으로 구분하면 안 되나

이는 웹 접근성의 핵심 원칙 ‘색에 무관한 인식’(KWCAG, WCAG SC 1.4.1 Use of Color) 의 링크 적용입니다. 특히 — 본문 속 인라인 링크에서 중요하죠. 정보를 색만으로 전달하면, 색을 구별하기 어려운 사용자에게는 그 정보가 전달되지 않습니다.

색만으로 링크를 표시하는 문제. 본문 텍스트 속에 링크가 있을 때 — 흔히 링크를 ’파란 글씨’로만 표시합니다 (밑줄 없이 색만). 그런데:

색각 이상 사용자 — 적록색맹 등은 특정 색을 구별 못 합니다. 검은 본문 속 파란 링크를 — 색 차이를 못 봐 ’그냥 본문’으로 여기죠. 어디가 클릭 가능한 링크인지 모릅니다.

저시력·흑백 환경 — 색 대비 인지가 약하거나 흑백 화면에서는 색 차이가 안 보여, 링크가 본문에 묻히죠.

링크를 못 알아보면 — 사용자는 그 링크(다른 정보·기능으로의 입구)를 놓칩니다. 본문 속 중요한 링크를 클릭하지 못하죠.

그래서 CP-256은 — 링크를 색에 더해 색 외 단서로도 구분하라고 합니다. 핵심 수단:

밑줄(underline) — 가장 확실합니다. 링크에 밑줄을 그으면 — 색을 못 봐도 ’밑줄 있는 텍스트 = 링크’임을 형태로 알죠. 밑줄은 수십 년간 웹에서 링크의 표준 시각 신호입니다. 특히 본문 속 인라인 링크는 밑줄이 강력히 권장되죠.

굵기·아이콘 등 — 보조적으로 굵기, 링크 아이콘 등을 쓰기도 하지만, 밑줄이 가장 보편적이고 확실합니다.

색 + 밑줄 함께. 보통 링크는 — 색(파란색 등)과 밑줄을 함께 씁니다. 색은 빠른 인지(시각 사용자), 밑줄은 색 무관 형태 단서(색맹 포함 모두)죠. 둘이 함께라야 모든 사용자가 링크를 인지합니다. 색만 쓰면 색맹이 놓치고요.

WCAG의 본문 링크 기준. WCAG는 — 본문 텍스트 속 링크가 색만으로 구별되는 경우, 그 링크 색과 주변 텍스트 색의 명도 대비가 3:1 이상이고 추가로 hover·focus 시 다른 시각 단서(밑줄 등)를 제공하거나, 아예 밑줄 등 비색 단서를 상시 제공하라고 규정합니다(SC 1.4.1 관련 기법). 가장 안전하고 권장되는 건 — 상시 밑줄 이죠. 메뉴·버튼처럼 맥락상 링크임이 명확한 곳(별도 영역, 버튼 형태)은 밑줄을 생략할 수 있지만, 본문 속 인라인 링크는 밑줄로 구분하는 게 원칙입니다.

인라인 vs 명확한 맥락. 즉 — 본문 문장 속에 끼인 인라인 링크는 주변 본문과 섞이므로 밑줄이 거의 필수이고, 독립 영역의 링크(메뉴 항목, 버튼)는 위치·형태로 링크임이 자명해 밑줄을 생략하기도 합니다. 핵심은 ’색만으로 구별되는 상황’을 피하는 것 — 색 외 단서나 명확한 맥락이 있으면 되죠.

이 규칙은 링크 시각 표현의 접근성 축입니다 — 크기(254)·위계(255)에 더해, 색 외 단서로 링크를 모두에게 인지 시키죠. 달력 색 무관(CP-165), 배지 색 무관(CP-186), 탭 선택 색 외 단서(CP-234)와 같은 정신입니다.

정리하면 — 링크를 색만으로 구분하면 색맹·흑백 환경 사용자가 놓치므로, 밑줄 등 색 외 단서를 함께 써(특히 본문 속 인라인 링크) 모든 사용자가 링크임을 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

색 외 단서 — 링크가 색뿐 아니라 밑줄 등으로 구분되는가(회색조로 봐도 링크 식별).

인라인 링크 밑줄 — 본문 속 인라인 링크에 밑줄(또는 명확한 단서)이 있는가.

대비 — 색만 쓰는 곳이면 링크/본문 색 대비가 충분한가(보완 단서 포함).

개선 방향

본문 인라인 링크에 상시 밑줄 제공. 색만 의존 제거.

메뉴·버튼 등 명확한 맥락은 형태로 구분. 회색조 시뮬레이션 검증.

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

역할	책임
디자이너	링크 색 외 단서(밑줄 등) 정의
퍼블리셔/개발	밑줄·단서 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크가 색뿐 아니라 밑줄 등으로 구분되나요(회색조로 봐도 링크 식별)?

□ 본문 속 인라인 링크에 밑줄(또는 명확한 단서)이 있나요?

□ 색만 쓰는 곳이면 링크/본문 색 대비가 충분한가요?

❓ FAQ

Q1. 파란 글씨면 링크인 줄 알지 않나요? 색각 이상·흑백 환경 사용자는 색 차이를 못 봅니다. 밑줄 등 형태 단서가 필요하죠. Q2. 모든 링크에 밑줄을 해야 하나요? 본문 속 인라인 링크는 밑줄이 거의 필수입니다. 메뉴·버튼처럼 맥락상 링크임이 명확하면 생략하기도 하죠. Q3. 밑줄이 디자인을 해쳐요. 본문 링크는 밑줄이 표준 신호라 가독성·접근성에 유리합니다. 디자인보다 인지가 우선이죠.

6. 마무리

CP-256의 메시지:

색만으론 링크인 줄 모른다 — 링크를 색 외 단서(밑줄 등)로도 구분하라.

링크를 색만으로 표시하면 색맹·흑백 환경 사용자가 링크를 못 알아봅니다. 밑줄 등 색 외 단서를 함께 써(특히 본문 속 인라인 링크) 모두가 링크임을 인지하게 하죠. 색 무관 인식의 링크 적용입니다. 다음 편은 링크 레이블의 목적지 예측입니다.

다음 편 예고 ▶ 「377. (CP-257) 링크 레이블은 연결된 목적지 정보를 예측할 수 있는 내용으로 제공하고 있다.」

ViewCheck는 링크가 색상만으로 구분되지 않는지를 진단합니다.

📚 참고 출처

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