웹 접근성 WCAG AAA 등급을 받으려면 텍스트와 배경 간 대비율 7:1이 필요합니다. 어떻게 확인하고 맞추는지 단계별로 알아봅니다.
대비율이란
두 색상의 상대적 밝기 차이를 수치화한 것입니다. 1:1은 같은 색(대비 없음), 21:1은 흰색과 검정처럼 최대 대비입니다. AA는 4.5:1, AAA는 7:1이 기준입니다.
대비율 계산하기
색상 변환기에서 전경색과 배경색의 RGB 값을 확인한 후, 대비율 계산 도구에 입력합니다. WebAIM Contrast Checker 같은 도구를 활용하세요.
대비 부족할 때 조정법
HSL에서 L(밝기) 값의 차이를 키우세요. 밝은 배경에는 더 어두운 텍스트, 어두운 배경에는 더 밝은 텍스트를 사용합니다. 채도는 유지하면서 밝기만 조절하면 브랜드 색상 느낌을 살릴 수 있습니다.
실무에서 자주 겪는 상황
웹 접근성 감사를 받으면 대부분 색상 대비 문제가 지적됩니다. 특히 플레이스홀더 텍스트, 비활성화된 버튼, 작은 텍스트에서 문제가 많이 발생합니다. 이런 요소들은 디자인 단계에서부터 충분한 대비를 고려해야 합니다. 색상 변환기로 색상을 확인하면서 작업하면 나중에 수정하는 번거로움을 줄일 수 있습니다.
자동 검사 도구 활용
axe, Lighthouse, WAVE 같은 도구로 페이지 전체의 접근성 문제를 한 번에 검사할 수 있습니다. 색상 대비 위반 요소가 있으면 해당 요소를 하이라이트해서 보여줍니다. Chrome DevTools의 CSS Overview에서도 대비가 부족한 텍스트를 찾을 수 있습니다. 개발 단계에서 자주 검사하는 습관을 들이면 릴리스 전에 문제를 발견할 수 있습니다.
최종 점검
프로젝트에서 사용하는 모든 색상을 문서화하세요. HEX, RGB, HSL 형식을 함께 기록하면 어떤 상황에서도 바로 사용할 수 있습니다. 색상 변환기로 일괄 변환하면 편리합니다.