사용법
- 전경색(글자 색)과 배경색을 색상 피커로 고르거나 HEX 값을 직접 입력합니다.
- 두 색의 대비비가 "4.53:1" 같은 형식으로 계산되어 표시됩니다.
- AA·AAA 기준의 일반 텍스트·큰 텍스트 통과 여부가 통과/실패 배지로 나타납니다.
- 아래 미리보기에서 실제 글자가 배경 위에서 읽기 편한지 눈으로 확인합니다.
활용 팁
- 본문 색은 AA 이상을 목표로: 일반 텍스트는 대비비 4.5:1(AA)을 넘겨야 시력이 약한 사용자도 읽기 편합니다. 회색 본문(#777 등)을 흰 배경에 쓸 때 통과하는지 꼭 확인하세요. 통과하지 못하면 글자를 더 진하게 조정합니다.
- 큰 제목은 기준이 완화됩니다: 18pt(약 24px) 이상 또는 14pt 굵은 글씨는 "큰 텍스트"로 분류되어 3:1(AA)만 넘으면 됩니다. 그래서 옅은 색 제목도 크게 쓰면 기준을 통과할 수 있습니다.
- 버튼·링크에도 적용: 배경색 위 버튼 글자, 강조 링크 색도 대비를 확인해야 합니다. 브랜드 색이 흰 글자와 대비가 부족하면 색을 약간 어둡게 조정해 가독성과 접근성을 모두 잡으세요.
자주 묻는 질문
Q. 대비비는 어떻게 계산되나요?
각 색의 상대 휘도(밝기)를 WCAG 공식으로 구한 뒤, (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05)로 계산합니다. 결과는 1:1(차이 없음)부터 21:1(검정·흰색)까지의 값으로 나옵니다.
Q. AA와 AAA는 무엇이 다른가요?
둘 다 WCAG 접근성 등급으로, AAA가 더 엄격합니다. 일반 텍스트 기준 AA는 4.5:1, AAA는 7:1을 요구합니다. 공공·금융 사이트는 AAA를, 일반 웹은 최소 AA를 충족하는 것이 권장됩니다.
Q. 큰 텍스트와 일반 텍스트의 기준이 왜 다른가요?
큰 글자는 같은 대비라도 읽기 쉬워 기준이 완화됩니다. WCAG는 18pt(약 24px) 이상 또는 14pt 굵은 글씨를 '큰 텍스트'로 보고, 일반 텍스트(AA 4.5:1)보다 낮은 3:1도 통과로 인정합니다.