섹션 더보기 링크 색상 진하게 조정해 접근성 기준 충족

섹션 더보기 링크의 색상을 gold-deep으로 조정해 WCAG AA 접근성 기준을 충족하도록 했다. 기존 gold 색상은 흰 배경 위에서 명도 대비가 부족했는데, 이번 수정으로 시각장애나 저시력을 가진 사용자도 링크를 충분히 식별할 수 있게 됐다.

왜 색상 대비가 중요한가

팀에서는 접근성을 단순한 "체크리스트" 항목이 아니라 사용자 경험의 기본으로 본다. 전 세계 인구의 약 4~8%가 색각이상(색맹)을 가지고 있고, 저시력 사용자들도 상당하다. "더보기", "자세히 보기" 같은 링크는 컨텐츠 탐색의 핵심 요소인데, 이런 요소를 찾지 못하면 사용자가 아예 그 섹션에 접근할 수 없다.

색상만 다르고 텍스트 크기나 형태는 같은 링크라면, 명도 차이가 충분하지 않을 때 사람에 따라 구분 자체가 불가능해진다. 기존 gold 색상이 아름답긴 했지만, 순수함 자체가 문제였다.

색상 대비도 기준: WCAG AA

WCAG(Web Content Accessibility Guidelines)는 텍스트와 배경 간 명도 대비 비율을 명확히 정의한다:

기존 gold는 흰색 배경 위에서 이 비율을 충족하지 못했다. gold 색상은 RGB에서 녹색과 빨강이 높아서 밝기 지수(luminance)가 올라가고, 결과적으로 흰색과의 대비가 약해진다. 더 진하고 포화도 높은 gold-deep으로 변경하면 명도 차이가 커져 AA 기준을 넘을 수 있다.

이제 색상 약한 사람도, 저시력 사용자도 링크를 "보이는" 것이 아니라 명확히 식별할 수 있다.

Base.astro: 전체 레이아웃에 미치는 영향

base 레이아웃 파일 하나 수정으로 사이트 전역의 섹션 더보기 링크가 일관되게 개선된다. 이 파일을 상속받는 모든 페이지가 새로운 색상을 적용받기 때문이다.

팀 입장에서 이점이 크다:
- 중복 작업 제거: 각 페이지나 컴포넌트마다 따로 수정할 필요 없음
- 일관성 보장: 한 곳의 변경이 전체에 동일하게 반영
- 유지보수 단순화: 향후 색상 조정도 한곳에서만 관리

이렇게 핵심 레이아웃에서 접근성 기준을 먼저 맞춰두면, 나중에 개별 피처에서 색상을 추가할 때도 자연스럽게 기준을 따르게 된다.

디자인 시스템과 접근성: 처음부터 설계하기

이 작업을 통해 배운 가장 중요한 교훈은, 디자인 시스템을 만들 때 접근성을 먼저 고려해야 한다는 것이다. 이미 배포된 색상을 나중에 개선하려면 전체 사이트를 다시 순회하며 수정해야 하므로 훨씬 비효율적이다.

비슷한 상황에서 우리 팀이 하는 방식:

1. 설계 단계에서 검증: 기본 색상표를 정할 때부터 Contrast Ratio 도구(WebAIM, Stark 등)로 각 조합을 미리 확인
2. 구현 후 재검증: 실제 렌더링된 화면에서 다시 확인 (폰트 굵기, 줄 높이, 렌더링 엔진에 따라 대비도가 달라질 수 있음)
3. 자동화 테스트: axe나 Lighthouse 같은 도구를 CI 파이프라인에 통합해 기준 위반 색상이 마스터에 들어가지 못하도록 막기

이렇게 방어선을 여러 겹 두면, 팀 전체가 실수로 기준을 깨뜨릴 가능성이 줄어든다.

작은 개선들이 모여 포용적인 서비스로

개별 수정 하나만으로는 큰 변화로 보이지 않을 수 있다. 하지만 색상 대비 개선, 키보드 네비게이션 지원, 스크린리더 호환성 향상 같은 작은 것들이 쌓이면서 점점 더 많은 사람이 우리 서비스를 편하게 사용할 수 있게 된다. 팀 리더로서 이런 누적이 기술 팀이 할 수 있는 가장 의미 있는 일이라고 생각한다.

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

• IPS모니터 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →
• 노트북 쿠팡에서 보기 →

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