링크 스타일 표준화｜색 대비· 밑줄· 호버 인터랙션 실전
요약: 링크는 블로그 탐색의 최소 단위입니다. 색 대비, 밑줄, 호버/포커스, 방문 상태, 외부 링크 구분까지 표준화하면 독자는 길을 잃지 않고, 검색·접근성 신호가 함께 좋아집니다. 이 글은 실무 규칙과 코드, 점검표까지 포함해 즉시 적용 가능한 형태로 구성했습니다.
색 대비 수치와 기준
링크는 문장 속에서 본문 텍스트와 공존합니다. 따라서 링크 색은 배경과의 대비뿐 아니라 주변 텍스트와의 구분까지 고려해야 합니다. 가장 안전한 기준은 WCAG AA입니다. 일반 텍스트 크기에서는 4.5:1, 큰 텍스트(18.66px bold 이상)에서는 3:1 이상을 권장합니다. 링크를 색만으로 구분하면 색각 이상 사용자에게 의미가 사라질 수 있으므로, 밑줄을 기본값으로 두고 색은 보조 역할로 쓰는 것이 실무적으로 안정적입니다.
대비 검사는 스킨을 바꾸거나 팔레트를 손댈 때 반드시 동반되어야 합니다. 특히 어두운 배경(다크 테마)와 밝은 배경(라이트 테마)을 함께 지원한다면, 링크 색의 명도/채도를 각각 조정해 두 테마 모두에서 기준을 통과하도록 설계해야 합니다. 호버·포커스 색은 원본과 충분한 차이를 두어 상태 변화가 즉시 감지되도록 합니다. 단, 대비를 지나치게 높여 시각적 피로를 유발하지 않도록 채도보다는 명도 차이를 우선 조정하는 방법이 유효합니다.
| 상황 | 권장 대비 | 설계 포인트 |
|---|---|---|
| 일반 텍스트 링크 | ≥ 4.5:1 | 본문과 구분 + 밑줄 기본 |
| 큰 텍스트 링크 | ≥ 3:1 | 히어로/카드 타이틀 |
| 호버/포커스 | 원본 대비 명확 | 명도↑ 또는 채도↑ |
팁: 대비 수치를 문서화해 ‘색상 토큰’으로 관리하면 스킨 변경 시 회귀 테스트가 쉬워집니다.
밑줄·호버·포커스 규칙
링크는 사용자가 ‘클릭 가능한 것’임을 즉시 인지해야 합니다. 밑줄은 가장 강력하고 접근성 친화적인 신호입니다. 기본 상태에서 밑줄을 두고, 호버 시에는 색을 살짝 진하게 하거나 밑줄 두께(text-decoration-thickness)를 1.5px → 2px로 키워 미세한 피드백을 줍니다. 포커스는 키보드 사용자(또는 스크린 리더 겸용 사용자)가 현재 위치를 잃지 않게 도와주는 핵심 요소로, :focus-visible 테두리를 명확히 표시해야 합니다.
모바일은 호버 개념이 없으므로, 데스크톱에서만 강한 색 변화에 의존하지 않도록 하세요. 링크 주변에 다른 상호작용 요소(버튼, 아이콘)가 많은 경우, 링크에만 적용되는 언더라인 + 색 강도 조합으로 일관성을 만들어 줍니다. 본문과 카드형 목록, 푸터/사이드바 등 맥락별로 강도만 차등화하면, 전체 블로그에서 링크 체계가 하나의 언어처럼 작동합니다.
/* 본문 링크 기본/호버/포커스 */
.post a{
color:#2563eb;
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1.5px;
}
.post a:hover{
color:#1d4ed8;
text-decoration-thickness:2px;
}
.post a:focus-visible{
outline:3px solid #22c55e; outline-offset:2px; border-radius:6px;
}
주의: 밑줄을 전부 제거하고 색만 바꾸면, 색각 이상 사용자나 저대비 환경에서 링크가 눈에 띄지 않습니다.
방문 링크 차별화 & 외부 링크 아이콘
방문 링크(:visited)는 독자의 정보 비용을 줄여 줍니다. 이미 읽은 글은 목록에서 빠르게 배제하고, 새 글로 이동하도록 돕죠. 방문 상태는 기본색보다 어두운 보라/회색 등으로 통일하고, 카드 목록 제목에는 읽음 플래그를 보조로 붙일 수 있습니다. 단, 방문 색이 현재 테마의 대비 기준을 침해하지 않도록 수치 점검이 필요합니다.
/* 방문 상태 */
.post a:visited{ color:#7c3aed; } /* 보라 톤 예시 */
/* 선택: 읽음 뱃지 */
.read-flag{ display:inline-block; margin-left:6px; font-size:12px; color:#475569; }
외부 링크는 새 창에서 열릴 때만 작은 화살표 아이콘(↗)을 자동 부착합니다. 이렇게 하면 사용자에게 ‘지금 페이지를 벗어난다’는 맥락 신호를 제공합니다. 보안·성능을 위해 target="_blank"를 사용할 경우 rel="noopener"를 함께 지정하는 것을 습관화하세요. 내부 앵커나 자체 도메인 링크에는 아이콘을 붙이지 않는 일관성이 중요합니다.
/* 외부 링크 아이콘 & 보조 텍스트(선택) */
.post a[target="_blank"]::after{
content:"↗"; margin-left:4px; color:#0ea5e9; font-size:.9em;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
팁: 외부 링크 정책을 문서화해 ‘새 창 여부’ 기준을 명확히 두면 운영 중 혼선을 줄일 수 있습니다.
실무 패턴 세트(복붙용)
본문 링크 세트
<p>자세한 내용은 <a href="/entry/toc-guide">자동 목차 가이드</a>를 참고하세요.</p>
<p>외부 문서: <a href="https://example.com" target="_blank" rel="noopener">공식 문서</a></p>
카드 목록에서 제목 링크
.card a.title{
color:#0f172a; text-decoration:none; border-bottom:1px dotted rgba(2,6,23,.2);
}
.card a.title:hover{ color:#1d4ed8; border-color:#1d4ed8; }
.card a.title:visited{ color:#6b21a8; } /* 방문 상태 */
푸터/사소 링크 최소 스타일
.footer a{ color:#475569; text-decoration:underline; text-underline-offset:2px }
.footer a:hover{ color:#0f172a }
점검표｜합격 기준과 흔한 실수
| 항목 | 권장 규칙 | 합격 기준 |
|---|---|---|
| 대비 | 일반 4.5:1 이상 | 전체 본문 링크 통과 |
| 밑줄 | 기본 on, 호버 시 두께↑ | 링크/텍스트 즉시 구분 |
| 포커스 | :focus-visible 테두리 |
키보드만으로 탐색 가능 |
| 방문 | 보라/회색 톤 차별화 | 중복 클릭 감소 |
| 외부 | ↗ 아이콘 + rel="noopener" |
새 창 인지·보안 확보 |
실천 요약
- 밑줄 기본 + 대비 4.5:1을 유지하고, 호버/포커스 피드백을 넣는다.
- 방문 상태를 색으로 구분해 중복 클릭을 줄인다.
- 외부 링크에는 ↗ 아이콘과
rel="noopener"를 적용한다.