카드 버튼과 생성기 안내문, 색상 대비 AA 준수로 마무리

카드 버튼과 생성기 안내문의 색상 대비를 WCAG AA 표준으로 맞추는 작업을 마쳤다. 간단한 색상 조정처럼 보이지만, 사실 시각 장애 또는 약시 사용자들이 우리 서비스를 정상적으로 이용할 수 있게 하는 접근성 개선이다.

WCAG AA 색상 대비도 기준

WCAG 2.1 AA 표준은 일반 텍스트의 명도 대비를 최소 4.5:1, 큰 텍스트(18px 이상 또는 14px bold 이상)의 대비를 3:1 이상으로 요구한다. 이건 단순한 "더 어두운 색을 고르세요" 같은 가이드가 아니라, 명도를 수학적으로 계산해서 검증하는 구체적인 기준이다.

실제 측정 방식을 보면:
1. 텍스트 색의 상대 명도(relative luminance) 계산
2. 배경색의 상대 명도 계산
3. (명도1 + 0.05) / (명도2 + 0.05)로 대비도 계산
4. 4.5 이상이면 통과, 미만이면 실패

우리 팀이 처음엔 이걸 가볍게 생각했던 것 같다. 디자인 시스템에서 gold-deep(카드 버튼)과 fg-soft(안내문)의 색상이 이미 정의되어 있었는데, 실제로 측정해보니 배경색과 조합했을 때 대비도가 낮았던 것. 시각 장애가 없는 사람 눈엔 멀쩡하게 보이지만, 약시 사용자나 밝은 환경에서 보는 사용자 입장에선 텍스트가 흐릿하게 느껴진다.

파일별 작업 내용

실제로는 스타일 변수 정의(styles.css) → 레이아웃이 그 변수를 참조 → 페이지가 그 변수를 통해 색상 적용, 이런 흐름이다. 한 곳에서 색상을 잘못 정의하면 여러 페이지에서 깨진다. 그래서 디자인 시스템이 중요한 것.

색상 시스템과 접근성 설계의 균형

팀 관점에서 본 교훈은 이거다:

색상을 정의할 때 "예쁜가"만 생각하면 안 되고, 실제 사용 콘텍스트(배경색, 조명, 사용자 시력)를 함께 생각해야 한다. 특히:
- 상호작용 요소(CTA 버튼): 눈에 띄어야 한다 → 높은 대비도 필수
- 보조 텍스트(안내문/disclaimer): 강조하진 않되 읽을 수 있어야 한다 → 최소 AA 준수, 그 이상 가능하면 좋음
- body 텍스트: 주요 콘텐츠 → 가장 높은 대비도 필요

이 사이의 균형을 잡는 게 디자인이다.

우리 팀에선 이제 색상 토큰을 정의할 때 자동화된 대비도 검사 도구를 거친다. Contrast Ratio(webaim.org) 같은 사이트나 Figma 플러그인에서 실시간으로 WCAG 준수 여부를 확인하는 식이다. 매뉴얼 방식이긴 하지만, 병합 전에 한 번쯤 체크하면 이런 이슈를 미리 잡을 수 있다.

큰 조직에선 axe devtools 같은 자동화 a11y 린터를 CI 파이프라인에 넣기도 한다. 우리가 아직 그 수준은 아니지만, 앞으로 갈수록 자동화가 필요해 보인다.

왜 지금 마무리했나

이 커밋이 "fix"로 분류된 건, 그게 실제로 버그였기 때문이다. 우리 서비스가 "최대한 많은 사용자가 사용할 수 있어야 한다"는 원칙을 따른다면, 색상 대비도 낮음은 일부 사용자를 배제하는 버그나 마찬가지다.

특히:
- 생성기 페이지: 사용자 입력과 상호작용이 많은 곳 → CTA는 명확히 눈에 띄어야 함
- 안내문(disclaimer): 법적·정책적으로 중요한 정보인 경우가 많음 → 읽기 어려워서 무시되면 안 됨

이런 우선순위 판단 위에서 이번 작업이 "언젠가"가 아니라 지금 마무리되어야 한다고 팀에서 합의했다. 접근성은 후순위가 아니라 처음부터 고려되어야 할 설계 사항이다.

작은 색상 조정이지만, 이게 누군가의 경험을 크게 바꾼다. 다음은 전체 페이지에 대한 대비도 감사를 체계적으로 진행할 차례다.

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

• 모니터 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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