저대비 카드 텍스트, 색상 토큰 개선으로 접근성 기준 충족

어느 날 오후 디자인 리뷰에서 한 팀원이 "카드 날짜가 잘 안 보인다"고 지적했다. 내 모니터에서는 충분히 보였지만, 밝은 화면이나 다른 각도에서 보니 문제가 명확했다. 접근성 검사 도구를 돌려보니 예상대로 WCAG AA 기준을 만족하지 못하고 있었다. "또 다른 색상 튜닝인가" 싶기도 했지만, 우리 팀에서 약속한 접근성 지표를 지키는 것도 중요했고, 사용자 경험의 질을 높이는 것도 중요했다. 이번 작업을 통해 느낀 접근성과 설계의 관계를 정리해본다.

색상 대비, 숫자로 규정되다

웹 접근성 기준 WCAG 2.1에서는 텍스트와 배경색 간의 명도 대비를 수치화한다. 일반 텍스트는 AA 기준 4.5:1 이상, AAA 기준 7:1 이상의 대비율을 요구한다. 이 숫자들은 단순한 "권장사항"이 아니다. 저시력 사용자(WCAG 정의로는 시력 20/40 정도)도 읽을 수 있게 하려는 과학적 기준이다.

우리 디자인 시스템에서 fg-mute 토큰은 "낮은 강조" 텍스트용으로 정의했었다. 날씨 정보, 카드 날짜, 부가 설명 같은 보조적 콘텐츠에 사용하려는 의도였다. 그런데 카드 배경(보통 흰색 또는 밝은 회색)에 이 토큰을 얹으니 명도 대비가 4.5 미만으로 떨어졌다. 시력이 정상인 사람도 작은 폰트에선 읽기 힘들고, 저시력 사용자는 거의 구분 불가능한 수준이었다. 특히 모바일에서는 더 심했다.

색상 토큰으로 문제를 설계로부터 풀기

접근성 개선은 단순히 "더 어두운 색을 쓴다"는 게 아니다. 문제는 설계 단계에서 비롯됐으니, 설계 단계에서 정산해야 한다. 우리 팀은 Figma에서 정의한 디자인 토큰을 CSS 변수로 컴파일해 관리한다. 색상 정의는 한 곳에만 있고, 전체 프로젝트에서 이를 참조한다.

/* 이전 정의 */
:root {
  --fg-mute: #888888;  /* 기본 보조 텍스트 */
}

/* 이후 정의 */
:root {
  --fg-mute: #666666;        /* AA 기준 충족, 일반 용도 */
  --fg-mute-deep: #444444;   /* AAA 기준 충족, 강조도 낮지만 필수 가독성 필요 */
  --gold-deep: #B8860B;      /* 연골드 뱃지용, AA 기준 충족 */
}

변경 범위는 public/styles.css에서 색상 토큰 정의를 업데이트하고, src/layouts/Base.astro에서 카드 날짜와 뱃지 엘리먼트의 클래스/스타일 참조를 수정했다. 이렇게 하면:

• 색상 일관성 유지 — 토큰 한 곳에서 관리되므로, 나중에 "연골드 좀 더 밝혀볼까?" 할 때도 한 번에 반영
• 의도의 명확화 — 디자이너와 개발자가 각 토큰의 용도를 명확히 이해
• 확장성 — 향후 다크 모드나 새로운 테마를 추가할 때도 자동으로 대응

팀 관점에서의 우선순위 결정

솔직히 이런 작업이 항상 "긴급"은 아니다. 기능적 버그가 없으니 사용자가 서비스를 못 쓰는 건 아니고, 비즈니스 메트릭 상 직접 영향도 눈에 띄지 않는다. 그럼에도 이걸 스프린트에 넣은 이유는:

1. 포용성의 신호 — "이 서비스는 모두를 고려해 만들었다"는 팀의 약속을 지키는 일
2. 법적 리스크 완화 — 일부 지역·산업에선 WCAG 준수가 명시적 요구사항
3. 기술 부채의 악순환 방지 — 작은 접근성 이슈도 방치하면, 나중에 대량의 리팩터링으로 돌아온다
4. 팀 문화의 변화 — 코드리뷰에서 "저대비 아닐까?" 물어보는 문화가 자리 잡으면, 새 기능에서부터 접근성이 기본값이 된다

이 PR을 리뷰할 때도 단순히 "색상 어두워졌네" 하지 않고, "토큰 정의가 명확한가, 다른 저대비 부분은 없는가, 향후 유지보수는 용이한가"까지 물었다. 이런 사소해 보이는 의사결정들이 쌓이면, 유지보수성과 접근성 모두 실질적으로 나아진다.

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

• 모니터 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

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