색상 대비 체크 도구 추천과 사용법 - 웹 접근성 필수 가이드
WCAG 기준 색상 대비율 4.5:1을 충족하는지 빠르게 확인할 수 있는 무료 도구와 실전 활용법을 정리했습니다
웹사이트나 앱을 디자인할 때 예쁜 색 조합을 찾는 데 집중하다 보면, 정작 사용자가 글자를 읽을 수 있는지는 놓치기 쉽습니다. 특히 밝은 회색 배경에 흰 글자, 파란 배경에 남색 텍스트처럼 대비가 낮은 조합은 시력이 좋은 사람도 불편하게 느낍니다. 색상 대비 체크 도구를 활용하면 이런 문제를 설계 단계에서 미리 잡아낼 수 있습니다.
색상 대비가 중요한 이유
색상 대비(Color Contrast)는 전경색(텍스트)과 배경색 사이의 밝기 차이를 수치로 나타낸 것입니다. 대비율이 낮으면 다음과 같은 문제가 발생합니다.
- 저시력 사용자가 콘텐츠를 읽지 못합니다. 한국 시각장애인 수는 약 25만 명이며, 저시력자까지 포함하면 수백만 명에 달합니다.
- 모바일 환경에서 햇빛 아래 화면을 볼 때 대비가 낮은 텍스트는 사실상 보이지 않습니다.
- 고령 사용자의 비율이 높아지면서 접근성 미준수는 곧 이탈률 상승으로 이어집니다.
- 2025년부터 유럽 접근성법(EAA)이 시행되어, 해외 서비스를 운영한다면 법적 의무이기도 합니다.
실제로 WebAIM이 2024년 상위 100만 개 웹사이트를 분석한 결과, 전체 사이트의 81%가 텍스트 대비율 기준을 통과하지 못했습니다. 그만큼 대비율 검사는 기본이지만 지켜지지 않는 영역입니다.
WCAG 대비율 기준 정리
W3C가 발행한 WCAG(Web Content Accessibility Guidelines)에서는 텍스트 색상 대비율을 다음과 같이 규정합니다.
| 구분 | AA 등급 (최소) | AAA 등급 (강화) |
|---|---|---|
| 일반 텍스트 (18px 미만) | 4.5 : 1 이상 | 7 : 1 이상 |
| 큰 텍스트 (18px 이상 또는 14px Bold) | 3 : 1 이상 | 4.5 : 1 이상 |
| UI 컴포넌트·아이콘 | 3 : 1 이상 | - |
| 장식용 요소 | 기준 없음 | 기준 없음 |
대부분의 프로젝트에서는 AA 등급을 목표로 합니다. 공공기관이나 의료 서비스처럼 폭넓은 사용자를 대상으로 하는 경우 AAA를 권장합니다.
색상 대비율 4.5:1은 생각보다 기준이 높습니다. 감으로 괜찮아 보이는 색 조합도 실제로 체크하면 3:1도 안 되는 경우가 많습니다. 반드시 도구로 확인하는 습관이 필요합니다.
무료 색상 대비 체크 도구 5선
색상 대비 체크 도구는 웹 기반, 브라우저 확장, 데스크톱 앱 등 다양한 형태로 제공됩니다. 모두 무료로 사용할 수 있는 도구만 정리했습니다.
1. WebAIM Contrast Checker
가장 널리 쓰이는 웹 기반 색상 대비 체크 도구입니다. 전경색과 배경색의 HEX 값을 입력하면 즉시 대비율과 AA/AAA 통과 여부를 보여줍니다. 슬라이더로 색상을 미세 조정할 수 있어서 기준에 맞는 가장 가까운 색을 찾기 편합니다.
2. Colour Contrast Analyser (CCA)
TPGi에서 개발한 데스크톱 앱으로, Windows와 macOS 모두 지원합니다. 스포이트 기능이 있어서 화면 어디든 클릭하면 해당 색상을 추출해 대비율을 계산합니다. 디자인 시안 파일을 열어놓고 직접 체크할 때 유용합니다.
3. Chrome DevTools 내장 기능
Chrome 개발자 도구에서 요소의 color 속성을 클릭하면 컬러 피커가 열리고, 하단에 대비율이 자동으로 표시됩니다. 별도 설치 없이 바로 사용 가능하며, 기준 미달 시 추천 색상까지 제안합니다.
4. Stark (Figma 플러그인)
Figma에서 디자인 작업 중 실시간으로 대비율을 확인할 수 있는 플러그인입니다. 무료 플랜에서 기본 대비 체크 기능을 제공하며, 디자인 단계에서 접근성 문제를 잡는 데 효과적입니다.
5. axe DevTools (브라우저 확장)
Deque Systems에서 만든 접근성 전체 검사 도구입니다. 색상 대비뿐 아니라 alt 텍스트 누락, ARIA 속성 오류 등을 한꺼번에 검출합니다. 페이지 전체를 스캔하므로 배포 전 최종 점검에 적합합니다.
도구별 사용법과 실전 팁
색상 대비 체크 도구를 제대로 활용하려면 몇 가지 실전 팁을 알아두는 것이 좋습니다.
WebAIM 활용 순서
- 전경색(Foreground)에 텍스트 색상 HEX 값을 입력합니다.
- 배경색(Background)에 배경 HEX 값을 입력합니다.
- 결과에서 Normal Text AA 항목이 Pass인지 확인합니다.
- Fail이 나오면 Lightness 슬라이더를 조절해서 통과하는 가장 가까운 색을 찾습니다.
Chrome DevTools 활용 순서
- F12를 눌러 개발자 도구를 엽니다.
- 검사할 텍스트 요소를 선택합니다.
- Styles 패널에서 color 속성 옆 색상 사각형을 클릭합니다.
- 컬러 피커 하단의 Contrast ratio 섹션을 확인합니다.
- AA/AAA 옆 화살표를 클릭하면 권장 색상 라인이 표시됩니다.
개발 과정에서 색상 값이나 설정 파일을 자주 다루게 되는데, JSON 형식의 디자인 토큰을 관리할 때는 JSON 포매터 같은 도구로 가독성을 높이면 색상 코드를 빠르게 찾고 수정할 수 있습니다.
자주 틀리는 색상 조합과 해결법
디자인에서 반복적으로 나타나는 대비율 미달 사례를 정리했습니다. 색상 대비 체크 도구로 직접 확인해보면 감이 잡힙니다.
| 문제 조합 | 대비율 | 개선 방법 |
|---|---|---|
| 연회색 텍스트(#999) + 흰 배경(#FFF) | 2.8:1 (Fail) | #767676 이상으로 어둡게 조정 |
| 빨강(#FF0000) + 검정(#000) | 5.3:1 (AA Pass) | AAA 필요 시 #FF3333 사용 |
| 파랑(#0066CC) + 짙은 회색(#333) | 2.9:1 (Fail) | 배경을 #F5F5F5로 밝게 변경 |
| 초록(#00CC00) + 흰 배경(#FFF) | 2.3:1 (Fail) | #008800 이하로 채도 낮추기 |
| 주황(#FF8C00) + 흰 배경(#FFF) | 2.9:1 (Fail) | #B86200으로 명도 낮추기 |
특히 placeholder 텍스트의 대비율은 거의 모든 사이트에서 미달입니다. input 필드의 placeholder 색상도 반드시 3:1 이상을 유지해야 합니다.
색맹 사용자를 위한 추가 고려
대비율이 충분해도 색맹 사용자에게는 구별이 어려운 조합이 있습니다. 빨강-초록 조합이 대표적입니다. 색상만으로 정보를 전달하지 말고, 아이콘이나 텍스트 레이블을 함께 제공하는 것이 좋습니다. CCA 도구에는 색맹 시뮬레이션 기능도 포함되어 있어 미리 확인할 수 있습니다.
실무 워크플로우에 적용하기
색상 대비 검사를 일회성이 아닌 프로세스에 녹여야 놓치지 않습니다. 아래는 실무에서 바로 적용할 수 있는 워크플로우입니다.
단계별 검사 체크리스트
- 디자인 단계: Figma에서 Stark 플러그인으로 색상 토큰 정의 시 검사
- 개발 단계: Chrome DevTools로 구현된 화면에서 실시간 확인
- QA 단계: axe DevTools로 전체 페이지 자동 스캔
- CI/CD 파이프라인: axe-core 라이브러리를 테스트에 통합하면 배포 전 자동 검출 가능
자동화가 어려운 환경이라면 최소한 주요 페이지(메인, 로그인, 결제 등)만이라도 수동 체크하는 것을 권장합니다. 색상 대비 체크 도구 하나만 북마크해두어도 접근성 품질이 크게 달라집니다.
디자인 시스템에 통합하는 방법
디자인 토큰 파일에 대비율 정보를 주석으로 남기면 팀 전체가 안전한 색상을 사용하게 됩니다. 예를 들어 CSS 커스텀 속성에 대비율을 함께 기록하는 방식입니다.
접근성은 완성 후 점검하는 것이 아니라 설계 단계부터 고려해야 비용이 줄어듭니다. 오늘 당장 할 수 있는 두 가지를 추천합니다. 첫째, WebAIM Contrast Checker를 북마크에 추가하고 현재 프로젝트의 주요 색상 조합을 한 번 돌려보세요. 둘째, Chrome DevTools에서 대비율 표시 기능을 켜두고 개발 중 수시로 확인하는 습관을 들이세요. 작은 습관 하나가 수십만 사용자의 경험을 바꿉니다.
