대비율을 계산하는 방법
각 sRGB 채널을 선형 빛 값으로 바꾸고 상대 휘도를 구한 다음 밝은 값과 어두운 값을 비교합니다. 같은 색끼리는 1:1, 이상적인 검정과 흰색은 21:1입니다. 단순히 HEX 숫자의 차이를 재는 것이 아니라 WCAG가 정의한 계산을 따릅니다.
AA 기준은 하나가 아닙니다. 본문 크기 글자는 4.5:1이 필요합니다. 일반 굵기 24 CSS 픽셀 이상 또는 굵은 글자 약 18.66 픽셀 이상인 큰 글자는 3:1을 쓸 수 있습니다. 사용자가 알아봐야 하는 UI 테두리와 그래픽 개체도 인접한 색에 대해 일반적으로 3:1이 필요합니다.
숫자 통과는 필요하지만 그것만으로 접근 가능한 디자인이 되지는 않습니다. 가는 글꼴, 눈부심, 낮은 품질의 화면, 색각 차이, 색만으로 전달하는 상태는 여전히 문제를 만듭니다. 실제 구성요소를 확대해서 확인하고 상태에는 글자·모양·아이콘을 함께 쓰세요.
색상 대비 검사 사용 순서
- 최종 구성요소에 사용할 정확한 글자색과 배경색을 입력합니다.
- 대비율을 읽고 실제 글자 크기나 UI 역할에 해당하는 행을 확인합니다.
- 본문이 4.5:1에 미달하면 가까운 제안색을 적용하거나 디자인 토큰을 직접 조정합니다.
- 기본 화면뿐 아니라 hover, 비활성, 오류, 포커스, 선택 상태를 모두 검사합니다.
- 빨강과 초록 또는 어떤 한 색에만 의존하지 않아도 의미가 전달되는지 확인합니다.
실무에서 자주 쓰는 기준
| 상황·입력 | 결과·선택 | 판단 기준 |
|---|---|---|
| #777777 / #FFFFFF | 약 4.48:1 | 흔히 통과 예시로 반올림되지만 일반 글자 AA 4.5:1에는 아주 조금 미달합니다. |
| #000000 / #FFFFFF | 21:1 | WCAG 대비율의 최댓값입니다. |
| 페이지 위 버튼 테두리 | 목표 3:1 | 조작부를 알아보는 데 필요한 경계는 본문 대비가 아니라 비텍스트 대비에 해당합니다. |
더 나은 결과를 위한 실무 팁
- 계산값을 올림하지 마세요. 4.49:1은 4.5:1 기준을 충족하지 않습니다.
- 그라데이션이나 사진 위 글자는 평균 배경이 아니라 글자가 닿는 모든 영역을 확인하세요.
- 플레이스홀더도 사용자가 필요로 할 수 있는 정보이므로 지나치게 흐리게 만들지 마세요.
- 포커스 표시는 구성요소뿐 아니라 주변 페이지 영역과도 충분히 구분되어야 합니다.
도구가 알 수 없는 것
계산 결과를 정확하게 사용하려면 한계도 함께 알아야 합니다.
- 이 검사기는 불투명한 sRGB 두 색을 평가합니다. 투명도·블렌딩·그라데이션·이미지는 최종 렌더링 색이 필요합니다.
- WCAG 대비율은 개인별 색각 이상이나 저시력을 모사하지 않습니다.
- 자동 계산 통과는 실제 사용자와 보조기술을 통한 검사를 대신하지 않습니다.
자주 묻는 질문
본문 글자에 좋은 대비율은 얼마인가요?
WCAG 2.2 AA는 일반 크기 글자에 최소 4.5:1을 요구합니다. AAA는 7:1입니다. 큰 글자는 AA 3:1이 가능하지만 보통 본문은 일반 크기에 해당합니다.
흰색 위 #777777이 왜 미달인가요?
WCAG 휘도 계산으로 약 4.478:1이라 4.5:1보다 낮습니다. 통과 여부를 판단할 때 기준값까지 올림하면 안 됩니다.
AA를 통과하면 페이지 전체가 접근 가능한가요?
아닙니다. 측정한 색 조합과 기준만 확인합니다. 글꼴, 키보드 조작, 시맨틱 구조, 확대, 포커스, 라벨, 색에만 의존하지 않는 표현도 필요합니다.