더보기 링크 색상 대비 기준 충족

라이트그레이 배경 위의 "더보기" 링크 색상이 WCAG AA 기준을 만족하지 못하고 있다는 것을 발견했다. 시각 장애인뿐 아니라 일반 사용자도 화면 밝기나 환경에 따라 이런 링크를 놓치기 쉽다. 색상을 fg-soft에서 더 진한 회색으로 변경하는 작업을 진행했다.

발견한 문제

처음엔 "더보기" 링크가 단순히 "덜 눈에 띄는" 정도로 봤다. 하지만 접근성 감사를 하다 보니 WCAG 기준을 정량적으로 체크해야 한다는 걸 깨달았다. 라이트그레이(#F5F5F5 같은) 배경 위에 fg-soft(#999999 같은 밝은 회색) 텍스트를 올리면 명도 대비(contrast ratio)가 3:1 미만이 되는 경우가 많다. AA 기준은 일반 텍스트 4.5:1, 큰 텍스트(18pt+) 3:1을 요구한다. 링크는 상호작용 요소이므로 더 엄격하게 봐야 한다.

특히 모바일에서 실외 햇빛 아래 화면을 볼 때, 혹은 나이 든 사용자가 시력이 약했을 때 이런 低대비 색상은 거의 읽을 수 없다.

WCAG 색상 대비 기준 정리

더보기 링크는 상호작용 요소(interactive control)이면서 일반 크기 텍스트이므로 4.5:1 기준을 충족해야 한다.

색상 선택의 트레이드오프

처음에는 단순히 "더 어두운 회색을 쓰면 되지 않나?"라고 생각했다. 하지만 디자인과 접근성 사이의 균형이 있다.

/* before: 명도 대비 부족 */
.link-soft {
  color: #999999;  /* 대비 3.2:1, AA 미달 */
}

/* after: AA 기준 충족 */
.link-soft {
  color: #666666;  /* 대비 4.8:1, AA 충족 */
}

어두운 회색으로 변경하면 링크가 "더보기"라는 보조 정보로서의 은은한 느낌을 잃는다. 하지만 접근성은 마모(trade-off)의 문제가 아니라 의무다. 라이트그레이 배경 선택 자체를 바꿀 수도 있었지만, 디자인 시스템 전체에 미치는 영향이 크고, 지금 단계에서는 배경 색을 유지하면서 글자 색만 조정하기로 했다.

변경 파일과 영향 범위

public/styles.css: 색상 정의를 업데이트. 아마도 --fg-soft CSS 변수나 .text-soft 클래스의 컬러 값을 수정했을 것이다.

src/layouts/Base.astro: 레이아웃 파일에서 더보기 링크에 적용된 색상 클래스를 확인하고 필요하면 명시적으로 더 강한 대비 색상 클래스를 추가했을 가능성이 있다.

이 변경은 조용하지만 광범위한 영향을 미친다. 왜냐하면 fg-soft 색상을 쓰는 다른 요소들(보조 텍스트, 비활성 버튼 등)도 함께 어두워지기 때문이다. 그래서 변경 전에 전체 디자인을 훑으며 "이 색상이 또 어디에 쓰이나?" 체크해야 했다.

회고: 접근성 체크를 시스템화하기

이번 작업으로 배운 점은 접근성이 "마지막에 붙이는 것"이 아니라는 거다. 디자인 초기 단계에서 색상을 정할 때 WCAG 기준을 염두에 두지 않으면 나중에 이렇게 사후 수정을 하게 된다.

앞으로 팀에 적용할 패턴:
- 신규 색상 정의 시 대비율 계산 자동화 (WebAIM, Accessible Colors 같은 도구)
- CSS 변수 이름에 명도 수준 명시 (--text-strong, --text-default, --text-weak)
- 디자인 시스템 문서에 "이 색상은 배경 #XXXXXX 위에서만 사용 가능"이라고 명시

간단한 CSS 수정처럼 보이지만, 이건 사용자 경험의 기본 요건을 지키는 일이다. 시각 장애가 없어도 누구나 좋은 가독성의 이점을 본다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.