색상 대비(WCAG) 검사
두 색의 대비비와 WCAG AA·AAA 통과 여부를 확인합니다.
| 일반 텍스트 AA (4.5:1) | - |
|---|---|
| 일반 텍스트 AAA (7:1) | - |
| 큰 텍스트 AA (3:1) | - |
| 큰 텍스트 AAA (4.5:1) | - |
연한 회색 글씨가 세련돼 보여서 썼는데, 밝은 곳에서 휴대폰으로 보니 글자가 잘 안 읽힌다는 이야기를 듣는 경우가 있습니다. 감으로 판단하기 어려운 부분이라 수치로 확인하는 편이 확실합니다.
이 도구는 전경색(글자)과 배경색을 넣으면 두 색의 대비비를 계산하고, 웹 접근성 지침(WCAG)의 AA·AAA 기준을 통과하는지 표로 보여줍니다.
어떻게 계산되나요
쓰는 방법
전경색(글자)과 배경색을 컬러피커로 고르거나 옆칸에 HEX 코드를 직접 입력합니다. 값이 바뀔 때마다 미리보기 영역의 글자 색과 배경이 함께 바뀌므로, 숫자와 실제 보이는 모습을 같이 확인할 수 있습니다.
아래에는 대비비 6.2 : 1 같은 형태로 계산값이 나오고, 네 가지 기준별 통과·실패가 표로 표시됩니다.
대비비는 어떻게 계산되나
두 색의 상대 휘도(relative luminance)를 각각 구한 뒤, 다음 식으로 비율을 냅니다.
대비비 = (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05)
상대 휘도는 R·G·B 각 채널을 감마 보정한 뒤 0.2126·R + 0.7152·G + 0.0722·B로 가중 합산해 구합니다. 초록 계수가 가장 큰 이유는 사람 눈이 초록 계열 밝기에 가장 민감하기 때문입니다. 결과값은 최소 1:1(같은 색)에서 최대 21:1(검정과 흰색) 사이에 놓입니다.
기준표
| 대상 | AA | AAA |
|---|---|---|
| 일반 텍스트 | 4.5 : 1 | 7 : 1 |
| 큰 텍스트 | 3 : 1 | 4.5 : 1 |
여기서 '큰 텍스트'는 굵기가 보통일 때 18pt(약 24px) 이상, 굵은 글씨일 때 14pt(약 18.7px) 이상을 말합니다. 대비비는 색상의 밝기만 따지기 때문에, 통과하더라도 색맹 사용자에게 두 색이 구분되지 않을 수 있습니다. 색만으로 정보를 전달하지 않는지도 함께 살펴보는 것이 좋습니다. 실제 적합성 판단은 [W3C의 WCAG 문서](https://www.w3.org/WAI/WCAG21/quickref/)를 함께 확인하세요.
용어 정리
- 대비비(Contrast ratio)
- 두 색의 밝기 차이를 1:1부터 21:1까지의 비율로 나타낸 값. 클수록 잘 읽힙니다.
- 전경색
- 글자나 아이콘처럼 앞에 놓이는 요소의 색.
- WCAG
- W3C가 만든 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines).
- AA / AAA
- WCAG의 적합성 수준. AA가 일반적인 목표치이고, AAA는 더 엄격한 기준입니다.
- 큰 텍스트
- 보통 굵기 18pt(약 24px) 이상 또는 굵은 글씨 14pt(약 18.7px) 이상인 글자.
- 상대 휘도
- 사람 눈이 느끼는 밝기를 0(검정)~1(흰색)로 환산한 값.
자주 묻는 질문
AA와 AAA 중 어디까지 맞춰야 하나요?
일반적인 웹사이트는 AA(일반 텍스트 4.5:1)를 목표로 잡는 경우가 많습니다. AAA는 본문 전체에 적용하기에는 색 선택 폭이 크게 좁아져, 보통 중요한 안내문이나 접근성 요구가 높은 서비스에서 지향합니다.
아이콘이나 버튼 테두리에도 기준이 있나요?
WCAG 2.1에는 텍스트가 아닌 UI 요소와 그래픽에 대해 3:1 이상을 요구하는 항목이 있습니다. 이 도구는 텍스트 기준 네 가지만 표시하므로, 아이콘·입력창 테두리는 3:1을 기준으로 삼아 결과값을 읽으면 됩니다.
대비비를 통과했는데도 잘 안 보이는 이유는?
대비비는 밝기 차이만 계산하고 색상 자체의 차이는 반영하지 않습니다. 밝기가 비슷한 빨강과 초록처럼, 수치는 통과해도 색각 이상이 있는 사용자에게는 구분되지 않는 조합이 있습니다. 얇은 폰트나 작은 자간도 체감 가독성을 떨어뜨립니다.
반투명한 색은 어떻게 검사하나요?
이 도구는 불투명한 두 색만 비교합니다. `rgba()`로 투명도를 준 색이라면, 실제 화면에서 배경과 섞인 뒤의 최종 색을 먼저 구해서 그 값을 넣어야 정확합니다.
그라데이션 배경 위의 글자는요?
그라데이션은 위치마다 배경색이 다르므로, 가장 대비가 약해지는 지점(보통 글자색과 가장 비슷한 밝기 구간)의 색을 골라 검사하는 것이 안전합니다.
어떤 문제가 있었는지 알려주시면 빠르게 고치겠습니다. (회신이 필요하면 이메일을 남겨주세요)