글자색과 배경색의 대비가 약하면 읽기 어렵고, 저시력 사용자에게는 더 큰 장벽이 됩니다. 웹접근성 지침은 이 대비를 수치로 정해 두었습니다. 이 도구는 두 색의 대비비를 계산하고, WCAG 기준 통과 여부를 미리보기와 함께 보여줍니다.
대비비와 WCAG 기준
대비비는 두 색의 밝기 차이를 1:1(같음)부터 21:1(검정과 흰색)까지로 나타냅니다. 숫자가 클수록 또렷하게 구분됩니다. WCAG 2.2는 텍스트 종류별로 최소 대비를 정해 두었습니다.
텍스트만이 아니라 입력창 테두리나 아이콘 같은 비텍스트 요소에도 최소 대비가 따로 걸려 있습니다. 대상별 기준을 AA·AAA로 나란히 두면 이렇습니다.
| 적용 대상 | AA 최소 대비 | AAA 최소 대비 |
|---|---|---|
| 본문(일반) 텍스트 | 4.5 : 1 | 7 : 1 |
| 큰 텍스트 — 18pt 또는 굵은 14pt 이상 | 3 : 1 | 4.5 : 1 |
| UI 컴포넌트·그래픽 — 입력 테두리·아이콘·차트 선 | 3 : 1 | 기준 없음 |
| 장식용·비활성(disabled) 요소 | 기준 없음 | 기준 없음 |
한국 웹접근성(KWCAG)에서도 중요
한국형 웹콘텐츠 접근성 지침(KWCAG)도 본문 텍스트에 4.5 : 1 이상의 명도 대비를 권장합니다. 공공기관·기업 사이트는 접근성 인증에서 이 항목을 점검받기 때문에, 브랜드 색을 정할 때 미리 확인해 두면 좋습니다.
이 도구는 색을 바꾸는 즉시 대비비와 통과 여부가 갱신되고, 실제 글자가 어떻게 보이는지 미리보기로 확인할 수 있습니다. 모든 계산은 브라우저 안에서 이루어집니다.
합격·불합격 예시로 감 잡기
수치만 보면 막연하니 흰 배경(#FFFFFF)에 글자색을 바꿔 가며 대비를 재 봅니다. 회색 계열은 경계가 애매해서 특히 헷갈리는데, 실제 값으로 보면 선이 또렷해집니다.
- #767676 글자 → 4.54 : 1. 본문 AA를 겨우 통과하는 하한선입니다.
- #999999 글자 → 2.85 : 1. 흔히 쓰는 연회색이지만 본문 기준에는 미달입니다.
- #595959 글자 → 7.0 : 1. AAA까지 통과해 긴 글에도 안전합니다.
- 다크 테마라면 #0A0A0A 배경에 #FAFAFA 글자가 약 19 : 1로 넉넉합니다.
색이 있는 글자·버튼의 실측 대비
회색 예시로 감을 잡았다면, 채도가 있는 색은 어떤지도 봐 둘 만합니다. 강조색은 눈에 잘 띄어 대비도 높으리라 여기기 쉽지만, 실제로는 4.5:1 언저리에서 아슬아슬한 경우가 많습니다.
| 글자색 / 배경 | 대비비 | 본문 AA (4.5:1) | 큰 텍스트 AA (3:1) |
|---|---|---|---|
| #0066CC / #FFFFFF (링크 파랑) | 5.57 : 1 | 통과 | 통과 |
| #008060 / #FFFFFF (초록) | 4.93 : 1 | 통과 | 통과 |
| #C45C2C / #FFFFFF (강조색을 본문에) | 4.27 : 1 | 미달 | 통과 |
| #E8734A / #FFFFFF (밝은 주황) | 3.01 : 1 | 미달 | 통과 |
| #FFFFFF / #C45C2C (강조색 버튼의 흰 글자) | 4.27 : 1 | 미달 | 통과 |
버튼·링크·비활성 요소는 특히 조심
배경이 브랜드 색인 버튼도 같은 방식으로 확인합니다. 강조색 위에 흰 글자를 얹었을 때 3 : 1도 안 나오면, 글자를 굵게 키우거나 배경을 한 톤 어둡게 조정하는 편이 낫습니다.
대비가 가장 자주 무너지는 곳은 '연하게' 처리하는 요소입니다. 흐린 회색 플레이스홀더, 옅은 링크색, 비활성 버튼의 라벨은 보기엔 세련돼도 읽기 힘든 경우가 많으니, 최소 대비를 넘겼는지 꼭 재 보세요.